Browser Specific Styles Epiphany
I’m assuming I’m a little behind on this one, since I discovered it in the source of the new HTML5 initializer. Either way, it’s beautifully simple. I’ve always hated using separate stylesheets for browsers, and hacks are ugly and mysterious.
By using a bit of conditional comments on the html tag’s class, you can create separate classes for each browser.
<!—[if lt IE 7 ]> <html lang=”en” class=”no-js ie6”> <![endif]—>
<!—[if IE 7 ]> <html lang=”en” class=”no-js ie7”> <![endif]—>
<!—[if IE 8 ]> <html lang=”en” class=”no-js ie8”> <![endif]—>
<!—[if IE 9 ]> <html lang=”en” class=”no-js ie9”> <![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—> <html lang=”en” class=”no-js”> <!—<![endif]—>
This takes your CSS from 5 separate stylesheets, back to 1. All the benefits of inline hacks, without the hack.
ul.menu li {
display: inline-block;
}
.ie6 ul.menu li {
display: block;
float: left;
}
Wonderful.
