Anne van Kesteren

Hacks: CSS or XHTML?

You have done the entire markup, you have done all the style and you site looks great in Firebird (or Mozilla, if your name is Anne :-)). You fire up some out of date browsers, the browsers your audience is using (Internet Explorer) and you notice a few mistakes. Notice you don't notice many mistakes, since Firebird (or Mozilla) is a very standard compliant browser (except for some really annoying bugs).

Let me explain that last sentence. Most people like to develop in Internet Explorer, 'cause that is the browser their audience will use. A valid argument, you might say. Unless you know every little bug, and you don't, you could develop in Internet Explorer and change some things to make it work in other browsers as well. However, most people develop in Internet Explorer, are trying to find a lot of ways (hacks!) to make a div, say, 100% high. After that, they test it in Mozilla, yes, the layout is broken, CSS is doomed, tables are designers' bests friend.

You might think that is nonsense, but I visit quite a lot of forums and each time there is a problem, it is because they used some sort of IE workaround, where a standard compliant rule could do the job. That is why I develop all my pages in Mozilla and trace the bugs afterwards in Internet Explorer. It saves me a lot of time, really!

After reading the browser part (which is probably longer than what I'm going to write now) it is time to talk about hacks. Where would you put them? In CSS or your XML? Personally, I don't think this is a very difficult question. Since XHTML (=markup) is all about giving value to your content, that is obviously not the place for hacking, like adding 20 extra div elements, 'cause it makes it easier to CSS with. Especially when you could have replaced the visual effect you wanted to make with those elements with a single background-image. I know what I would choose. Content of a webpage doesn't change that much (static pages), style however, does! And it is also style that evolves quickly (compare XHTML2 and CSS3) and can't be changed when better browser versions arrive. And you can make that change for all you 1000s of webpages.

After reading the above paragraph, it is easy, CSS hacks/filters is the way you will have to choose. Although I can understand you sometimes need a extra span or even a whole table to get that contact form look correct :-)

Comments

  1. I agree wholeheartedly. An extra span, div or table won't hurt (taken it's properly used), but external style sheets are much more of a playground. This is not in the least because you can often exclude certain browser from even loading an entire style sheet or portion of it (with or without non-logical or even non-valid work-arounds).

    P.S. I'm not implying I'm a fan of CSS hacks, I just consider it the best from two evils.

    Posted by ACJ at

  2. I totally agree with you, Anne. I develop in Opera, but that is almost the same as for Mozilla (Firebird or not). They are both very standard compliant (especially compared to the horrific Internet Explorer), and does the development process much easier than if you do it the other way around (IE first, Opera and Mozilla afterwards).

    After all, it's IE that needs the hacks, so it's pretty obvious that you need to hack your code last and not first. If you have hacked code to begin with, it will be almost impossible to patch it up right to make it validate and work in Opera and Mozilla.

    It would be like building a car with the seats backwards, the tires attatched to the roof, no windshield, and all doors fixed to a certain position — and go from there to try make the car as reasonable and "right" as possible. It's obvious that you need to go the other way around.

    Posted by Asbjørn Ulsberg at

  3. Whenever creating CSS or solving other peoples CSS issues I rarely chose M$ Explorer to test the styles. It's too unreliable at rendering correctly and as for hacks; basically one steers clear of them.

    Typically I would use Mozilla or Opera for CSS testing and run M$ in parallel to observe what it chokes upon. As for the div height 100%; I see that question appear every month.

    I agree CSS alteration is the typically the best method if you really need to use hacks.

    Posted by Robert Wellock at

  4. Same as said above - I develop in Mozilla, then test in Explorer and Opera. I also do testing in IE 5.5, 5.01 and 4.5 if required.

    Posted by dusoft at