 | ||
|
| ||
| ||
|
| ||
Nadja Vol Ochs
Design Consultant
Microsoft Corporation
April 20, 1998
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices)"Site Lights" column.
My October 1997 Site Lights column included a paragraph on Cascading Style Sheet (CSS) compatibility, plus a small sample. Recently, Sue Sims, CSS specialist from the CSS Pointers group, brought to my attention that the article had incorrect information on CSS compatibility. I am dedicated to sharing correct and reliable information in these columns. Therefore, this month is dedicated to bringing you up-to-date information on CSS compatibility solutions. Apologies for the previous misinformation, and a big thanks to Sue!
I invited Sue and her partners in the CSS Pointers group to share their philosophy and explain how they help to create a community of knowledge on Web design issues. In addition, they share a couple clever workarounds for authoring safe and compatible CSS.
Have you been pulling your hair out, trying to decipher how all the different implementations of CSS work in Netscape 4. x, Internet Explorer 3. x and Internet Explorer 4.0 for both the Macintosh and Windows 95 operating systems? There are plenty of people who sympathize with you, including me. After painstaking hours of testing and authoring CSS, several people have pulled together some very helpful resources.
When I wrote my October column, it was nearly impossible to find information on how to author CSS that worked in browsers supporting CSS. All I could find was a small chapter in a book on Dynamic HTML, hot off the press with the launch of Internet Explorer 4.0. I was so excited to have finally found some information that I instantly started working with the book's samples and information. Turns out they were wrong. What? How can that be?
Should one never trust the written word of books or publications on DHMTL?
Sue Sims: "At least not until you confirm it for yourself. Even that's hard. I found some CSS implementation differences between Netscape Navigator 4.01 and version 4.04, although I never saw any documentation on it, nor any change in the Netscape Navigator-known CSS bugs page on the Netscape site's DevEdge area."
What about relying on published CSS material?
Sue Sims: "I learned about relying on published CSS material the hard way, too. A DHTML book I rushed to purchase had doubtful information in the first chapter, along with some examples, which did not work as advertised. Lesson learned: Don't rush; wait until enough time has passed for experiments to succeed, and then buy when you recognize the author's name as someone you trust."
If you are just starting to tackle CSS compatibility issues, you are fortunate! There are now resources available. A highly recommended resource is Eric Meyer's compatibility charts on the Web Review 
Web site.
Another great resource , which is part of the CSS Pointers group, details bugs and workarounds that have been found by members of the group.
In compiling this page, the authors and participants in the style-sheet newsgroup ran hundreds of tests on all the CSS properties to find workarounds. I recommend joining the newsgroup at news:comp.infosystems.www.authoring.stylesheets . I've been hanging out on the newsgroup, not saying anything, but using it for information. You will be surprised at how many questions and answers are available. Newsgroups can be a very helpful resource, because they involve a community and a consensus of information.
The MSDN Online private newsgroups is also very informative.
The CSS Pointers Web site has an extensive list of resources and information.
The World Wide Web Consortium (W3C) is the mecca for CSS past, present, and future information.
The best solution is to keep CSS authoring simple, and gradually build your pages with more advanced style sheets. When you start to use CSS Positioning , you will find more differentiation between browser implementations. Here are a few helpful solutions for authoring compatible CSS.
When authoring a style sheet, you can create classes.
THIS IS A CLASS CALLED PINK APPLIED TO A
PARAGRAPH
<STYLE type="text/css">.PINK {color:pink; font-family:verdana}
</STYLE>
<P CLASS=PINK>this paragraph is pink</P>
You can create any names you like for classes, with a couple exceptions. You can't start your class names with a digit or a dash. For example, creating a class called: .153 {color:pink} or .-153 {color:pink} will not work in all browsers. But using a class name called .p123 {color:pink} is safe. Take a look at this sample to learn how to avoid problems with class names.
To learn more, see Section 7.1 (forward-compatible parsing) of the CSS, level 1 W3C recommendation: "in CSS1, selectors (element names, classes and IDs) can contain only the characters A-Z, 0-9, and Unicode characters 161-255, plus dash (-); they cannot start with a dash or a digit; ..."
Avoid small font sizes; on the Mac platform, fonts set to font-size small, or to point or pixel amounts less than 10, will render type that is illegible. When using Netscape Navigator 4. x on the Macintosh, font size set to small (<P STYLE="font-size:small">) will be legible only in some fonts. For all browsers, set your font sizes greater than the quantity of 10 pixels or 10 points so the type will be legible. Small points and pixels are hard to read.
View a sample of small font sizes.
Although browsers do not yet support the pseudoelement "first-letter," a simulated drop cap is achieved with CSS by using the following code:
<STYLE>
<!--
.dropcap {float: left; color: red;
font-size: x-large; width: 1em;
height: 1em; }
-->
</STYLE>
<SPAN class="dropcap">T</SPAN>his is a
paragraph with a fairly large "T" in
front of it. Addition of the width
attribute allows rendering in
Internet Explorer.
Doing a drop cap this way will work for most browers -- except that the height attribute does not work on different Mac versions. The letter will be dropped, but it will overlap the preceding lines of text.
You may have noticed that Netscape causes background color to extend only under text. The solution here is to add a border with 1 pixel width to the background declaration.
This CSS class allows highlighting of any block of text included in the <SPAN> tags.
<STYLE>
<!--
.highlight {background-color: yellow;
color: black;width: 10em;
font-size: x-small;border: 1px ridge;}
-->
</STYLE>
<P><SPAN CLASS="highlight">This sample text
will have a background color of yellow,
which will extend to encompass the text,
regardless of the length.</SPAN></P>
View a sample of the highlight class.
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
Using relative positioning with CSS, you can add the virtual equivalent of a "sticky-style note" to any Web page. Check out some examples .
"Notagifs" could replace some tiny images, allowing faster page loading, and still showing something to those browsing with images off. The notagif is demonstrated on the CSS Pointers page.
Having tired of repeating the same warnings when issuing CSS advice, the CSS Pointers Group consolidated its caveats :
CSS and the Decorative Horizontal Rule , by Alan Flavell
Borders that work in Netscape Navigator
Thanks to other CSS Pointers for contributing to this column:
Toby Brown
Jan Roland Eriksson
Susan Lesch
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top