The Browser Specific CSS plugin adds a browser or device specific class to your body tag, depending on what browser/device is viewing the page. Which can be used to add styling for that particular browser or device.
If the browser specific css plugin isn’t installed or activated, your body tag would look like this.
<body class="home blog logged-in admin-bar custom responsive pagelines posts full_width ">
With the Browser Specific CSS plugin enabled, if you were to view your website on a desktop PC/Mac and in Google Chrome, the body tag will contain a .desktop
and .chrome
class.
<body class="home blog logged-in admin-bar custom responsive pagelines posts full_width desktop chrome">
Below is a list of all available classes for you to choose for both browsers and devices.
.android
.blackberry
.chrome
.desktop
.firefox
.ie
.ios
.ipad
.iphone
.ipod
.lg
.lynx
.mobile
.motorola
.nintendo
.nokia
.opera-mobile
.opera-mini
.opera
.palm
.safari
.samsung
.samsung-galaxy-tab
.sony-ericsson
.symbian
.tablet
.windows-mobile
If Internet explorer is detected the version will also be added like .ie7
.
Ideally you shouldn’t need specific CSS for certain browsers or devices. However, as long as Internet Explorer 7 and 8 browsers continue to hold significant market share, you will, in some cases need to use CSS rules to assist outdated technology.
Therefore, below are some examples on how to use the Browser Specific CSS.
For this example, let’s imagine that you wish to have a different colored background for visitors who use Google Chrome.
body.chrome {
background-color: black;
}
You’re free to change the .chrome
from the example code, to any specific browser/device class from the list above. Using the above code, allows visitors using the Google Chrome browser to view your site with a black body background color.
You can also add any CSS property you like. For example, background-image
giving visitors a unique background image, font-size
increasing/decreasing the size of text for that specific browser.
There may come a time where you need to make fine adjustments on a section for a specific browser or device, this could be increasing the padding to reducing the size of text.
For this example, let’s say you wish to change the background color of the Masthead section for visitors using Mozilla FireFox.
body.firefox .section-masthead .content {
background-color: red;
}
You’re free to change the .firefox
from the example code, to any specific browser/device class from the list above. The code above is targeting the .content
area of the Masthead section, you can edit this code to apply CSS to a specific area for that section.