Safari/Chorme/Webkit-based Browsers CSS hack redux

王万林 — Thu, 23 Jul 2009 01:21:52 +0000

In March 2007, I wrote about a Safari CSS hack called the “Pound Safari Post Semicolon” hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

As always, the disclaimer: nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Google’s Chrome. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example: The following code set the background color of the element red in all browsers and then resets it to blue in Safari 3.0 and Chrome.
body { background-color: red; } @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-color: blue; } }
[demo]

Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.

Update 2008-11-26: Since this hack targets Webkit-based browsers, Chrome is also affected. At the original time of writing, it also affected Opera (9.10); it hasn’t since 9.50. The post copy has been updated to reflect these developments.

This article comes from :Safari CSS hack redux http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/

safari – WL

Safari/Chorme/Webkit-based Browsers CSS hack redux