Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:
Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
...include IE6-specific stylesheet here...
<![endif]-->
Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
