All Posts in safari hack

January 8, 2008 - 115 comments

Safari 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.

Published by: jeffreybarke in The Programming Mechanism
Tags:

March 28, 2007 - 26 comments

Safari CSS hack

Please note that this hack does not work in Safari 3. The updated hack is here.

While I’m not a fan of CSS hacks in general, there comes a time when nothing else will solve the problem. This was the situation this morning—the site looked perfect in every browser except Safari (due to a background repeat bug), and I needed a quick way to apply CSS rules to Safari alone. Here’s the hack:

Place the pound sign ( # ) after a semi-colon ( ; ), all styles within those brackets and the remainder of the stylesheet will be ignored in Safari.

Example: The following code will make any <p> assigned the callout class red with normal font-weight in Safari, but black and bold in the rest of the browsers.
p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }

[demo]

Tested on Mac OS X version 10.4.9 with Safari version 2.0.4 (419.3) and Mozilla Firefox version 2.0.0.3. Tested on Windows XP SP 2 with Mozilla Firefox version 2.0.0.3, Opera 9.10, and Microsoft Internet Explorer 6 and 7. Hack from bballcity

Published by: jeffreybarke in The Programming Mechanism
Tags: