CSS Hack is a remedy that is used when standard CSS is not compatible with the display effects of various browsers. Until browser manufacturers reach an agreement on how to parse CSS, we can only use this method to complete such tasks. You may be able to search for a lot of CSS Hacks on the Internet, but you may not understand all the ones I released today, because these are CSS Hacks that only target a single browser.
To show you that these CSS hacks work, I created six new P tags and gave each P tag a unique id. This will show you CSS Hack in action.
| <p id="opera">I am from Opera 7.2 - 9.5</p> <p id="safari">I am the magical Safari</p> <p id="firefox">I'm from Firefox</p> <p id="firefox12">I am a FF senior Firefox 1 - 2 </p> <p id="ie7">I am 囧IE7</p> <p id="ie6">I am a broken IE 6</p> |
Then I let these P tags not be displayed by default
| <style type="text/css"> body p{display: none;} </style> |
Use IE CSS conditional comments to distinguish IE browsers
The easiest way to distinguish IE browsers is naturally to use their conditional comments. Microsoft has created a powerful syntax that allows us to achieve this functionality. I don’t want to introduce IE conditional comments in detail. I think you can search tens of thousands of search terms in the search engine. I only need these two here:
| <!--[if IE 7]> <style type="text/css"> </style> <![endif]--> <!--[if IE 6]> <style type="text/css"> </style> <![endif]--> |
Use CSS parser Hacks to distinguish IE
Although IE conditional comments are very simple and easy to use, if you want to put all the CSS in one file, then you have to use other methods. Note that the IE 7 Hack here will only work on IE7, because IE6 doesn't know the > selector at all. At the same time, you have to note that the > selector is also invalid for other browsers.
| /* IE 7 */ html > body #ie7 {*display: block;} /* IE 6 */ body #ie6 {_display: block;} |
CSS Hack to differentiate Firefox
The first uses body:empty to differentiate between Firefox 1 and 2. The second hack uses a proprietary extension for all Firefox browsers - moz. -moz is only valid for Firefox. You don't have to worry about the impact of other browsers when using this Hack.
| /* Firefox 1 - 2 */ body:empty #firefox12 {display: block;} /* Firefox */ @-moz-document url-prefix() {#firefox { display: block; }} |
CSS Hack differentiates Safari
Safari's CSS hack looks very similar to Firefox's hack. It uses the Safari browser's proprietary extension-webkit and is only effective for the Safari browser.
| /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) {#safari { display: block; }} |
CSS Hack distinguishes Opera
| /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: block; }} |
Then, put it all together and it becomes
| <!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">I am from Opera 7.2 - 9.5</p> <p id="safari">I am the magical Safari</p> <p id="firefox">I'm from Firefox</p> <p id="firefox12">I am a FF senior Firefox 1 - 2 </p> <p id="ie7">I am 囧IE7</p> <p id="ie6">I am a broken IE 6</p></body> </html> |
Although CSS Hack is good and conveniently compatible with various browsers, it cannot pass W3C verification, so you have to weigh whether it is necessary to use it.