CSS: The Good, the Bad, the Ugly

March 15, 2004 11AM PST

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 stopdesign.com
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

About This Entry:

You are reading “CSS: The Good, the Bad, the Ugly”, an entry made on 15 March, 2004, filed under “CSS”.

11 replies to this entry. (Comments are now closed.)