A Web of Style and Substance

• A Web of Style and Substance
• www.complexspiral.com/events/archive/2003/lanl/

An Introduction

• Author, Eric Meyer on CSS and Cascading Style Sheets: The Definitive Guide
• Creator of W3C CSS1 Test Suite and CSS1 Support Grid
• Editorial/production manager and redesigner of Netscape DevEdge
• Started with HTML and the Web in late 1993; CWRU Webmaster 1994 - 2000

Why CSS, and How Much?

• Designing with CSS makes updates and changes a whole lot simpler
• It's much easier to make pages accessible with CSS-driven design
• Printer-friendly and handheld styling is easy, although user agents can be a problem
• In my opinion, any site should use CSS as much as possible

CSS and Accessibility

• When using CSS-driven design, structural markup is important
• The foundation of accessible content is structural markup
• Structural markup and accessibility are not equivalent, but they are closely related
• Avoid "classitis" and "divitis" and you're likely to be fine

CSS For Alternate User Agents

• Handheld devices benefit from structural markup
• The problem is handhelds that try to be screen devices
• Styling for print: it's a lot like screen design
• Points are a great unit of measure for print design (but not for screen!)

Measurement Units

• Pixels: good for laying out and sizing elements in some circumstances
• Ems: good for setting font sizes and spacing that scales consistently
• Percentages: good for liquid layout and em-type font sizing
• Points and physical units: great for print, terrible for screen

At the Mercy of User Agents

• We can develop the perfect design in any single user agent, but the result may not survive in the wild
• There are six major engines: Trident, Tasman, Gecko, KHTML, "KHTML+", and Opera
• Core standards support among the majors is pretty solid, but gets less consistent outside the core
• Sadly, the box model still haunts us, but there are fairly simple fixes
• Then there are the sub-market players (e.g., Danger, Fonix)

Browser Emulators To the Rescue?

• BrowserCam is a new service that can show you a page in dozens of browsers on multiple platforms
• Emulators can be risky, and "cam" services are essentially static
• There's always Virtual PC (which is what I use)
• The behavior is interactive and corresponds 1:1, but it's slow and can be expensive

Setting Up A Development Environment

• For an all-in-one testing solution, it's hard to beat Mozilla and its inspectors
• Bookmarklets (a.k.a. favelets) can be a major help for authors
• W3C validation is a critical step, but don't overdose
• Get access to as many browsers as possible

Converting Old Designs

• Strip out all font tags, br tags, and spacer GIFs
• Look for lists formatted as tables, or using non-list markup
• Identify repeated graphic elements and attempt to move them into backgrounds or list markers
• Reduce table markup as much as possible

Flashes of Insight

• Seeing complexspiral (the genesis of css/edge)
• Realizing that popups can be driven by pure CSS, with no JavaScript necessary
• Discovering that most navigation links are simply restyled lists
• Finding a way to bring element and background positioning together to create complexspiral-like effects

In Closing

• CSS has the potential to streamline and simplify any Web site
• Accessibility and alternate-medium support are a snap
• Support is evening out and the entire standards space stabilizing
• Conversions can be very straightforward and highly beneficial
• There's still room to explore and techniques to discover