CSS Browser Selectors

July 20th, 2006

Signal vs. Noise pointed to a really nice and elegant way of deliverying CSS styles to specific browsers. At the moment, you will probably be delivering styles to Internet Explorer using the * html hack:

* html .box { padding: 5px; }

The * html CSS hack is actually fixed in Internet Explorer 7 so doesn’t work anymore. Besides, CSS hacks and using bugs in the CSS parser in such a way, is considered harmful. The recommended way of sending a CSS style to Internet Explorer is to use conditional comments but these can get real ugly. It breaks the syntax highlighting in most HTML editors and if you’ve got tons of IE-only styles interspersed throughout a document it can get ugly.

You could collect all your IE-only styles into one section so you only have to use one comment, but this can make it harder to find the relevant styles.

Browser Selectors

Browser selectors involve using a small piece of server side or client side scripting to detect the browser and to assign a class to the <html> element indicating the browser.

You could do it with a little PHP:

<?phpif(strstr($_SERVER['HTTP_USER_AGENT'],"MSIE")) { echo '<html class="ie">';} else { // You'd need to do some more detecting, for simplicity sake I'll leave it out. You may also want to include versions.echo '<html class="firefox">';}?>

(You could also use a little Javascript to check for IE (window.all && !window.opera) and set the class name of the html element through the DOM)

You can use CSS which looks something like:

.ie .box { padding: 5px; }.firefox .box { padding: 10px; }

A very nice and very elegant way of doing browser specific styles without hacks. I’m surprised nobody has thought of this before.

Javascript , Web Development
Comments(2)

2 Responses to “CSS Browser Selectors”

# Matton 21 Jul 2006 at 8:42 am

Couldn’t you use conditional comments?
```
 <--if[IE]
```
```
 
```
```
--> 
```
# Khloon 21 Jul 2006 at 9:19 am

Hi,

Yeah - you could. However to get your code to look nice you’ve got to collect all the IE-specific CSS code together in one block. There are also limitations (I’m not sure whether they work in external CSS files).

The above solution could allow you to use one conditional comment or a little bit of browser detection and to be able to keep your CSS code clean and organized.