Browser Specific CSS Hacks is actually not a good practice but when a designers need to adjust the design some specific browsers, they can do it and it’s absolutely for a good reason. Ideally, we don’t need them. Here, we just want to share and discuss the all possible browser-specific selectors and style attributes to you. With these Browser Specific CSS Hacks, you will be able to fix any design with CSS on IE, Firefox, Safari, Opera. So here we go –
Internet Explorer Browser Specific CSS Hacks
Using extra IE specific stylesheet and load it into your document with a conditional comment. This is the simple and best way to target your CSS rules on IE. This way you can separate your standards consequential CSS rules from IE specific rules.
Just add the below code in your HTML file to the head tags. Remember this code must be enclosed with a comment. See the example below –
|
1 2 3 4 5 6 |
<!--[if IE 6]> <link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"> <![endif]--> |
Firefox Browser Specific CSS Hacks
Firefox is good to render web pages with a better look. But some older version, you will find something link.
Target a rule for Firefox 1.5 and 2
|
1 2 3 |
body:empty #my-id { /* Rules go here */ } |
Simple trick, :empty pseudo-class is used to allow to select those elements that have no child element.
When you need to target all version, you should apply the following trick (the -moz prefix) which is taken by Firefox.
|
1 2 3 4 5 |
@-moz-document url-prefix() { #my-id { font-size: 100%; } } |
Specific CSS for Firefox version 3
Let you have an image with header_right_gif and want to set the Firefox 3 specific CSS. You need to do the following.
|
1 |
<img id="header_right_gif" src="header_right.gif" align="right"> |
CSS
|
1 2 3 4 5 6 7 8 |
@-moz-document url-prefix() { #header_right_gif, x:-moz-any-link, x:default { position: relative; top: -1px; } } |
For ASP.NET
|
1 2 3 4 |
<%if (Request.UserAgent.ToLower().Contains("firefox/3")) { %> <link href="./themes/firefox3.css" rel="stylesheet" media="all" type="text/css" /> <style> *.style{ overflow:hidden; } </style> <% } %> |
Safari Browser Specific CSS Hacks
There is no perfect way to target a specific version of Safari, but there are some inelegant tricks to do this only Safari 1 and 2.
|
1 2 3 |
#my-id { color:red; } |
This code can be set the color to red in all browsers.
|
1 2 3 |
#my-id { color:black;# } |
This code can be set the color to black in every browser except Safari 1 and 2. Because the version 1 and 2 had a bug for this hash mark. When you put the hash mark after the semicolon, it caused Safari to block this. These two versions of Safari is to make a barrier in every rule after the hash mark. So when you need to browser-specific CSS hacks on safari, just put is to bottom of your stylesheet.
If you need to target any Safari version in general just use the vendor prefix code trick. This is similar of Firefox tricks. See the below example –
|
1 2 3 4 5 |
@media screen and (-webkit-min-device-pixel-ratio:0) { #my-id { height: 100%; } } |
This trick also is applied on Opera 9+ version.
Opera Browser Specific CSS Hacks
Opera does not require CSS hacks. This is the most standard compliant browser. Suddenly if you see something wonky, just remember this is not the fault of opera, it seems you have some error on your code. But no worries, you can still target Opera by using the following code –
|
1 2 3 4 5 |
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #my-id { clear:right; } } |
CSS Reset for Browser Specific CSS Hacks
This is the best way to start your coding with resetting CSS properties, so that browser can start to interpret your code in the same starting point. The below reset code is made by Eric Meyer and this is a famous reset version.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
/* 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; } |
Browser Specific CSS Hacks For WordPress – Targeting IE 6,7,8 and 9
Add this code to the header just after the DOCTYPE declaration.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--[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]--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#ie6 #twentythree { color: red } #ie7 #twentyfour { color: red } #ie8 #twentyfive { color: red } #ie9 #twentysix { color: red } |
Some Attribute Browser Specific CSS Hacks
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.class { width: 200px; /* All browsers */ *width: 250px; /* IE */ _width: 300px; /* IE6 */ . width: 200 px; /* 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 */ |
Finally, that’s all for today. Remember this is just hacks. But you should give the effort to make your coding perfect and avoid using this.
