What they didn’t tell you about CSS

The frustrating thing about learning new Web technologies is the lack of “why didn’t someone tell me this before I began” need-to-know information. Especially with CSS, you’ll get tiny tips, tricks, hacks and everything in between, but for fear of lynching in the Web community, the last thing you’ll get is the bad with the good. I’ve been using CSS professionally now for a few years, and although I enjoy using it, there are definitely some points of contention worth noting. If you’re new to CSS, read through the list carefully, and remember to do your homework. (FYI - any statement of “this can’t be done” is a reference to purity - i.e. - it can’t be done without a hack.)

Vertical Alignment

There is no concept of vertical alignment in CSS. Oh, there is a vertical-align property in CSS, but it isn’t for what you might think it’s for — you know, vertically aligning the way grandma taught you. If you’re used to the valign attribute in table data cells, you’re out of luck. Two DIV elements, floating next to each other, will float to the top, and only to the top, you know, like it’s flooooooating.

Centering Floats

It doesn’t take long to figure out you can only float elements left or right. How suspiciously convenient - most top-level navigation on CSS sites is either left or right justified. Hey, just like this blog! Unless you know the width of your navigation (and if it’s dynamic, you won’t), forget about centering several block level elements that sit next to each other.

Clearing Floats

Clearing floats is like clearing out the penguin pen at the zoo on a 120 degree day. Don’t waste your time researching all the different methods to clear a float (without adding extra space). There is only one method that works well, and it’s:

XHTML:

<div style="clear: both;"><!-- --></div>

Other than that, you’re stuck with the old standby:

XHTML:

<br style="clear: both;" />

Understanding and implementing the float and clear properties is the most difficult concept to digest with CSS and it’s inconsiderably inconsistent.

Site Degradation

I still can’t figure out why anyone would want their site to “degrade gracefully”. Although I understand the Utopian idea of access for all, building primarily with that mindset can be prohibiting to your primary pool of users. Also, using CSS in order to achieve this effect only works in limited circumstances. The more complicated the build, the more unlikely it becomes your site will degrade any more gracefully than if you had used tables.

Pixel Precision

You know that unit of measurement, you know the one I’m talking about; everyone is using it these days. I believe it’s called the pixel, and it’s wonderfully precise. Don’t let anyone tell you that if you’re developing a site with CSS, pixel precision gets the boot. This is not freedom from constraints, but laziness. In most cases, if it can be done, it can be done with CSS, and to pixel precision.

CSS = Accessibility

I can’t believe how many developers/designers spin the tale that if you use CSS, your site will be more accessible. This is an incredibly naive statement that continues to rear its ugly head. In the W3C Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0, Priority 1 checkpoints, there isn’t a single reference to CSS. The aural media type and associated properties, which were developed specifically for the visually impaired by CSS aren’t even supported by a single mainstream browser.

Hacks

You’d think with all the attention hacks get, with numerous books, articles and blogs written on the subject, that it must be okay to use them. From day one, I’ve shied away from this approach, and I’m glad that I did. Learn the structure and syntax for writing pure CSS and stick to it, regardless of how frustrating it might seem. You’ll find that in the future as browsers are updated, the stability of your code will be maintained. Don’t be fooled by the “well, just hack it” mentality.

• Posted by Brian
• August 11th, 2006