Friday, July 21, 2006

Browser-specific CSS the clearest way possible

How would you like to have all your browser-specific adjustments be trivial to apply? What if you could have a <style> block like this?

<style type="text/css">
.ie .example {
  background-color: yellow
}
.gecko .example {
  background-color: gray
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.safari .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
</style>
Now all you need is some JavaScript to apply the correct top-level CSS class to the <html> element. We'll here you go, the CSS Browser Selector from Rafael Lima. Awesome simplicity!

No comments: