Real world talk about web design, programming and the business of web design.
As some of you may know, I have been against using CSS hacks for a long while.
Now that IE7 is coming out very soon and we know that many CSS hacks will break in IE7, we need to come up with another viable solution to make CSS based layouts work in IE6, and the other more capable browsers …
That’s where IE conditional comments come in. This IE specific code/tool is safe and solves all our problems when creating cross browser pure CSS layouts.
Check out the video: IE Conditional Comments
I recently was surfing the web and found myself on a popular web standards zealot website. The featured article referred to 3 column CSS based page layout as being the ‘Holy Grail’! My first reaction to this was: geez, how silly this is!
…
Indeed, a simple thing like a 3 column layout is a challenge - when you don’t use tables. As such, you can find many articles on many web standards zealot websites that attempt to solve this problem. All of them falling short, all of them requiring the use of hacks - hacks that can break and WILL break.
IRRESPONSIBLE ‘EXPERTS’
The article in question, though recent, still advocates/demonstrates the use of a hack to get it to work with the most popular browsers … they don’t learn, do they?
I say this because a few months ago, it was discovered by the web community that many commonly used CSS hacks will break in the new, fully standards compliant IE7 … thus breaking countless web standards zealot website’s. So much for saving time and the myth of forward compatibility.
PEOPLE SHOULDN’T USE HACKS TO MAKE THEIR CSS WORK!
It gets me ‘hot under the collar’ when I see articles that promote the use of CSS hacks - this is bad practice for obvious reasons.
I’ve been warning about this for some time before the IE7 problem. None of these web standards zealots payed me much attention before the IE7 problem came to light; and now after this problem has been well publicized, it seems that these people still have their heads in the sand!
CSS FOR PAGE-LEVEL LAYOUT IS WEAK
Even in a perfect world, where all the browsers supported the standards perfectly, CSS page-level layout capabilities suck for many types of layouts … HTML tables are much easier to use.
That said, there is a CSS tables specification that works like HTML tables, but no browsers support it! There should be a ‘call to action’ to force browser makers to implement CSS tables.
Note:
Tables are grids, and grids are a proven tool for page layout that are used in programming languages (like Java) to create user interfaces. It’s about time that we web-nerds have access to this powerful and flexible system of page layout in CSS. For now, we can use HTML tables.
HTML tables may not be semantically correct, and they may bind your formatting to your page structure, but they will work in all browsers without the need for fragile hacks and they are really easy to use.
CONCLUSION
Web standards were created to make web design easier for web developers by having the browser makers build their browsers according to a standard specification - the web standards.
As soon as you have to work harder, and have to jump through hoops (use hacks) to make your pages work - the point of the web standards is lost. It makes no sense to try and force web standards (in ultra-strict terms,) unless the browsers properly support the web standards - they don’t right now.
NOTE: This article is theoretical - CSS tables are not supported by the browsers yet, and cannot be used. I wrote this article to make a few points and to expose people to lessons learned in software development: that grids are an excellent way to layout user interfaces.
Stefan
-
Grid layout patterns are commonly used in creating software interfaces - in web design we call them ‘tables’.
But today HTML table based layout is generally frowned upon because:
There are other reasons why some web designers will say HTML tables suck:
The last 3 points are myths and should be ignored - I covered that in other articles.
That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined - that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.
It’s a terrible shame
Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.
What the heck are CSS tables?
From the W3C:
‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’
Now in English:
CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:
<div class=”table”>
<div class=”row”>
<div class=”cell”>
<p>Yallow!</p>
</div>
</div>
</div>
This is an official W3C specification, I’m not inventing anything here!
So why invent CSS tables when we have HTML tables?
The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:
CSS tables can’t be used in any browser today, so why mention them?
I have two reasons why I wrote this article:
Stefan Mischook
The Web Standards movement has created a ‘culture of hacks’ to compensate for browser incompatibilities (OK, mostly IE) and this is a bad idea.
Before anyone attempts to tell me that the Web Standards community does not promote the use of hacks, please refer to just about every book written on Web Standards based web design.
Why were hacks promoted?
In a nutshell: those who promoted them are inexperienced … in other words: green. It is simply bad practice to rely on broken aspects of a technology in an attempt to make things work - any programmer worth his salt knows this. And that is exactly what many/most hacks rely on - broken aspects of Internet Explorer.
-
Anecdote: I’ve often had to ’slap-down’ young-pup programmers (just a few years out of school,) when they’ve tried to introduce into the code base, what would be the equivalent of CSS hacks.
-
CSS hacks are a recipe for disaster that I’ve been predicting for a while, a disaster that seems to be happening: it looks as though IE7 will be breaking CSS hacks and thus, the Web Standards myth of forward compatibility.
I’ve used a hack: I’m a god-curse hypocrite:
Yes, I’m guilty of ‘following the pack’ and I’ve used a single CSS hack (child of div hack) but I used it in a minimal way - should the hack fail (and it will in IE7,) my layouts will still work though the pixels will shift a little.
The real problem occurs when you start using many hacks or if your hacks should fail, your website’s usability will be severely compromised.
If you have to use hacks, use them very delicately.
The hack-free cross browser compatible solution:
When you’re critical of something, you should try to present alternatives … and my alternative to using brittle CSS hacks:
Use a IE conditional comments, Microsoft intelligent solution to cross browser coding.
I know, I know … Microsoft coming up with an intelligent solution!?
Stefan Mischook (a.k.a: The Web Design Heretic )
Amidst all the nerd talk, it’s rare that you actually get a concise explanation of the ultimate purpose of the Web Standards … so I’ve decided to state it here for those who may be interested:
The raison d’être for the Web Standards: to simplify the web design work-flow.
Keep that in mind when you are doing your web design work; if you find you’re getting caught up in details that will not have any practical impact on the project’s success … you must learn to think (and work,) outside of the Web Standards box.
I’m not saying to forget the Standards (heaven forbid,) all I’m suggesting is that you remember that your ultimate goal is to build quality websites as quickly as possible.
Case in point: The use of IE conditional comments.
Instead of using questionable CSS hacks to make your web pages work in both IE and Standards compliant browsers (FireFox etc,) it is better to use a the non-standard IE conditional comments.
Why?
IE conditional comments are forward and backward compatible (in Internet Explorer,) and will not break functionality in the other browsers - thus you can safely use them to isolate CSS code for IE.
Conclusion:
IE conditional comments are NOT part of the Web Standards (that’s for sure!) but they offer a better solution than the hodgepodge of widely touted and soon to be breaking CSS hacks.
Yes, we are thinking and working outside of the Web Standards box … but by golly, it works better!
The web heretic. (a.k.a.: Stefan Mischook)
