Conditional CSS (almost)
December 3, 2008
Today I was hacking IE7, working on formatting issues caused by relative positioning in CSS. IE7 likes to ignore the negative X positions (e.g. left: -87). While Googling around I stumbled across an elegant hack from Rafael Lima that let’s me specify different CSS depending on the browser.
Add their one line of JavaScript to your global JavaScript file, then use a class selector to specify different CSS options based on the browser. Here’s an example in CSS that will change the color of a rectangle based on the browser you’re using. Brilliant!
-
-
.ie .example {
-
background-color: yellow
-
}
-
.ie7 .example {
-
background-color: orange
-
}
-
.gecko .example {
-
background-color: gray
-
}
-
.win.gecko .example {
-
background-color: red
-
}
-
.linux.gecko .example {
-
background-color: pink
-
}
-
.opera .example {
-
background-color: green
-
}
-
.konqueror .example {
-
background-color: blue
-
}
-
.webkit .example {
-
background-color: black
-
}
-
.example {
-
width: 100px;
-
height: 100px;
-
}
-
.no_js { display: block }
-
.has_js { display: none }
-
.js .no_js { display: none }
-
.js .has_js { display: block }
-
Leave a Reply