CSS: The Good, the Bad, the Ugly
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.)
- 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?)
- 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.
- 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
- 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
- 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