A Life of Style and Ease

Using CSS in the Real World

Eric A. Meyer

Standards Evangelist
Netscape Communications

The advantages

• Powerful set of capabilities hampered only by browser support
• Well-supported in current browsers
• Human-readable and -writable code for presentation
• Allows document structure to be very simple
• Reduces page weight
• Permits centralized changes to presentation of an entire site

A few basic terms

• selector, declaration, declaration block, rule

  h1 {color: red; background: yellow;}

• content-area
• element

  h1

• attribute

  bgcolor

• embedded stylesheet

  <style="text/css">...</style>

• external stylesheet

  <link rel="stylesheet" type="text/css"
     href="site.css">
  @import url(page.css);

Thinking in style

• CSS is NOT a pixel-fidelity presentation language!
• Move presentation a step back; pull it out of the markup
• Look for patterns in your structure
• Use actual (x)HTML elements; don’t try to make everything into divs and spans
• Use tables, but sparingly
• Write CSS that’s readable to you (there are many choices)

Working with tables

• Tables are not evil, but they have been badly used and introduced a lot of wasted effort
• Non-table layout is possible in v5+ browsers, but it’s not always desirable
• If you’re going to use tables, strip them down to the bare minimum!
• Tables are most useful as layout-framing devices
• Add class and id hooks to cells in order to write styles that target cell contents
• Make use of contextual selectors to target contents

Browser compatibility

• Really good or really bad, depending on what you’re interested in doing and where
• Between v5+ browsers, CSS1 support is excellent!
• Between v5+ browsers, CSS2 support is limited but fairly good
• Between v4 browsers, general CSS support is terrible
• IE6 is basically IE5 with a few changes

• http://www.webreview.com/style/mastergrid.html
• http://www.westciv.com/style_master/academy/browser_support/index.html

Testing

• Testing in browser/OS combinations is always a good idea
• If you have a Macintosh (like an iLamp!), then you can install VirtualPC and have bunches of browser/OS combos for testing
• The danger of designing for IE/PC is that IE lets you get away with stuff that isn’t correct, so VALIDATE!
• Never assume that if it works in IE/PC then it must (or even should) be okay in other browsers

• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/

Trouble-free CSS

• In v4+ environments, font styling and colors are about all that’s truly trouble-free (thanks to NN4.x)
• In v5+ browsers, almost everything in CSS1 is trouble-free, with a few edge-case exceptions
• You can hide your CSS from older browsers so that they don’t get too confused

DOCTYPE switching

• The DOCTYPE can have an effect on layout in IE6/Win IE5/Mac, Mozilla
• You get your choice of "quirks" and "standards" modes
• Behavioral differences are not consistent between browsers, but browsers are most consistent when in "standards" mode

• http://www.meyerweb.com/eric/dom/dtype/dtype-grid.html
• http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
• http://www.people.fas.harvard.edu/~dbaron/mozilla/doctypes/

Hiding CSS

• You can hide CSS from older browsers, thus giving them the content and a less styled page without actually breaking anything
• @import is most widely used, but the voice-family hack is gaining in popularity
• A classic example is hiding box properties set on links, and hover styles, from NN4.x

• http://pixels.pixelpark.com/~koch/hide_css_from_browsers/
• http://pixels.pixelpark.com/~koch/hide_css_from_browsers/summary/

Link style

• Five choices: link, visited, focus, hover, active
• Link means unvisited link (names chosen to parallel HTML attributes)
• Hovering isn’t supported by NN4.x
• Some hover styles aren’t supported by Opera
• Hovering can be used to do some unexpected things, like popups
• Other states are also under-used (make visited links disappear)
• Icons can be inserted depending on state

Link style ordering

• The recommended order is L-V-F-H-A (the F is rarely used)
• Why? Specificity!
• Collisions between properties are resolved using the cascade, of which specificity is a part
• Selectors have a specificity, and the link states are all the same specificity

• http://www.meyerweb.com/eric/css/link-specificity.html

Other order sensitivities

• The weight and origin of a selector is usually the important thing
• font is defined to care about order of size and family
• Shorthand properties can override previous values

  h1 {font-weight: bold;}
  h1, h2, h3 {font: 200% sans-serif;}

  (equivalent to normal normal normal 200% sans-serif;)

Core principles

• VALIDATE!
• Remember that your design is at the mercy of the user’s environment
• Author in the manner that works best for you
• Stick to simple stuff first, and build up complexity over time
• Try to think of page elements in a visual way, and visualize how your styles will affect their presentation
• Know the rendering mode your page will trigger
• Consider hiding advanced styles from older browsers
• Remember that order can matter, sometimes in surprising ways

Far horizons

• We aren’t even completely sure what CSS makes possible
• Browser flaws held us back for a long time, but with recent releases the floodgates are opening
• New techniques and ideas are being uncovered even today
• Some Javascript-based fixes exist for legacy flaws!

• http://www.meyerweb.com/eric/css/edge/
• http://and.doxdesk.com/software/

Places to learn more

• http://www.w3.org/Style/CSS/
• http://two.pairlist.net/mailman/listinfo/css-discuss/
• http://www.meyerweb.com/eric/css/
• http://www.webreview.com/
• http://www.alistapart.com/
• http://www.htmlhelp.com/