Safari/Chorme/Webkit-based Browsers CSS hack redux

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 <body> 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/

相关文章

9 responses on “Safari/Chorme/Webkit-based Browsers CSS hack redux

  1. The idea is not new, but presented interesting. I Vaashego permission to quote from a blog..

    1. 🙂 I read this in themechanism’s blog, it do help me, so i put it in my blog as a bookmark~

  2. As they say .. Do not give not to take, test paper!.

  3. I have carefully read the second paragraph and not the substance contained vkuril.

  4. I liked it. So much useful material. I read with great interest.

  5. Interesting and informative. But will you write about this one more?

  6. 7655cjc

    用百度搜索webkit CSS hack 竟然找到这里了, 内牛满面~~~

    1. @7655cjc,
      话说当年小昭也是这样发现了我的博。。。。难道是猿粪??

  7. @7655cjc,
    话说当年小昭也是这样。。。。难道是猿粪??

Comments are closed.