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:
We’d love to hear your feedback!