If you’re accustomed to make websites by following the W3C guidelines, you’ll be suprised what you can’t do in IE when you have to work on a site that runs in IE’s Quirks Mode (at least I was).
As most of you probably know IE can render websites in either Quirks Mode or Standards Compliant Mode. Standards Mode is the mode that is most compatible with other browsers like Firefox, while Quirks Mode exists for backwards compatibility purposes. IE automatically chooses one of these modes by looking at the first line of the HTML code. Check out Quirksmode.org and Wikipedia if you want to know more about both modes and how to trigger them. But in case you want the short summary: if you don’t start your document with a DTD like the example below, IE will render the website in Quirks Mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I only build websites in Standards Mode, so Quirks Mode is an almost non-existent issue for me. This week, however, I had to restyle an old website. And while rewriting the CSS I remembered that the difference between the two modes goes farther than just a difference in box model. Simple things you’ve learned to rely on in Standards Mode are gone in Quirks Mode.
No * html
If I want a class to specifically target IE6 or IE7 I always prepend selectors with * html (IE6) or *:first-child+html (IE7) in case the rendering is a bit off with other browsers. But that simply doesn’t work in Quirks Mode. On Wikipedia there’s a list of browser bugs you can exploit in CSS. I chose to exploit the ”!important quirk“ since future browsers will just ignore the invalid CSS code that only runs in IE6 and IE7.
To use the ”!important quirk“ you misuse the !important keyword. Normally that keyword is used like this:
.classname {
width: 100px !important;
}
The !important keyword ensures that the width of 100px cannot be overruled by other styles unless you use another !important. In IE6 and IE7 any keyword that starts with a ! works like a !important, so you can write something like this:
.classname {
width: 100px; /* works in all 'normal' browsers' */
width: 150px !lteIE7; /* for IE 7 and lower */
}
No fancy selectors
What surprised me much more is that some advanced selectors like the attribute selectors are not possible in IE7 when running in Quirks Mode. So the CSS code below will only work in Standards Mode:
table[width='160'] { /* this selector will not run in IE7 Quirks Mode */
width: 100px;
}
The same holds true for selectors like :first-child, the Adjacent Sibling (+) Combinator and the Child (>) Combinator. Bummer.
Why not use conditional comments?
If you want to have some classes that are specifically targeted towards IE6 and IE7, Conditional Comments are the easiest and safest thing.
<!--[if lt IE 6]>
<link href='/css/IE6.css' rel='stylesheet' type='text/css' media='all' />
<![endif]-->
But I prefer CSS filters above conditional comments. By using CSS filters I have all the styling of an element in one page and not scattered around in different CSS files. In most cases I only use conditional comments to hide CSS code that won’t validate.
More information about conditional comments
Code for the sake of Technorati: 4252WKT38H9D
