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

  • http://digau.cn bolo

    Thank you.This is a good post!

  • http://adamghost.com adamghost

    thank you ! it works well!!!

  • Pingback: Safari/Chorme/Webkit-based Browsers CSS hack redux - Safari/Chorme/基于Webkit浏览器 CSS hack 写法 | 不一样的蚊子

  • winthan

    Great man. it works.

  • Pingback: Jamie Rothwell/blog » Blog Archive » Safari hack for CSS that works for Safari Windows

  • http://moxcreative.com Steve

    Thanks dude – this just killed a frustating issue I have been working on all afternoon – you da man!

  • http://wodpress Mirza Nayeem

    Thank’s alot!!!

    This code for safari helped me alot…

    i was very irritated that i m unable to do this but thank’s to Tony at Simian Design that they wirte this type of code

    thank you very much once again…………..

  • Miro Enriquez

    wow! this is helpful! this saves me from hell. Good JOB!

  • Miro Enriquez

    sadly it gives bad result to my site in chrome browser. :( (

  • EffEss

    Thanks very much! I was going a little nuts!

  • Lee

    This works in Safari 4. Thanks very much.

  • http://www.prasannajathan.com PRasanna Jathan

    Thank you so much….

  • http://mehmetgultekin.com Mehmet Gültein

    10x mate. U saved so much time :)

  • Tim

    I am using the @media screen and (-webkit-min-device-pixel-ratio:0) css Safari/Chrome hack with css sliding door buttons and it works beautifully locally, but when I upload my code for some reason Safari/Chrome are no longer recognizing the @media screen and (-webkit-min-device-pixel-ratio:0) css?

    Has anyone ever seen this issue? I am using Visual Studio 2010 and I am almost convinced that this may be the culprit somehow.

    PLEASE HELP!

  • Taniguchi

    WoooooW, you just saved my life! I was about to throw my PC outta the window and jump after it! ahahaha
    Thanks man, I love u!!!

  • http://www.themutantproject.com Thomas Bliss

    Thank you so much! Hopefully I can get this to fix my tooltip positioning issue! But the hack works flawlessly!

  • david

    i never comment on these, but this was SOOOOOO awesome! you saved my frikkin life. Thank you, Thank you, Thank you, Thank you!

  • Pingback: charliecarver.me » Blog Archive » Safari CSS hack redux | theMechanism

  • Mike Blonder

    Great solution, but now how to hack Safari on Mac vs Chrome on MSWindows?

  • josheat

    I can confirm that this hack works on myspace layouts too.

    When making a massive band layout, this is a god send because almost every single other hack is stripped when you save the code.

    Cheers mate!!

  • http://null Tahir

    thats very nice and work perfectly…. thanks you dear :)

  • http://null shahbaz

    thanks for new code……

  • http://null shahbaz

    WoooooW, you just saved my life! I was about to throw my PC outta the window and jump after it! ahahaha
    Thanks man, I love u!!!

  • http://www.itsselvam.com Selvam

    Many thanks :)

  • Zubair

    Dear All,

    Below css code is working for both Chrome and Safari.

    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    p {color:white; background:green;}
    }

    Is any know css hack only for Safari and which will not over-write on chrome and any other browsers if yes then please share it with all of us or mail me at

    zubair.web@gmail.com

  • Zubair

    I have write following code

    CSS Hacks For ALL Browsers

    body {font-family:Arial, Helvetica, sans-serif; font-size:18px}
    strong {font-size:22px; border-bottom:2px solid #00FF00}
    p {background:#fff; color:#000; padding:5px}

    /*Safari*/
    /*
    html* p {color:red; background:black }
    */

    /**/
    html>body*.safarihack p {color:red; background:black }
    /**/

    /*ie 6*/
    *html p {color:white; background:blue }

    /*ie 7*/
    *:first-child+html p {color:green; background:yellow }

    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    p {color:white; background:green;}
    }

    This text will displaye Black Text with White Background for Common Browser (FireFox, Opera, Netscap)
    This text will displaye White Text with Blue Background For IE 6
    This text will displaye Green Text with Yellow Background For IE 7
    This text will displaye Red Text with Black Background For Safari
    This text will displaye White Text with Green Background For Chrome

    Note : -The code for CSS hack for Safari should be place before the IE 6 hack code.

    Note :- CSS hack for only for safari is working fine for older version of safari i.e. 3 and below.

  • Zubair

    CSS Hacks For ALL Browsers

    body {font-family:Arial, Helvetica, sans-serif; font-size:18px}
    strong {font-size:22px; border-bottom:2px solid #00FF00}
    p {background:#fff; color:#000; padding:5px}

    /*Safari*/
    html* p {color:red; background:black }

    /*ie 6*/
    *html p {color:white; background:blue }

    /*ie 7*/
    *:first-child+html p {color:green; background:yellow }

    /*For Chrome 7*/
    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    p {color:White; background:green;}
    }

    This text will displaye Black Text with White Background for Common Browser (FireFox, Opera, Netscap)
    This text will displaye White Text with Blue Background For IE 6
    This text will displaye Green Text with Yellow Background For IE 7
    This text will displaye Red Text with Black Background For Safari
    This text will displaye White Text with Green Background For Chrome

    Note : -The code for CSS hack for Safari should be place before the IE 6 hack code.

    Note :- CSS hack for only for safari is working fine for older version of safari i.e. 3 and below.

  • Vojtech Dobeš

    Still working in Safari 5 and Google Chrome 6

  • KARAN

    THanksss!!!
    perfect hack!! :)