Wed. July 23, 12:23:35 AM
In browsers that support the data: URI scheme, this link provides a live demo of your CSS demo.
CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer
Recent Articles:
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
- Find Unused CSS Selectors With CSS Usage
- A List of New CSS Features In Firefox 3.6
- Create An Icon Bouncing Effect With jQuery & CSS
- A jQuery Tool That Generates External Stylesheets From Your HTML Structure
Subscribe To Feed
Subscribers
Subscribers
Jul 22
While I strongly advise using hacks at a minimum especially when it comes to CSS there is a time and a place for them, especially when you need a quick way to target a browser other than Internet Explorer.
CSS Hacks: The Problem
Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE.
The Setup
To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly
<p id="opera">Opera 7.2 - 9.5</p>
<p id="safari">Safari</p>
<p id="firefox">Firefox</p>
<p id="firefox12">Firefox 1 - 2 </p>
<p id="ie7">IE 7</p>
<p id="ie6">IE 6</p>
Next I automatically hid all P tags:
<style type="text/css">
body p
{
display: none;
}
</style>
Targeting Internet Explorer With CSS Using Conditional Comments
The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I'm not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:
<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->
Targeting Internet Explorer With CSS Using Parser Hacks
I wouldn't recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
Targeting Firefox With CSS
The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I've found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
Targeting Safari With CSS
The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
Targeting Opera With CSS
The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I've listed simply because it's targeting ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
Putting It All Together:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Browser Hacks</title>
<style type="text/css">
body p
{
display: none;
}
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
</style>
</head>
<body>
<p id="opera">Opera 7.2 - 9.5</p>
<p id="safari">Safari</p>
<p id="firefox">Firefox</p>
<p id="firefox12">Firefox 1 - 2 </p>
<p id="ie7">IE 7</p>
<p id="ie6">IE 6</p>
</body>
</html>
Sources
Replies:
-
Wed. July 23, 12:26:11 AM
Hmmm... that link got borked because your message board converts the percent sign character to the word "percent".
-
Wed. July 23, 6:34:10 AM
Lol, good idea though Chris. If you want, email me the data uri and I'll post it via my database so that it doesn't filter out "percent"
-
Wed. July 23, 8:51:04 PM
I fixed your link Chris. I kind of like your data:uri idea. One thing I hate about blogs/posts is having all these orphaned images/css/files hanging around my web server long after I've posted. With the data:uri's you don't need to worry about all those useless orphaned files.
By the way, is there a website you use to convert HTML to a data:uri?
-
Thu. July 24, 2:19:21 PM
I prefer to use this one, seems to do a good job. The Wikipedia article has a few code examples too, if you wanted to create your own.
-
Sat. October 11, 5:34:43 PM
How do use the all firefox versions hack? Do I add my specific selectors to the start or end?
-
Sat. October 11, 7:13:05 PM
@Daniel, for the all firefox version you simply do this:
@-moz-document url-prefix()
{
/* place your selectors here */
}
-
Tue. October 14, 5:22:46 AM
One strategy to keep this clean would be to use your scripting language to detect the user agent (obviously a bit weak) and then add a link to these extra rules. Precluding that one day all browsers will really render the same way, it would be nice if each browser had its own conditional comment-type loophole.
-
Tue. October 14, 5:35:42 AM
Yes, it is best to avoid “hacks”, however Conditional Comments mean the by far worst implications for maintainability …
-
Tue. October 14, 8:00:56 AM
Hacks are sort of the chicken and the egg scenario. We don't want to use hacks but have to because "some" browsers have poor standards support, but by using hacks, those browsers are fearful of making rapid changes in their support.
I personally don't like hacks that rely on browser compatibility but by using browser prefixes such as -webkit or -moz I feel a bit safer using the hacks.
-
Tue. October 14, 3:20:23 PM
Great article.
I personally use the 'star html' hack (and it's derivative) for IE6 and 7.
You can view an article outlining the modified star html hack for IE7 here:
http://thingsilearn.wordpress.com/2007/01/31/hello-world/
-
Wed. October 15, 4:47:36 AM
Hey Neil,
Thanks very much for this really well written article. I have more hair on my head for it.....
The sooner browsers like ie 6 dissappear the better!!!
James
-
Sat. October 18, 4:33:31 AM
The IE hacks are pretty well known - and the ones you gave are not the only ones in use by webdesigners
However, I'm really not sure about using the hacks for Safari. Opera or Firefox for the sole reason that I feel they could easily become obsolete as you are reallying on coding mistakes within the software itself...
IE is so unresponsive to webdesigners that their coding mistakes will remain features for ever and a day... but the other browsers pride themselves in seeking perfection...
I wonder whether overnight changes via software updates would make these hacks redundant
-
Fri. October 24, 2:53:22 AM
great!! guys I really appreciate you all's idea.
All the hacks seems to have their values that's why I have kept in my library.
However, I would like to comment seriously regarding safari hack..I used safari hack but It was not working, later I used (head~body) of opera and placed in safari hack, it worked.
Now tell me what was the actual problem ...???
-
Fri. October 24, 8:03:37 AM
@Manoj: could you give me an example or link me to a page that uses the example?
-
Mon. October 27, 9:33:30 AM
hit paylaşmak için www.hitsihirbazi.com süper bi site deneyin.
-
Wed. October 29, 10:57:58 AM
Thanks for this, I will give it a shot! :-)
-
Fri. November 7, 1:29:15 AM
Those hacks are working but seems doesn't valid css, so how to make it a valid?
-
Fri. November 7, 8:12:46 AM
@Firman: The hacks that use the vendor specific CSS3 properties will not validate. Examples of this are -webkit or -moz. They will probably become valid CSS someday when the W3C incorporates them in the CSS3 spec fully.
-
Thu. November 13, 7:16:12 PM
Very Sweet. Best thing I have seen on this subject.
-
Tue. November 18, 9:41:17 PM
I see, so we just wait the W3C for it then. BTW thanks for these hacks
-
Wed. December 3, 11:40:12 AM
Hey thanks for the article, very helpful.
-
Tue. May 12, 11:36:34 AM
thanks for the great article
-
Thu. May 14, 3:01:55 AM
can u please give me the code to write in aspx page for mozilla check
-
Mon. June 15, 2:56:05 AM
Thanks You...
bursa evden eve
-
Mon. June 22, 3:29:04 PM
Very cool writeup, had to use the opera hack for a project, and worked like a charm!
-
Mon. June 29, 3:08:45 AM
Thanks..
izmir matbaa
-
Fri. August 21, 12:05:11 PM
Well done! I tested the opera hack to fix kubrick theme for wordpress, it rocks...The theme is OK in opera now..
------------------------------------------------------------------------------
/*Visible to only Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#content {margin: 0 35px 0 0;}
}
-
Fri. August 21, 12:07:32 PM
Well done! I tested the opera hack to fix kubrick theme for wordpress, it rocks...The theme is OK in opera now..
------------------------------------------------------------------------------
/*Visible to only Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#content {margin: 0 35px 0 0;}
}
-
Mon. August 24, 11:21:11 AM
Thank you for this Neal! You are a genius and just made my coding life so much easier. <3
-
Mon. August 31, 6:26:03 PM
Superb article, that`s what i was loogking for, thanx.
-
Thu. September 3, 4:30:45 PM
Thanks, I used your fix for Opera, fixing a WP theme.
-
Thu. January 7, 6:23:39 AM
Nice article, good work :)
-
Sat. January 9, 2:27:31 PM
Thanks a lot for the hack!
What about Chrome? When I do this, Chrome shows "Safari". I know both Chrome and Safari use webkit. Is there any way to know when is Chrome and when Safari.
Thanks again
-
Wed. January 27, 3:36:10 AM
I've dropped working with IE-hacks since early 2008: to me hacks are counter-productive and maintaining add-on css-files for IE with CC also isn’t very productive. Fed up with hacking IE I rethought the way I used to target different IE-versions.
The way I work (and I'm not the only working this way):
After the body-tag, I include a couple of cc-spans with the respective IE-version as an ID. These spans get closed right before the /body.
{body}
{if IE 6}{span id=’IE6′}{endif}
{if IE 7}{span id=’IE7′}{endif}
{if IE 8}{span id=’IE8′}{endif}
….
{if IE}{/span}{endif}
{/body}
In my CSS-files, I can now keep all rules together, which is a lot more comfortable when developing and testing.
Example:
#header{margin-top: 5px, background-image: bla.png}
#IE6 #header{margin-top: 7px; background-image: bla.gif}
#IE7 #header{margin-top: 6px}
When revising stylesheets months or years later, I can quickly see where and what I fixed for which IE-version.
I would have liked to make the body-tag conditionnal, but it gets messy sometimes working with content management systems, so I never bothered.
-
Tue. February 9, 7:02:02 PM