WordPress.org

Ready to get started?Download WordPress

Plugin Directory

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: 3.9.1
Last Updated: 2014-5-17
Downloads: 342

Ratings

0 stars
0 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