Style With Substance

Making CSS Work

Eric A. Meyer

Standards Evangelist
Netscape Communications

(Re)stating some truths

CSS is NOT a pixel-fidelity presentation language!
The reader can always trump the designer
Look for patterns in your structure
Use actual (x)HTML elements; don't try to make everything into divs and spans
Tables are fine, but use them sparingly
Write CSS that's readable to you

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);

Fonts

Two main camps: pixels versus percentages (and ems)
Pixels give you greater consistency of display, but run into problems on very high-resolution screens
Percentages adapt to the user's preferences, but can look "stupidly big" to many users
Users can override any text size, but most users don't know that
Examine both approaches, decide what you can tolerate, and go for it, knowing that someone will complain
Consider offering an interface widget for text resizing, especially with pixels

Working with tables

Tables are not evil, but they have been badly used and introduced a lot of waste
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

»»»

Floating

Floating elements is often a reasonable alternative to both tables and positioning
Works well for simple two-column layouts and similar approaches
Generally requires widths be set explicitly
Best to leave most content in the normal flow and open space with margins or padding
Structures are often the same as in positioning

»»»

Positioning

A field to be trod lightly
Push positioning too far, and it will break down
Even with what we have, there's still a lot of room for interesting work
Relative positioning is reliable
Absolute positioning is fairly reliable
Fixed positioning is unreliable, but can be corrected

http://and.doxdesk.com/software/

»»»

Fixed vs. liquid

You can go whichever way you like, but...
Fixed layout is by its nature inflexible
Liquid layout adapts to the environment
Too much flexibility can be disastrous, of course; thus min-width, max-width, and the height-based equivalents
IE/Win can be made to support these properties

http://and.doxdesk.com/software/

»»»

The legacy concern

Older browsers like IE4 and NN4.x won't take well to any but the most basic positioning
It's possible to mangle the page, or crash the browser, if these older guys are pushed too far
If this is a major concern you have a couple of choices
One, use tables and don't worry about positioning
Two, don't hand over the advanced styles to older browsers

Browser compatibility

Really good or really bad, depending on what you're interested in doing and in which browsers
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
The danger of designing for IE/PC is that IE lets you get away with stuff that isn't correct, so VALIDATE!

»»»

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
IE/Win will handle width differently between the two modes

»»»

Hiding CSS

You can hide CSS from older browsers, thus giving them the content and a less styled page without actually breaking anything
These serve as feature-based detection without requiring Javascript
@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
You can also use "overlapping" styles to strike a balance between NN4.x and recent browsers

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

»»»

Fooling Browsers With CSS2

A less convoluted approach is to simply author advanced selectors
Less advanced browsers will skip rules with complicated CSS2 selectors

Examples:

html>body h1 {position: fixed;}

h1+p {font-style: italic;}

This is useful for hiding CSS2 declarations from browsers that won't understand them
It's less useful for excluding old browsers like NN4.x

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

Media-specific styles

CSS is no longer just a screen-presentation laguage

<link rel="stylesheet" type="text/css"

  href="printStyle.css" media="print">

Aural styles theoretically possible, but basically unsupported
Print styles have some support, but it isn't terribly good
Strength is still in screen styles
It's still possible to do interesting things with other media, like project styles

http://www.alistapart.com/stories/goingtoprint/

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!

»»»

Style With Substance

Making CSS Work

Eric A. Meyer

Standards EvangelistNetscape Communications

(Re)stating some truths

A few basic terms

Fonts

Working with tables

Floating

Positioning

Fixed vs. liquid

The legacy concern

Browser compatibility

DOCTYPE switching

Hiding CSS

Fooling Browsers With CSS2

Core principles

Media-specific styles

Far horizons

Places to learn more

Standards Evangelist
Netscape Communications