please go checking original post @ http://www.nealgrosskopf.com/tech/thread.asp?pid=20
this is just a copy for my backup. all copyright goes to Neal Grosskopf.
Neal Grosskopf Dot Com A NG Designs Site
CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer
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
- http://msdn.microsoft.com/en-us/library/ms537512.aspx
- http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
- http://perishablepress.com/press/2006/08/27/css-hack-dumpster/
- http://thomas.tanreisoftware.com/?p=11#opera
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
- http://msdn.microsoft.com/en-us/library/ms537512.aspx
- http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
- http://perishablepress.com/press/2006/08/27/css-hack-dumpster/
- http://thomas.tanreisoftware.com/?p=11#opera
Posted By: Neal Grosskopf
@
Tuesday, July 22, 2008 7:36:21 PM
please go checking original post @ http://www.nealgrosskopf.com/tech/thread.asp?pid=20this is just a copy for my backup. all copyright goes to Neal Grosskopf.
0 comments:
Post a Comment