CSS is hard
Dave Winer's recent trolling about CSS has caused some controversy.
At MediaRights, we've been slowly introducing CSS layouts on all of our redesigned pages and new projects, and it's been much more of a headache than advertised. Yes, table-based layouts are kludgy, slow to load, and impossible to revisit later, but they do work immediately and totally. Like I said at SxSW, the designers may not be the best evangelists for the cause. There was a laughable moment during their presentation in Austin when Meyer, Tantek & Zeldman were extolling the simplicity of CSS, while the overhead project behind them had hundreds of lines of unreadable code and weird hacks. (#!/>/ ?)
Jeffrey Zeldman likes to frame the debate in terms of "Future compatibility vs. Backwards compatibility" but the real issue is what works right now, especially in the Non-Profit world where money is tight and we have four developers doing the work of 16. A little honesty is in order from both sides of the aisle — clearly XHTML and CSS are the future of web design, but it's not easy to learn, and it's not easy to update old pages to new standards.
At MediaRights, we've been slowly introducing CSS layouts on all of our redesigned pages and new projects, and it's been much more of a headache than advertised. Yes, table-based layouts are kludgy, slow to load, and impossible to revisit later, but they do work immediately and totally. Like I said at SxSW, the designers may not be the best evangelists for the cause. There was a laughable moment during their presentation in Austin when Meyer, Tantek & Zeldman were extolling the simplicity of CSS, while the overhead project behind them had hundreds of lines of unreadable code and weird hacks. (#!/>/ ?)
Jeffrey Zeldman likes to frame the debate in terms of "Future compatibility vs. Backwards compatibility" but the real issue is what works right now, especially in the Non-Profit world where money is tight and we have four developers doing the work of 16. A little honesty is in order from both sides of the aisle — clearly XHTML and CSS are the future of web design, but it's not easy to learn, and it's not easy to update old pages to new standards.
Comments
Ah, the "never have time to do it right, only have time to do it over" attitude. I know it well; I've lived it; I've defended it on occasion. Yes, CSS positioning is hard to learn and harder to master. But in this case, Dave was not frustrated with CSS positioning; he was frustrated with browser differences interpreting his invalid HTML. Details here (be sure to read the associated comment thread):
http://www.bryanbell.com/2003/04/17
Posted by: Mark | April 21, 2003 11:43 AM
There are two separate issues here - CSS formatting vs older HTML tags, and CSS positioning vs tables-based layout.
I use CSS for all formatting, but I still use tables for layout. I've fiddled with the commonly available 3-column CSS layouts, but I don't like them. Everyday I see pages using CSS positioning where the side columns overlap the middle column, obscuring the text and rendering the page unreadable. To my mind, that's a much bigger flaw than the slowness of table layouts.
Posted by: Daze | April 21, 2003 12:11 PM
Ah, the "never have time to do it right, only have time to do it over" attitude."
Thanks for the clarification, Mark. We are doing things "right," for two sites we're launching this summer, but I barely have time to fix the glaring bugs on the main site, much less convince my boss that I need to redesign the whole thing. CSS has a few huge snags and drawbacks, and this isn't advertised. So my argument is not "never have time to do it right, only have time to do it over," but "we have time to do it right, but not time to re-do it right."
Posted by: david | April 21, 2003 12:27 PM
I've found CSS relatively easy to learn and good for anything I want to do. The hacks are ugly, but tables are also ugly for a class of Web users, and inflate page size. (I'm writing this without having read any of the linked-to material, so I admit I'm just mouthing off.)
Posted by: nedlog | April 21, 2003 3:55 PM
What's your Winer number?
Posted by: david | April 21, 2003 4:07 PM
"CSS has a few huge snags and drawbacks, and this isn't advertised. "
Just to chime in, CSS may not be simple, but the spec doesn't have huge snags or drawbacks, the crappy implementations of early browsers like NN4.x and depressingly modern ones like IE 5.x and 6 are the problem. And it is these browser bugs which usually are the source of all those "unreadable code and weird hacks."
CSS would be a snap to use and learn if it wasn't for all of the browser gotchas. And if browser developers spent half as long properly implementing CSS as they did developing rendering engines that overcome invalid markup like mis-nested tags, we wouldn't even have a debate.
On a practical note, take a look at the templates at:
http://www.fu2k.org/alex/css/
particularly:
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml
Posted by: Patrick | April 21, 2003 4:08 PM
The Box Model hack
Posted by: david | April 22, 2003 9:44 AM
Winer responds on scripting.com
Posted by: david | April 22, 2003 10:13 AM
Unsophisticated question: why not just make a fluid layout that floats all the columns alongside each other? This eliminates the need for the box model hack. I've used it here. However, this layout uses only two columns, not three.
I don't know what that battel thing is, but anything that has the Trachtenberg Family Slideshow Players involved gets the Nedlog Seal of Approval, ~unlike CSS-dissin' battle-mispellin' haters.~
Posted by: nedlog | April 22, 2003 10:16 AM
Unsophisticated question: why not just make a fluid layout that floats all the columns alongside each other? This eliminates the need for the box model hack. I've used it here. However, this layout uses only two columns, not three.
We have a lot of layout elements that need fixed width, either because they contain images, or tables of images, or because we want the object to fit snugly around a fixed area of text. Our new festival layout (available in June) has an embedded movie player on the left, and then a series of overlapping Ilayers in divs that depend on a lot of javascript to have the right content at the right time.
Posted by: david | April 22, 2003 10:23 AM
Also, we have a 2x2 box, not two columns, so float becomes a little more unwieldy.
Posted by: david | April 22, 2003 10:51 AM
Yes, I see.
Posted by: nedlog | April 22, 2003 11:15 AM