those of you who design webpages have probably seen this rant before. still, i needed to rant a bit.
CSS, or cascading style sheets should be used, as their name implies, just for STYLE. and by that, i mean fonts, colors, text size, borders, etc. and yet, the "expert" web design community is pushing hard to use CSS for layouts. now, i agree tables aren't the best solution. although they are simple to understand and use, they are not terribly flexible and can be hard to maintain. you need to use hacks here and there, throw in spacer images, invisible gif's, and so on. so, i certainly understand the motive for developing an alternative to table-based layouts.
but CSS is NOT it. the idea behind CSS was to:
1. separate presentation from content
2. remove the hacks needed to make tables layouts work
3. save you time
4. give you far more powerful presentation options
the css zen garden is a brilliant example of what, in theory, could "easily" be achieved. however, as soon as you go beyond a simplistic, blog-like site, it's hard to put into calm, rational words how badly CSS fails to achieve those goals.
first of all, it's completely unintuitive. many constructs that we were used to - and those that make logical sense - are gone. for example, there's realy no "align=center". instead, in a bizzare decision, you instead mess, at times, with margins, at other times with text-align: center, other times with relative position, and then every now and then, absolute position. some of these work for block elements... some for inline... some not at all.
it's also a horrible pain to figure out the relationship between containers in CSS. with tables, it was very obvious how cells interacted. with CSS, the geniuses behind it figured it was way more obvious to make you use float:left to bounce items randomly around the page. that, or use a ridiculously giant margin and about 30 lines of CSS to get columns positioned properly. how is it people don't realize something is WRONG when you need a full PAGE of CSS to accomplish table tr td td td /tr /table????
of course, all of that would be ok if CSS had proper browser support. now, it's not really the fault of the CSS creators, but it'll make your eyes bleed trying to get your page to look the same in different browsers, not to mention at different versions of the same browser, different resolutions, on different OS's, in different languages, etc... it's impossible. wanna use max-height? sorry, MS decided not to implement it, at all. padding and margin should be simple, right? nope, each browser does it's own thing. and don't every try setting the width to a percentage to have a flexible layout... that's ridiculous and you should be ashamed to have thought of it.
tables, partially as a product of having been around a LONG time, are relatively consistent through out. CSS is anything but. so you end up doing hacks - often to fight with MS's "interpretation" of CSS - using spacer gif's, including tons of javascript.
in the end, with CSS, you end up falling back to fixed size, absolutely positioned layouts laden with every hack and script imagineable. ultimately, your content is again - but now, less predictably - mixed with your presentation, you're using more hacks than before, you've wasted far more time (especially on SIMPLE things like getting 3 columns!), and because the browsers won't cooperate, your design is actually MORE limited than it was with tables.
we need a separate language designed specifically for layouts. let the basic HTML code handle your content. let CSS handle the styling of the content. and let this layout language handle how all the pieces fit together.
bah. i'm done. none of you will read this much text anyway.
CSS, or cascading style sheets should be used, as their name implies, just for STYLE. and by that, i mean fonts, colors, text size, borders, etc. and yet, the "expert" web design community is pushing hard to use CSS for layouts. now, i agree tables aren't the best solution. although they are simple to understand and use, they are not terribly flexible and can be hard to maintain. you need to use hacks here and there, throw in spacer images, invisible gif's, and so on. so, i certainly understand the motive for developing an alternative to table-based layouts.
but CSS is NOT it. the idea behind CSS was to:
1. separate presentation from content
2. remove the hacks needed to make tables layouts work
3. save you time
4. give you far more powerful presentation options
the css zen garden is a brilliant example of what, in theory, could "easily" be achieved. however, as soon as you go beyond a simplistic, blog-like site, it's hard to put into calm, rational words how badly CSS fails to achieve those goals.
first of all, it's completely unintuitive. many constructs that we were used to - and those that make logical sense - are gone. for example, there's realy no "align=center". instead, in a bizzare decision, you instead mess, at times, with margins, at other times with text-align: center, other times with relative position, and then every now and then, absolute position. some of these work for block elements... some for inline... some not at all.
it's also a horrible pain to figure out the relationship between containers in CSS. with tables, it was very obvious how cells interacted. with CSS, the geniuses behind it figured it was way more obvious to make you use float:left to bounce items randomly around the page. that, or use a ridiculously giant margin and about 30 lines of CSS to get columns positioned properly. how is it people don't realize something is WRONG when you need a full PAGE of CSS to accomplish table tr td td td /tr /table????
of course, all of that would be ok if CSS had proper browser support. now, it's not really the fault of the CSS creators, but it'll make your eyes bleed trying to get your page to look the same in different browsers, not to mention at different versions of the same browser, different resolutions, on different OS's, in different languages, etc... it's impossible. wanna use max-height? sorry, MS decided not to implement it, at all. padding and margin should be simple, right? nope, each browser does it's own thing. and don't every try setting the width to a percentage to have a flexible layout... that's ridiculous and you should be ashamed to have thought of it.
tables, partially as a product of having been around a LONG time, are relatively consistent through out. CSS is anything but. so you end up doing hacks - often to fight with MS's "interpretation" of CSS - using spacer gif's, including tons of javascript.
in the end, with CSS, you end up falling back to fixed size, absolutely positioned layouts laden with every hack and script imagineable. ultimately, your content is again - but now, less predictably - mixed with your presentation, you're using more hacks than before, you've wasted far more time (especially on SIMPLE things like getting 3 columns!), and because the browsers won't cooperate, your design is actually MORE limited than it was with tables.
we need a separate language designed specifically for layouts. let the basic HTML code handle your content. let CSS handle the styling of the content. and let this layout language handle how all the pieces fit together.
bah. i'm done. none of you will read this much text anyway.
Facebook
Twitter