Browser Specific CSS

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.

Usage

Without Plugin

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 Plugin

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">

Full List of Browser/Device Classes

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.

Examples

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.

Background Color

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-sizeincreasing/decreasing the size of text for that specific browser.

Targeting a Section

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.