Safari CSS hack redux

January 08th, 2008  |  browsers, CSS, web design, web development

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.

1
2
3
4
body { background-color: red; }<br />
@media screen and (-webkit-min-device-pixel-ratio:0) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;body { background-color: blue; }<br />
}

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

  • abZ

    Works perfect!!!
    Thank you :-)

  • http://pictor.us mo

    Thanks man!

    you saved the day :]

  • Debbie

    Hi, I am trying to use the hack to position a photo using this code but it doesn’t seem to work…any suggestions?

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    img.photo { margin-right: 10px; }
    }

  • http://themechanism.com Jeffrey Barke

    Hello Debbie,

    Not sure why your code isn't working—perhaps you could provide a link to the page in question.

    I copied your code (slight change—margin-left instead of margin-right) and created a demo here. Everything seems to be working fine.

  • Nanda YK. Salunkhe

    Thanks a lot, it’s really works in Safari…

  • Mike

    This does not work on Safari 1.3.

  • http://themechanism.com Jeffrey Barke

    Hence "However, there is a way to target Safari 3.0". :)

    Not sure if the Pound Safari Post Semicolon hack will work in Safari 1.3, though it does in 2.0.

  • April

    This is awesome. Perfect Safari 3 CSS hack.

  • brian

    It Works!! I’ve been using IE hacks for years. Haven’t had many troubles from Safari until late with absolute positioning. I look forward to the day they all surrender to the only truly compliant browser, FireFox. Thanks

  • http://designsignature.co.za/blog Jayx

    Hi Jeffrey

    It took some digging to find this post, but well worth the effort. Works perfectly in Safari 3

    Thanks a million

  • Josif

    Great hack. Works well. If only there was a way to target JUST opera or JUST safari…I need to target SAFARI alone. I think all browsers should have a conditional comment that allows for alternative stylesheets.

  • http://donordrive.com Matt Radel

    Works swell – thanks so much for sharing!

  • TK Vanacoro

    I guess I;m a but dumb, but I want to use this hack to select different levels of font-weight, so I can make the fonts among IE, FF, NS and SF look at least similar.

    Can’t seem to do it (i have a bunch of CSS commands, but only want to change font control).

    Do I need to duplicate the entire class with the @media screen and (-webkit-min-device-pixel-ratio:0) {
    as a lead in or can I just use the lead-in and specify only the changed font controls?

    Thanks.

  • http://themechanism.com Jeffrey Barke

    TK,

    You only need to specify the rules you want to override in Safari and Opera, not the entire class.

  • TK Vanacoro

    okay, so do I just but the overrides at the bottom of my .css page? I’m still just a bit confused.

    Is there an example that does not include BODY or must they all be BODY commands?

    Thanks again.

  • http://themechanism.com Jeffrey Barke

    TK, set up your stylesheet as normal first:

    1
    body { font-family: Verdana, Arial, sans-serif; }<br />#test { color: #ff0000; }<br />.callout { font-weight: bold; }

    These rules are served to all browsers, and they set the body font to Verdana, the font color of a <div> with the id "test" to red, and make the font bold for anything assigned the class callout.

    At the bottom of the stylesheet, we'll only override those rules we want to display differently in Opera and Safari. In this case, we want the font color of the "test" div to be black instead of red and we want the

    1
    .callout

    class to be both bold and italic;

    1
    @media screen and (-webkit-min-device-pixel-ratio: 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#test { color: #000; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.callout { font-style: italic; }<br />}

    The entire stylesheet would look like this:

    1
    body { font-family: Verdana, Arial, sans-serif; }<br />#test { color: #ff0000; }<br />.callout { font-weight: bold; }<br />@media screen and (-webkit-min-device-pixel-ratio: 0) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#test { color: #000; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.callout { font-style: italic; }<br />}

  • thomas

    use an Opera hack to separate Safari from Opera:
    html:first-child>body #menu ul {margin-top:0;}

    anyhow: big thanx for this Safari only solution!!!!!!!!

    cheers

  • Dan-O

    Okay, the hack is cool, for a hack, but does anyone have any thoughts on how to get it to validate? Guess that’s the price you pay for using hacks…

  • http://www.zubrag.com freelancer

    Worked great! Thanks a lot! I wish there were also FF only css hacks.

  • lamirs

    Its working… thanks..

  • http://www.youplusbuild.com/index.html Real Estate Graphic Design and Marketing

    Does this work for inserting in external style sheets as well as within html?

  • http://themechanism.com Jeffrey Barke

    Yep, it does work for inserting in external style sheets as well as within HTML.

  • http://blog.gilluminate.com Jason Gill

    Saved my life. Thanks!

  • Ian Ferguson

    Perfect! Worked exactly as described. Thanks so much.

  • Rachel M

    Thank you from me, too.

  • http://www.theweblotus.com Jenni

    Hi, anyone know of any hacks for Firefox (2.0.0.16 and down) OR for IE7?

    I’ve tried one of each that I found on various other forums, and neither works…

    Thanks,
    Jenni
    http://www.theweblotus.com

  • http://themechanism.com Jeffrey Barke

    Jenni, you can target any version of Internet Explorer by using conditional comments: http://www.quirksmode.org/css/condcom.html

  • Shelley

    Thanks, this did the trick! :)

  • Pingback: Zodomatica - Bits of Tzaddi's Life

  • Vamsi

    Magic!! Cool stuff.

  • Musa

    Man, this doesnt work for google crome which execute safari specific code. If any luck let me know please.

  • http://www.hdgreetings.com ecards

    Chrome is killing me too here –

    How could we end up with the same rendering engine being used, yet with different bugs, yet no way to distinguish.

    Arg…

  • dop3

    Absolutely fantastic!
    Thank you,

    have a nice weekend :)

  • http://www.webdex.ro dex online

    Is perfect this hack! thank you!!!

  • Pingback: Is There Any Dedicated CSS Hacks For Safari or Opera? - CSS-Tricks

  • http://www.85design.net wing

    Thank you!!!
    And it is works on Chrome too.

  • Ace_ov_Spade

    thanx. its a nice hack for safari 3. it works

  • Pingback: Is There Any Dedicated CSS Hacks For Safari or Opera? | Proba

  • Pingback: Opera and Safari | Branding Studio Serghei Tiutiunic

  • Madhu

    Thanks for

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

    But this works for both in SAFARI 3.1 AND GOOGLE CHROME there is any hack only for SAFARI 3.1

    Thanks in Advance

  • http://welovecroatia.com nikola

    well this code is visible in Google Chrome also so it is not solution only for Safari …

  • ravin

    works well thanks

  • http://www.andreadippolito.it adedip

    what if I want to have safari css different from chrome’s one?

  • http://www.itrainconsulting.co.uk John

    Thanks the code works great with Google Chrome, Safri 3.2.1, but its not working on the new Opera 9.63 I downloaded this afternoon?

  • http://www.cssidiots.com Prasad

    Thanks a lot…

    It works for Opera & Chrome also.

  • http://www.love-taiwan.tw kevin

    Dear sir, as if you expore my website in chrome, it appears that the table underneath div “index_right” is not shown properly..but it works perfectly fine under ie and ff..
    i tried to use the code :
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #index_right{margin-bottom:5px;}
    }
    it sitll doesn’t work
    im sorry that im quite new to css
    please give me some hints if u have time~!
    thanks!

  • Sandesh

    this is superb!!!

  • SeVdA

    ok, it work but what happend when everything is OK on Chome and I need correction only on Safari-font-weight is bold only there and make my menu longer…?

  • http://miracleworldmedia.com/blog/ MediaMarc

    Thanks homie,

    This just got me out of a tough spot

  • http://www.lineacasa.ro perdele si draperii

    thanks dude with this hack, i am done with my stuff now :)

  • Pingback: Paul Irish » Browser-specific CSS hacks

  • jmarx

    just wanted to chime in and say thank you! this works perfectly and i’ve been searching and hacking away for a while for this exact css. nice job!

  • Irinka

    Spasibo!!Thx!!

  • http://kuvasblergh.blogspot.com/ Rafael Kuvasney

    I.LOVE.YOU
    please browsers, use the same engine for all!

  • http://www.timletscher.com Tim Letscher

    Worked great, thanks! Just a note that this hack also performs well with the new release of Safari 4.0 as well. Thanks again.

  • Amit

    Thanx a lot it’s really worked.

    great!!!!!!!

  • Jonny D

    Is there a hack that will just effect Safari and not chrome?

  • http://www.mediamole.net Garry

    I’m trying to use this hack to resolve a padding issue I have in Safari 3 with this site I’m working on test site – however the site looks fine in Google Chrome so I dont really want the hack to effect Google chrome. Is there a work around?

    Garry