274 HOW: Style Sheets for Designers: Trouble in Paradise
den behind an image, it is best to hope and pray that most Netscape 4.x users are equipped with a more recent version of the browser. Alternately, the designer can create pages that use no images whatsoever—scarcely an attractive option. Finally, the designer can wrap images inside table cells, given that doing so seems to solve most of these problems—at the terrible cost of adding needless, bandwidth-wasting and time-consuming code to every single web page.
The good news of course is that Netscape 6 avoids all these problems, and Netscape 4, like other old browsers, will gradually wither away. The bad news is it hasn’t withered away yet. So proceed with caution.
Fear of Style Sheets: CSS and Typography
Guerrilla warfare pays little heed to niceties and neither can designers in the trenches. Too much of CSS still does not work in millions of web users’ browsers. To prepare you for battle, we will now pay little heed to the way things should work. Instead, we will show you what does work in any CSScapable browser, no matter how old, inadequate, or semi-standards- compatible it is. In other words, the following is an interim strategy for use until nearly all web users are packing a CSS-compliant browser. If you wish to control your web typography with CSS (and why wouldn’t you wish to do that?), there are only two things that always work:
1.Use pixels (not points, not .ems, not percentages, not keywords) to specify your font sizes.
2.Or use nothing. Do not specify font sizes at all, and let the browser’s stylistic defaults and the visitor’s preferences take care of the relative size relationships. This approach is detailed in the “Dao of Web Design” article at A List Apart (www.alistapart.com/stories/dao/)
Promise and performance
By now you understand that CSS is an important standard. It allows web designers to specify the font family, size, margins, and leading of type on the web; permits web designers to create advanced web layouts without abusing HTML; and enables web designers, web practitioners, and programmers to separate design elements (presentation) from content.
Taking Your Talent to the Web |
275 |
This ability to separate presentation from content theoretically empowers us to create attractive sites without excluding visitors who cannot use graphical browsers—a highly desirable goal. It also paves the way for the expansion of the Web beyond the desktop computer and onto a variety of hand-held and other Internet-enabled devices.
Yet many times our best CSS efforts fail in one browser or another.
Even though the CSS Level 1 standard was finalized in 1996, the first browser to meaningfully support it did not appear until the year 2000 (Internet Explorer 5, Macintosh Edition). Fortunately, Netscape 6 (multiple platforms), Opera 5 (multiple platforms), and Konqueror (Linux/UNIX) soon followed, with commendable CSS support of their own. But each of these
fine browsers enjoys only a relatively small market share as of this writing.
At present, the market is dominated by IE for Windows—a browser that comes teasingly close but misses the mark in a few critical areas. The Windows version of Microsoft’s browser did not fully support CSS-1 before the release of IE6—if then. And Netscape Navigator 4, still used by tens of millions, does such a poor job of handling style sheets that it has been known to crash upon encountering them, as detailed in A List Apart’s “The Day the Browser Died.”
Faced with these inconsistencies, many web designers have avoided using CSS altogether. A few brave souls have leaped ahead to fully exploit the power of CSS in spite of the dangers posed to old browsers. Other web designers and developers have followed the “No-Fault CSS” plan outlined in A List Apart’s “Fear of Style Sheets” series, whether they picked it up at
ALA or figured it out on their own.
Still others—tricky devils—have created platform and browser detection scripts to serve a variety of “appropriate” style sheets to specific user agents—for instance, serving one style sheet to an IE4/Mac user and another to a Navigator 4 user on Windows NT. This approach was always unpleasantly complicated, but at least it used to work. As we’ll show you in a moment, it no longer works.
What works? Pixels or no sizing at all works. How can we make this audacious claim? We’ll let an expert make it for us. Take a sad look at Web Review’s Master List and see the inconsistencies for yourself: