Safari CSS hack redux

January 08th, 2008 | Jeffrey Barke

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; }<br />
@media screen and (-webkit-min-device-pixel-ratio:0) {<br />
    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.

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!!

Voice