Microsoft wants WebDesigners to de-hack their CSS

Thursday, Oct. 13 2005 | Author: Griffith

In a recent entry on the IE Blog Microsoft appeals to web designers asking them to remove their CSS fixes for IE, specifically the following and their variants:

html > body - http://css-discuss.incutio.com/?page=ChildHack

* html - http://css-discuss.incutio.com/?page=StarHtmlHack

head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/

head + body - http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html

body > element - http://css-discuss.incutio.com/?page=ChildHack

Sitepoint’s sugestion is basically to use the following code (and respective CSS files):

<!–[if lte IE 7]><link rel=”stylesheet” href=”ie7.css” type=”text/css” /><![endif]–>
<!–[if lte IE 6]><link rel=”stylesheet” href=”ie6.css” type=”text/css” /><![endif]–>
<!–[if lte IE 5.5]><link rel=”stylesheet” href=”ie55.css” type=”text/css” /><![endif]–>

My suggestion is, do what W3C advises you to do. Sooner or later Microsoft will have to start following someone else’s protocols and rules instead of their own. So what W3C says is, make compliant or strict code and use hacks for everything else. I, for sure, won’t be building three or four different styles for one site because of IE only (unless I’m being payed for it, of course, like the SitePoint gurus are).

Category: Uncategorized

7 Responses for "Microsoft wants WebDesigners to de-hack their CSS"

cliche

October 13th, 2005 at 10:37 am
1

“CSS hacks made for IE”

We call them fixes. If they didn’t break it, we wouldn’t be fixing it.
Griffith

October 13th, 2005 at 11:49 am
2

Point made *edits*
Daniel Nicolas

October 13th, 2005 at 12:08 pm
3

Amen. Fixes.
Kevin Yank

October 13th, 2005 at 11:39 pm
4

Look more closely at the code I propose. I’m not suggesting you should rewrite your entire style sheet for each version of Internet Explorer you wish to support.

Each style sheet would contain only the CSS tweaks required to adjust your main style sheet for a specific version of Internet Explorer (or below).

So, if you have your site’s main style sheet in main.css, but Internet Explorer 7 required your navigation bar to be given relative positioning to work around a bug in that browser, then ie7.css might just contain this:

#nav {
position: relative;
}

If, in addition to this, IE 5.5 required a fix for the buggy box model in that browser, say by giving it a smaller width, then ie55.css might just contain this:

#nav {
width: 100px;
}

You see, the bulk of your CSS code remains in main.css, and the individual Internet Explorer version-specific files contain surgical tweaks required by those browser versions.

In effect, this is just like using a CSS hack, except both your CSS and markup code are considered valid (IE conditional comments validate as normal (X)HTML comments). Additionally, all of your browser-specific tweaks reside in separate files, rather than being mixed in with your CSS code using ugly (and non-forwards-compatible) hacks.
Doug Clifton

October 14th, 2005 at 10:33 pm
5

Kevin, a site and the CSS that defines it, is rarely this simple. And when you alter the main design, you have to go back and make sure each of your “cascading” fixes for each of the flavors of IE are also updated. MS, as usual, throws a monkey wrench into every designer and developer’s daily grind. It reminds me of Javascript code where you are forced to check for each of the major browsers, and then check for versions, until your code works across the board. Think of the hours lost, the cost alone of this nightmare that standards are meant to address in the first place. Think of how much farther along the Web would be if it wasn’t for these constant road blocks…
nebjak

January 27th, 2006 at 6:21 pm
6

Ie is “Bull Shit”
finite

March 31st, 2006 at 4:30 am
7

Stuff like this makes me glad that I don’t have to design websites for the general public anymore. Microsoft users? Screw em.

That said, next time I find myself in the unfortunate situation of having to code for IE, I will make use of the IE conditional comments thing. Looks much cleaner than ye olde css hacks.