WordPress.org

Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Conditional Stylesheets and Body Classes

Add conditional browser stylesheets and body class declarations

How do I add and access browser specirfic stylesheets?

To add extra stylesheets, create a new CSS file and upload it to the root of your active theme or in the directory THEME/library/css/ - you can include a mixture of 3 values:

  • Operating System name ( windows, mac, linux )
  • Browser Name ( firefox, safari, chrome, msie )
  • Browser Version ( a specific whole version number )

The plugin then looks for a matching CSS file in the root of the active theme or in the directory THEME/library/css/ using a combinations of these 3 values ( in these example we'll use IE 10 on windows ):

  • browsers-msie.css
  • browsers-msie-10.css
  • browsers-windows-msie.css

How do I select browser specific classes in my CSS files?

The Browsers plugin adds a collection of extra browser and operating system specific classes to the HTML <body> tag of all front-end pages of the current active theme.

The best way to find out what classes are added is to use a source code inspector like Google Chrome's Inspector to view the <body> tag.

You can then use these new classes to select HTML elements in the following way ( again using IE 10 as an example ):

~~ style.css ~~

body.browsers-msie-10 { background-color: red; }

~~~~~~~~~~~~

Requires: 3.2 or higher
Compatible up to: 4.4.6
Last Updated: 1 year ago
Active Installs: 100+

Ratings

5 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1 100,1,1 100,1,1
100,1,1 100,1,1
100,1,1