SXSW Notes: CSS Problem Solving

Loose notes from SXSW 2006 session: CSS Problem Solving

Code-heavy, fast-moving session addressing some of the most common CSS problems listed by developers in a pre-conference survey.

Ethan Marcotte Creative Lead, Vertua Studios
Dave Shea and CSS Zen Garden
Charles Wyke-Smith Dir of Production, Nacio Systems
Christopher Schmitt Principal, Inc
Tiffany B Brown Owner, Webinista LLC/Georgia Institute of Technology

Pre-conference CSS survey revealed that developers feel top problems are:

Browser compatibility
Page layouts / columns
JavaScript/DOM Integration

Quick overview of intro CSS concepts:
Inheritance – Not all properties are inherited (e.g. border)
Specificity – (A graf with an ID takes over the style of the parent P definition)
The Cascade – Specificity overrides order!

Use multiple stylesheets (at least one for layout and one for fonts/colors), and put your MSIE hacks in a separate sheet. Document your hacks carefully. OR use “Surgical Style” – put each hack in a separate sheet, then pull in each one as necessary with @import – makes them easier to remove when no longer needed.

Or: Use PHP to put together all CSS files and serve them to the browser at once (efficiency)

Many of the most common hacks will be going away with IE7.

CSS layout stragegies: Float Like a Butterfly! (challenges of float-based layouts)

Learn to love absolute positioning. It’s all about the x and y axes. Treat parts of your document as distinct “layers.” Use CSS to precisely place them upon a coordinate grid.

Absolute positining offsets from the page boundaries, but other elements can go relative to that. To put a caption on a photo, you can postion the caption div, say, 9px up from the bottom of the photo. IOTW, floats and absolute positioning can be interleaved on the same site with great results.

Why isn’t everyone using absolute positioning? “Bottom blindness” – columns can easily become removed from the rest of the document flow, and so can overlap other page elements – commonly the footer. The solution: Left and right divs aboslute, with middle column relative to them. What if the content column is too short? Place the footer within the content area.

Antiwebber Dan Cederholm mentioned – his work for Fast Company and books mentioned.

Floats: Remember img align=left? Floats work on the same principle. Context will wrap around a float in the same way.

If a float exceeds the height of its containers, it will bleed into the following element. The antidote is:

p.clear { clear: left; }

Use these to style a list, which can be displayed as a flexible grid (more fluid than a table).

Marrying floats and positioning: You can use them both at once, to great effect.

Demo code:

Don’t start by carving up your design into pieces! Start by thinking of your content, and building your structural framework. Start with good, clean, structural markup. THEN start to style it to look the way you want. Get away from the presentation-driven way of development.

Floats are slippery things: We’ve all seen them snap out to the bottom of the page. A trick is to set overflow:hidden, then the extra content will just be clipped, rather than moving the whole div.

Use auto margins left and right to create a semi-liquid layout – center content will resize down to a certain point but no further, or out to a certain point but no further – very cool.

IE7 to be released next week – will fix SO many headaches

Several good hacks listed for dealing with IE’s inline box model problem.

When you have two margins bumping into one another, they will collapse together (by design). One potential fix is to just double the margin on one of the abutting elements. Margin collapsing doesn’t apply to floats.

Highly, highly recommended: Xylescope (“If you’re not already a Mac user, Xylescope is a good reason to become one”).

TextMate and StyleMaster also recommended.

One Reply to “SXSW Notes: CSS Problem Solving”

  1. Pingback: equifax report

Leave a Reply

Your email address will not be published. Required fields are marked *