Categories: Tutorials

How to target a specific browser using CSS only

Link Naar Tutorial Browser Targeting With Only Css

If you’re a webdesigner, you’ve been there: your terrifically-designed website works fine on the latest versions of modern browsers. But your target audience doesn’t have a 24″ screen, and uses Internet Explorer 7. Or for some reason your layout is all screwed up on an iPad.

It’s every webdesigner’s nightmare: dealing with all the different browsers and their different versions interpreting your code differently. It goes without saying that we’re talking mainly about Internet Explorer, but I’ve come across differences in every browser. Luckily, there’s a ton of information out there on the Internet. Problem is, the specific information is not always easy to find. Or you’ve found it once, and you can’t find it again. So to save myself, and hopefully you, time, I’ve started a collection of browser targeting methods: Different ways to target a specfic browser (version). I.e. creating some code that is only used by a specific browser or browser version. For CSS, or otherwise (like conditional comments will allow you to use for example javascript only for IE).

By no means have I collected these tricks all by myself. I’ve used many sources over the years, and the large part of this list comes from Paul Irish and Cats that Code

The best way, is to always start with a CSS reset. What this does, is reset all items, so each browser sets out at the same starting point and then interprets your code. I always use Eric Meyer’s famous version:

CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126 License: none (public domain)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, 
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 
output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;}
table {
 border-collapse: collapse;
 border-spacing: 0;}

Targeting specific browsers or browser versions

Selector hacks

/* IE6 and below */* html #one { color: red }
/* IE7 */*:first-child+html #two { color: red } 
/* IE7, FF, Safari, Opera  */html>body #three { color: red }
/* IE8, FF, Safari, Opera (Everything but IE 6,7) */html>/**/body #four { color: red }

/* Opera 9.27 and below, Safari 2 */html:first-child #five { color: red }

/* Safari only */ 
html:lang(en)>body  .classname {} 
/* Safari 2-3 */html[xmlns*=""] body:last-child #six { color: red }
/* Safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #seven { color: red }
/* Safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #eight {  color: red }

/* Chrome only */body:nth-of-type(1) p{ color: #333333; }
/* Safari3+, chrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) {
 #nine  { color: red  }
/* iPhone 3G-/ mobile webkit */@media screen and (max-device-width: 480px) {
 #ten { color: red  }
/* iPhone 4+ */@media screen and (-webkit-min-device-pixel-ratio: 2) {
 #eleven { color: red  }

/* iPhone all */@media only screen and (max-device-width: 480px) , 
       only screen and (-webkit-min-device-pixel-ratio: 2) {
 #twelve { color: red  }

/* iPad generic layout */@media only screen and (device-width: 768px) {
 #thirteen{ color: red  }

/* iPad portrait layout */@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
 #fourteen { color: red  }

/* iPad landscape layout */@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
 #fifteen { color: red  }

/* Opera only */@media all and (min-width: 0px){
    .classname { color: red }
/* Safari 2 - 3.1 */html[xmlns*=""]:root #sixteen  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*=""] #seventeen { color: red  }
/* Everything but IE6-8 */:root *> #eighteen { color: red  }
/* IE7 */*+html #nineteen {  color: red }
/* Firefox only. 1+ */#twenty,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */#twentyone,  x:-moz-any-link, x:default  { color: red  }
/* Firefox 3.5+ */body:not(:-moz-handler-blocked) #twentytwo { color: red; }

Targeting IE 6,7,8 and 9 separately in WordPress

// Add this code to the header just after the DOCTYPE declaration (as used in the TwentyEleven theme):
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?>>
<!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!-->
<html <?php language_attributes(); ?>>
All you now need to do is add IE specific code to your style.css file, 
and add #ie7 before every entry to target IE7, etc.
#ie6 #twentythree { color: red }
#ie7 #twentyfour { color: red }
#ie8 #twentyfive { color: red }
#ie9 #twentysix { color: red }

Attribute hacks

.class {
  width:200px; /* All browsers */  *width:250px; /* IE */  _width:300px; /* IE6 */  .width:200px; /* IE7 */}

/* IE6 */#twentyseven { _color: blue }
/* IE6, IE7 */#twentyeight { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */#twentynine { color/**/: blue }
/* IE6, IE7, IE8 */#thirty { color: blue\9; }
/* IE7, IE8 */#thirtyone { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an  */#thirtytwo { color: blue !ie; } /* string after ! can be anything */ 
/* IE8, IE9 */#thirtythree  {color: blue\0/;} /* must go at the END of all rules */

Conditional comments

Ofcourse you can also add conditional comments. In my opinion, though, it is better to add all of the CSS to one CSS file, as this keeps the number of HTML requests to a minimum. In some cases, though, you may want or need to use this (taken from the Quirksmode website ). More information can also be found here on MSDN.
You can use it to both target specific versions of IE, and everything BUT IE:

<!--[if IE]>
 According to the conditional comment this is IE<br />
 <link href="ie.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
 According to the conditional comment this is IE 6<br />
<!--[if IE 7]>
 According to the conditional comment this is IE 7<br />
<!--[if IE 8]>
 According to the conditional comment this is IE 8<br />
<!--[if IE 9]>
 According to the conditional comment this is IE 9<br />
<!--[if gte IE 8]>
 According to the conditional comment this is IE 8 or higher<br />
<!--[if lt IE 9]>
 According to the conditional comment this is IE lower than 9<br />
<!--[if lte IE 7]>
 According to the conditional comment this is IE lower than or equal to 7<br />
<!--[if gt IE 6]>
 According to the conditional comment this is IE greater than 6<br />
<!--[if !IE]> -->
 According to the conditional comment this is not IE<br />
<!-- <![endif]-->

When CSS is not enough

In some cases, you won’t make it with CSS only. Chrome for example, can be difficult to target without also targeting Safari.

Targeting Chrome with Javascript

<!-- Add this script to your header -->
<script type="text/javascript">
 var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
 document.write('<link rel="stylesheet" href="/css/chrome.css" type="text/css" />');

Using PHP: Add body class for each browser/os type

A useful PHP code snippet which adds a different class to the body tag allows for a lot of freedom:
Add the following code to the functions.php file of your theme:

function browser_body_class($classes) {
 global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
 if($is_lynx) $classes[] = 'lynx';
 elseif($is_gecko) $classes[] = 'gecko';
 elseif($is_opera) $classes[] = 'opera';
 elseif($is_NS4) $classes[] = 'ns4';
 elseif($is_safari) $classes[] = 'safari';
 elseif($is_chrome) $classes[] = 'chrome';
 elseif($is_IE) $classes[] = 'ie';
 else $classes[] = 'unknown';
 if($is_iphone) $classes[] = 'iphone';
 return $classes;

“Browser Detect” PHP Class

In case you need to detect several browsers, and you’re working with PHP, the Browser Detect class is a very useful tool for detecting more than 20 different browsers.
Download the package

JQuery browser detection

You can also use jQuery to detect the most common browsers (Safari, Firefox, Chrome, IE and Opera): by using the browserdetect.js Jquery plugin.
The plugin will add a css class to your body tag, depending on the browser used by the visitor. For example, using FireFox 3 will result in the following body tag:

<body class="browserFirefox3">

Download the plugin

I will add to this collection whenever I find new ways. If you have any to add, or a question, please leave your comment!

This post was last modified on 26/06/2018 11:02

Boris Hoekmeijer:

View Comments (6)

  • I really appreciate this post. I¡¦ve been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again

  • I don't normally comment but I gotta state regards
    for the post on this amazing one :D.

  • Very informative post. Your current Website style is awesome as well!

Related Post