How to target a specific browser using CSS only
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(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
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 !important */
#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" /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is IE 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is IE 7<br /> <![endif]--> <!--[if IE 8]> According to the conditional comment this is IE 8<br /> <![endif]--> <!--[if IE 9]> According to the conditional comment this is IE 9<br /> <![endif]--> <!--[if gte IE 8]> According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!--[if lt IE 9]> According to the conditional comment this is IE lower than 9<br /> <![endif]--> <!--[if lte IE 7]> According to the conditional comment this is IE lower than or equal to 7<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is IE greater than 6<br /> <![endif]--> <!--[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;
if(is_chrome){
document.write('<link rel="stylesheet" href="/css/chrome.css" type="text/css" />');
}
</script>
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:
<?php
add_filter('body_class','browser_body_class');
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">
I will add to this collection whenever I find new ways. If you have any to add, or a question, please leave your comment!
I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
Cheers!
GREAT! GREAT! GREAT! GREAT! GREAT! GREAT!
I have no words to describe the value of this post. just amazing.
god blase you
You’re welcomne Saurabh, I’m glad it’s helped you!
Excellent blog post. I certainly appreciate this website.
Thanks!
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
Simply amazing. Thank you very much.
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!
GREAT! thanks!