WordPress – Add the browser to the body class for super targeted styles!

Targeting a specific browser is something not often done. Our egos say that we can write code 1 way and it will be super cross-browser compatible — pixel perfect out of the box. Yeah right. You have doubtless run into a situation where you needed to target a particular browser with 1 or 2 styles rules, and I bet it wasn’t just IE 6 either. We’re here to make that easier for you with this plugin.

Adding a few classes to the body class is nothing new, especially in some major platforms like WordPress and Magento. This helps target certain things a bit better and to most often, be more page specific.

Example: WordPress adds “logged-in” to the body class when a user is logged in. This will let you create a specific style, such as:

.logged-in p { /* CSS rules here will only be applied to paragraph tags on pages where a user is logged in */}

This can be super helpful when the visitors browser and operating system are added to the body class. For example:

When a user running Chrome on Windows visits a page with our WordPress extension installed, 2 classes get added to the body, namely “browser-chrome” and “os-windows”

Want to target an unruly background position on an element that aligns in the rest but not in Chrome? Super easy!

.browser-chrome #unruly-element {background-potition: you get it…;}

Just make the browser class the parent selector, and you have a super browser-specific style.

Did we also mention that our plugin is super lightweight? Check it out for yourself:

Get it now here!

We’d love to hear your feedback!

Leave a Reply

Your email address will not be published. Required fields are marked *