Browser-specific CSS with ExtJS

At work we use ExtJS (now known as www.sencha.com), a Javascript library for building interfaces. ExtJS does some browser detection during its initialisation and adds classes to the HTML body tag:

Safari:

<body class="ext-webkit ext-safari ext-safari4">

Firefox:

<body class="ext-gecko ext-gecko3">

IE7:

<body class="ext-ie ext-ie7">

and so on.

You can use these in your CSS to cleanly apply browser-specific CSS, e.g.

.ext-ie div.dashboard-menu1 {
     padding-right: 1em; /* prevents italics being clipped in IE */
}

Simple but effective. Even if you’re not using ExtJS, you could easily roll your own version of this technique using whatever browser detection library you use.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: