Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

CSS: The Good, the Bad, the Ugly

March 15, 2004

I took pretty aggressive notes during the panel that came after mine. Enjoy!

(You can tell I was paying more attention to the two people who were talking about things I hadn’t heard much about before; less notes from their portions. Both were very good.)

Tantek Çelik
  • Good CSS: standards
  • Bad CSS: abuses, misuses, amazing screwups (tables poorly mixed with css)
  • Ugly CSS: necessary: hacks, workarounds, wishes they never existed

  • CSS2.1 is now a W3C Candidate Recommendation: this is big news. CSS2? forget it. 2.1 incorporates changes, errata, adds the colour orange.
  • CSS2.1 reflects reality of current implementations
  • CSS validator updates, updates for validating against CSS3
  • coming up: dozen CSS3 modules, and as they get published, pieces are being implemented

  • Tantek: I’m best known for opening Pandora’s box for CSS hacks (thanks to the Box Model Hack).
  • It was necessary, had no idea it would propogate as far as it did.
  • Philosophy: avoid hacks if at all possible. Problem is that it builds a mystical voodoo magic around code. Good for movies, not good for work/tech. (DS: Good point.)
  • Given that, if you can’t avoid them, the fewer you can use the better. (gave examples)
  • Further hacks are from content, the better. Hacks in CSS, they come and go — in markup, they’re there forever. (ie. they belong in the CSS, not the markup, if you have to use them)
  • Idea: Build content clean, build CSS clean, import separate hack stylesheet (isolate problems today, remove them tomorrow when they’re not needed)
  • Should have known better, but despite it all, introduced new hacks between last year’s SXSW and this year - IE5Win. SprintPCS used it 40 days after introduction. Incredible. (DS: band pass, I think?)

Eric Meyer
  • Here to point out errors that people fall victim to, but to help (not to make you feel bad!)
  • (explained favelets that he’d later use, ran through a couple — turning on borders for tables, inline style, un-ALTed images, and font tags among others, to visually demonstrate bad markup) (DS: clever idea.)

  • Showed LockerGnome redesign. Highlighted tables, missing alt text overuse of classes. Ouch
  • Showed new working draft, ran bookmarklets, much better job.

  • Showed WWW Conference. Not created by W3C, created by committee. been doing it for a decade.
  • Turned on tables — plenty of them.
  • Turned on alt highlighting — not many ALT attributes
  • BAD alt text on some elements
  • Some font elements.
  • bold element, inside font element, inside inline style element. Yikes.
  • doesn’t come close to validating
  • didn’t bring it up to laugh at them, “ha ha, what a bunch of jerks”
  • showed difference between old one and new quick revision ny himself — page weight dropped 60%
  • (had to admit: bashing low-hanging fruit)

  • debunked a few arguments — code is not religion. most important thing is that it’s about the content. Doing it this way allows good accessibility to more devices.
Douglas Bowman
  • Image replacement - in the beginning, it was good. We all believed it was good. (listed benefits)
  • Shows original FIR example, explains origins of FIR (Fahrner)
  • View source, simple h2 element and span
  • Why not use images? Listed reasons
  • Downfall: inaccessible to certain screen readers. Can’t count on display: none;
  • Alternatives: Phark, Gilder/Levin (touched on CSS on, images off, showed example)
  • Experimental techniques good, push web dev forward. Keeps W3C on its toes, feedback loop for screenreader manufacturers, want it to work.

  • CSS3 has a good new method. Generated content.
  • New ‘reader’ media type (thanks Joe)
  • Avoid use of original FIR — officially deprecated as of today
  • Keep in mind appropriateness

  • Inspiration, or RipOffation? Discussing ease of CSS ripoffs, viewing source
  • + it’s how we learn
  • + view source, shows you how to build for the web, want it to continue
  • - Design theft becoming increasing problem
  • - all design in one file, you grab that, you’re set.
  • Showed examples

  • Ran out of time; didn’t get to discuss dual hover method. Look for it on
Brian Alvey
  • publishing system (SiliconAlley maybe?) in 1997 — used WYSIWYG control, basically using Word on a web page, nice.
  • source produced is kind of crappy
  • IE had control all along
  • Mozilla just caught up, now adds its own tool.
  • if you’re in IE-based one, it adds garbage markup
  • when page is sent to a server, it’s easy to strip out and convert something
  • Mozilla’s handling is a nightmare. Span span span.
  • Who’s building a CMS on these tools that spits out valid markup? Not many. A few. They’re going to heaven.
  • listing different types of controls (Java-based best, but worse to load), Flash doesn’t count (not truly WYSIWYG)
  • easier to use other people’s - if you know enough you can customize them
Kimberly Blessing
  • Met Tantek through W3C group, who wondered what the hell is AOL doing here?
  • many web developers in AOL, representing what we all do with CSS
  • target latest and greatest, but have to worry about user with Mac OS 9 on a version of AOL they no longer support.
  • to support that wide list, you need to use hacks
  • interested in moving forward
  • examples: different types of search results are displayed with different styles (cited Zen Garden, whoo-hoo)
  • walked through marking up a featured piece of content (simple: an h3, an img, a few p’s, and some ul + li combos)
  • showed a grid, placement of blocks of content
  • not sure I understand it, but it looks very cool, and totally database-driven
  • showed different layouts given the CMS, all CSS-driven
  • flexible design given different types of content/features

Reader Comments

March 18, 01h

Nice notes, Dave. I’ll hopefully post mine from that panel soon, as well. All in all, I thought the panel was pretty good, though Brian Alvey and Kimberly Blessing sorta lost me in what they were talking about. Anyway, in response to the questions about FIR …

Yes, the original FIR has problems but most of the other versions have problems, too. The text-indent and height/padding fixes both have the problem that when images are turned off with CSS on (a more common occurrence than one might think), there is no text to be seen. The best method I’ve seen is to layer the background image over top of the replaced text, but as I think Doug pointed out, that doesn’t work if your image is transparent (the text underneath will show through). If you don’t need transparent images, then it works great and is fully accessible.

Of course, that method also requires an additional non-semantic empty span within the header just as the original FIR required an unnecessary span inside the header. You have to pick your battles. :)

Jim says:
March 18, 01h

“Problem is that it builds a mystical voodoo magic around code. Good for movies, not good for work/tech”

Very true. I’ve encountered designers who act as if code hacks are the new kung fu - they don’t even WANT to avoid them. Tis strange. Just like tables, eventually we all have to learn to let go :)

Incidentally, do you use the webdev toolbar extension for mozilla? I find it extremely useful.

March 18, 02h

“Avoid use of original FIR — officially deprecated as of today”

So what’s the new “official” technique that we should be using?

March 18, 02h

Well, I guess Dave already answered my question before I posted it. I guess that’s what I get for not refreshing before posting a comment. ;-)

I guess I’ll just rephrase my question:

Dave, do you have a preferred technique?

March 18, 12h

Wow, great notes. One quick question – Doug Bowman stated in his talk that original FIR is now deprecated as of today. What’s the new method of image replacement?

Dave S. says:
March 18, 12h

Good point. There isn’t really one single one, there are just better choices now. The original FIR is too screen-reader unfriendly, the new ones are better. Note the alternatives cited earlier in the notes; that’s what we’re talking about. See the big list as well:

March 18, 12h

Hey Dave.

Great meeting you this past weekend. Congrats on the awards.

Are you certain that Doug said FIR was officially depricated? I had posted this to the WSG list and someone questioned whether it was “official” or not, etc.

I had to skip out of this panel right after Alvey spoke to catch a 1:30 flight home. Did Alvey bring up CMS WYSIWYG’s anymore? Thanks for the summary.

Moose says:
March 18, 12h

I’ll tersely add that I lament the fact that generated content is consistently ignored.

One day this will change, though.


Mike says:
March 18, 12h

“Original FIR is deprecated” … I love it!

I still get excited when I’m mucking around in the source of someone’s website and see my text-indent method being used :) Thanks for mentioning it, and thanks to Doug and other designers who keep pitching it to audiences, you guys make me look good.

Next year when I make the trip down to Austin, I’ll have to buy you a beer — or a keg… remember I’m a college student!

March 19, 11h

Thanks for the notes, Dave. It all adds up to a terrific summary of the state of CSS and standards-compliant design. I particularly grokked the notes from Brian Alvey’s presentation on browser-based WYSIWYG editing. “Who’s building a CMS on these tools that spits out valid markup? Not many. A few. They’re going to heaven.”

It ain’t easy. But after many, many hours of banging my head against IE’s and Mozilla’s implementation, it seems that I just may yet make it into heaven (as long as all those parking tickets don’t get in the way). The Big Medium CMS now offers WYSIWYG editing that generates standards-compliant markup – XHTML or HTML, strict or transitional, your choice. For more info:

(By the way, congrats on the well-deserved awards for the Zen Garden!)

jixor says:
March 20, 04h

Lol I just used “The good, the bad and the ugly” for a site’s tagline, now I read it here, heh. It has a nice ring to it doesn’t it.