Now we all know that making browser-specific css rules is a bad practice. But sometimes it can save a lot of nerves and code. It’s why we all love those CSS Filters tables. They give us some basic information on what works and what doesn’t in which browser. But we still have to determine just which rules to combine for a specific browser.

So I created a little demo case where I apply a certain css rule only to one browser at a time. Or to the viewer… it tells you what browser you are using - css only. It’s valid CSS 3 (with 2 warnings) and the code is documented so you can see what I did.

CSS browser detection - see for yourself

Please notify me of anything not showing correctly or if you think I should add a certain browser to the table.

There are numerous hacks on how to isolate some css rules from various browsers. But most of those ie6 hacks fail on ie7. Microsoft did obviously make some fixes here.

Many developers warn us not to use css hacks, instead we should use conditional comments. For me, these are really not the best option, for:

1. Version comparisons fail with multiple explorers installed (or at least they do for me)
2. I don’t like the idea of having extra html just because IE is a “special” browser. extra css.. ok. It’s the css that doesn’t work correctly in explorer, not html.

So I’ve been struggling to find a css hack, that would validate. There are quite a few out there, but most of them don’t work very well. So I’ve stumbled upon this website.

And this is the hack I liked:

*:first-child+html {}

This will only target html tag in IE7 (confirmed not to work in FF2, safari 2, opera 7 & 8 & 9, IE6). What it does is it targets every html tag, which is preceeded by some other tag, that is the first child of any third tag. We all know (or atleast we should) html is the topmost tag of our page and it has no preceeding element. Luckily, explorer doesn’t know that. And by adding some fancy selectors, we confuse IE6 and lower, so they won’t apply any rules.

Needless to say, we can address any element, not just the html element by knowing some css. For example:

*:first-child+html div { background:red; }

will make all divs in IE7 have a red background.

Word of cation though - if you want to apply rules to IE7 and IE6, you can not just put hacks for both in the same line. For example:

*:first-child+html, * html { /* rules... */ }

won’t work in IE6, while

*:first-child+html { /* rules... */ }
* html { /* same rules again... */ }

will.

So we all know internet explorer has a few rendering ssues. A big issue for many developers is the inability to show alpha opacity in png images. Of course, this has been fixed in IE7, but not everyone has switched yet.

So here’s a little css hack that allows IE6 and IE5.5 to show PNG’s alpha transparency. See the source for the details. We declare the background twice. Once for IE (with filter property, which is IE only) and once for all other browser, where hacks are not necessary. IE6 does not recognize the > css selector, so it doesn’t get confused by the background property. Sadly, the css won’t validate due to the filter property.

update: If anyone is interested in reading some more on this topic, A List Apart has an article dealing with the problem. It gives a more detailed overview on png and its problems and shows how to use javascript to determine which browser is used and fix the png images accordingly. The article is a bit old, so keep Internet Explorer 7 in mind when applying these hacks.