Browser Specific CSS Wordpress Plugin

One of the most frustrating part of developing websites is targeting specific browsers. Workarounds for different browsers are clumsy, and complicated. When you are fighting to get Internet Explorer to behave like a normal browser you need to have a quick and easy way to write specific CSS that only Explorer will see. When I discovered a javascript by Rafael Lima that allows you to target specific browsers and operating systems straight from your stylesheet I found the answer to my prayers. I plan on using this method on all the sites I develop from now on, so I decided to write a Wordpress plugin that makes it even easier to use browser specific CSS on my sites.

Click here to download Browser Specific CSS from the Wordpress plugin directory.

The name of the plugin is “Browser Specific CSS” and it is available from the Wordpress plugin directory. The plugin adds javascript to the head of your page that allows you to use browser specific CSS selectors in your stylesheets. For example, targeting IE8 is as easy as adding styles with the “.ie8″ selector. All major browsers are supported. You can also target specific operating systems if necessary. Here is a cheat sheet showing all the css selectors available to you after you install this plugin:

Browser	CSS Selector
Internet Explorer (all versions)	.ie
Internet Explorer 8.x	.ie8
Internet Explorer 7.x	.ie7
Internet Explorer 6.x	.ie6
Internet Explorer 5.x	.ie5
Firefox (all versions)	.gecko
Firefox 2	.ff2
Firefox 3	.ff3
Firefox 3.5	.ff3_5
Camino	.gecko
Opera (all versions)	.opera
Opera 8.x	.opera8
Opera 9.x	.opera9
Opera 10.x	.opera10
Konqueror	.konqueror
Safari	.webkit
Safari 3.x	.sarari3
Webkit (Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome)	.webkit
Chrome	.chrome
SRWare Iron	.iron

 

Operating System	CSS Selector
Windows	.win
Mac	.mac
Linux	.linux
iPhone	.iphone
iPod Touch	.ipod
WebTV	.webtv
Mobile J2ME Devices (Opera mini)	.mobile
FreeBSD	.freebsd

 

Extras	CSS Selector
Javascript Enabled	.js

 

Example:

The box above will change color depending on your browser according to the following colors: