zeldman.com core page. Funhouse. Entertainment for you. A List Apart magazine. 15 Minutes, interviews with the stars. Free graphics. Ask Dr Web. HTML and design help. Les Misc. Tons more cool stuff.
The Daily Report. A nutritious part of the complete zeldman.com breakfast.

<a simplified guide to css>

In the past week, three of the smartest web designers we know have come to us with mistaken views on how CSS works in old and new web browsers.

If absolute control of the visual interface is your most important goal, use pixels in your Style Sheet. Pixels work the same way on all platforms and all "CSS-capable" browsers (even the old, cruddy ones). Platforms make no difference. Browser versions make no difference. User preference settings make no difference. More complex methods no longer work and may cause harm.
        The downside of CSS set in pixels? Readers troubled by small type or other problems can't adjust the size in IE/Windows or Netscape 4. They can adjust the size in IE5/Mac, Netscape 6, and Opera 4/5. Hopefully soon in IE/Win as well.

If accessibility is your most important goal, write your CSS in ems—but understand that your layout will vary radically from user to user. When ems work right, they are based on the user's type size default, which varies by browser, by platform (pre-IE5/Netscape6), and by the web user's own preference settings. In old versions of IE and Netscape, ems don't work at all, or they work incorrectly.

In fully CSS-compliant browsers, ems offer an accessible means of designing web text. But by that very fact, they remove the possibility of absolute design control. Accessibility and absolute design control are different goals.
        In IE5/Mac, Netscape 6, and Opera 4/5, CSS set in pixels offers absolute design control without causing major accessibility problems, because, in those browers, users can "zoom" the text to the size they're most comfortable with. (You lose absolute design control at that point, but for a worthwhile cause.)
        In other CSS-capable browsers, CSS set in pixels offers absolute design control, but at the cost of accessibility.
        But whether the browser is old or new, standards-compliant or so-so, for Mac or Windows or Linux—and whether the user has adjusted her browser preference settings or not—if you set your Style Sheet in pixels, with no further ado, you will have absolute control over your design.
        If you use points, JavaScript browser and version detection, Perl scripts and CGI, or any other complex methods, you will not attain design control. You will just screw up life for your readers.

Spread the word.

Fine Print:
In Netscape 4 for Windows, 10px type displays at 9px. No living soul can say why. Consider it the exception to the rule, and be glad Netscape 4 is on its way out. Hat tip: Peter van Broekhoven.

Dao of Web Design: John Allsopp
Fear of Style Sheets IV: Zeldman
Why IE5/Mac Matters: Zeldman


Previously? » MS Office Hell

The author and his opinions.
 © 1995 — 2001 Jeffrey Zeldman Presents
Reset bookmarks to www.zeldman.com. Ahead Warp Speed.