Blog Archives

Latest Posts

Monthly

Categories

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:

Comments

abZ
January 9, 2008 at 6:52 pm

Works perfect!!!
Thank you 🙂

Comments are closed.

abZ
January 9, 2008 at 6:52 pm

Works perfect!!!
Thank you 🙂

Comments are closed.

mo
January 15, 2008 at 4:17 am

Thanks man!

you saved the day :]

Comments are closed.

mo
January 15, 2008 at 4:17 am

Thanks man!

you saved the day :]

Comments are closed.

Debbie
January 16, 2008 at 5:42 pm

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; }
}

Comments are closed.

Debbie
January 16, 2008 at 5:42 pm

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; }
}

Comments are closed.

Jeffrey Barke
January 21, 2008 at 1:01 pm

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.

Comments are closed.

Jeffrey Barke
January 21, 2008 at 1:01 pm

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.

Comments are closed.

Nanda YK. Salunkhe
January 23, 2008 at 1:44 am

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

Comments are closed.

Nanda YK. Salunkhe
January 23, 2008 at 1:44 am

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

Comments are closed.

Mike
January 27, 2008 at 7:50 pm

This does not work on Safari 1.3.

Comments are closed.

Mike
January 27, 2008 at 7:50 pm

This does not work on Safari 1.3.

Comments are closed.

Jeffrey Barke
January 28, 2008 at 10:26 am

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.

Comments are closed.

Jeffrey Barke
January 28, 2008 at 10:26 am

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.

Comments are closed.

April
February 15, 2008 at 5:42 pm

This is awesome. Perfect Safari 3 CSS hack.

Comments are closed.

April
February 15, 2008 at 5:42 pm

This is awesome. Perfect Safari 3 CSS hack.

Comments are closed.

brian
February 23, 2008 at 3:05 am

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

Comments are closed.

brian
February 23, 2008 at 3:05 am

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

Comments are closed.

Jayx
March 3, 2008 at 8:35 pm

Hi Jeffrey

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

Thanks a million

Comments are closed.

Jayx
March 3, 2008 at 8:35 pm

Hi Jeffrey

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

Thanks a million

Comments are closed.

Josif
March 7, 2008 at 7:33 am

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.

Comments are closed.

Josif
March 7, 2008 at 7:33 am

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.

Comments are closed.

Matt Radel
March 7, 2008 at 3:47 pm

Works swell – thanks so much for sharing!

Comments are closed.

Matt Radel
March 7, 2008 at 3:47 pm

Works swell – thanks so much for sharing!

Comments are closed.

TK Vanacoro
April 17, 2008 at 2:46 pm

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.

Comments are closed.

TK Vanacoro
April 17, 2008 at 2:46 pm

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.

Comments are closed.

Jeffrey Barke
April 17, 2008 at 3:27 pm

TK,

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

Comments are closed.

Jeffrey Barke
April 17, 2008 at 3:27 pm

TK,

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

Comments are closed.

TK Vanacoro
April 18, 2008 at 11:28 am

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.

Comments are closed.

TK Vanacoro
April 18, 2008 at 11:28 am

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.

Comments are closed.

Jeffrey Barke
April 18, 2008 at 1:50 pm

TK, set up your stylesheet as normal first:

body { font-family: Verdana, Arial, sans-serif; }
#test { color: #ff0000; }
.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 .callout class to be both bold and italic;

@media screen and (-webkit-min-device-pixel-ratio: 0) {
     #test { color: #000; }
     .callout { font-style: italic; }
}

The entire stylesheet would look like this:

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

Comments are closed.

Jeffrey Barke
April 18, 2008 at 1:50 pm

TK, set up your stylesheet as normal first:

body { font-family: Verdana, Arial, sans-serif; }
#test { color: #ff0000; }
.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 .callout class to be both bold and italic;

@media screen and (-webkit-min-device-pixel-ratio: 0) {
     #test { color: #000; }
     .callout { font-style: italic; }
}

The entire stylesheet would look like this:

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

Comments are closed.

thomas
April 22, 2008 at 8:10 pm

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

Comments are closed.

thomas
April 22, 2008 at 8:10 pm

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

Comments are closed.

Dan-O
April 23, 2008 at 11:40 am

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…

Comments are closed.

Dan-O
April 23, 2008 at 11:40 am

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…

Comments are closed.

freelancer
April 25, 2008 at 5:23 am

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

Comments are closed.

freelancer
April 25, 2008 at 5:23 am

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

Comments are closed.

lamirs
April 28, 2008 at 7:05 am

Its working… thanks..

Comments are closed.

lamirs
April 28, 2008 at 7:05 am

Its working… thanks..

Comments are closed.

Real Estate Graphic Design and Marketing
April 30, 2008 at 2:54 pm

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

Comments are closed.

Real Estate Graphic Design and Marketing
April 30, 2008 at 2:54 pm

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

Comments are closed.

Jeffrey Barke
April 30, 2008 at 3:46 pm

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

Comments are closed.

Jeffrey Barke
April 30, 2008 at 3:46 pm

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

Comments are closed.

Jason Gill
May 2, 2008 at 4:15 pm

Saved my life. Thanks!

Comments are closed.

Jason Gill
May 2, 2008 at 4:15 pm

Saved my life. Thanks!

Comments are closed.

Ian Ferguson
May 15, 2008 at 9:51 am

Perfect! Worked exactly as described. Thanks so much.

Comments are closed.

Ian Ferguson
May 15, 2008 at 9:51 am

Perfect! Worked exactly as described. Thanks so much.

Comments are closed.

Rachel M
June 9, 2008 at 12:13 pm

Thank you from me, too.

Comments are closed.

Rachel M
June 9, 2008 at 12:13 pm

Thank you from me, too.

Comments are closed.

Jenni
July 17, 2008 at 8:18 pm

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

Comments are closed.

Jenni
July 17, 2008 at 8:18 pm

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

Comments are closed.

Jeffrey Barke
July 18, 2008 at 9:58 am

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

Comments are closed.

Jeffrey Barke
July 18, 2008 at 9:58 am

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

Comments are closed.

Shelley
August 5, 2008 at 2:28 pm

Thanks, this did the trick! 🙂

Comments are closed.

Shelley
August 5, 2008 at 2:28 pm

Thanks, this did the trick! 🙂

Comments are closed.

Vamsi
September 8, 2008 at 10:15 am

Magic!! Cool stuff.

Comments are closed.

Vamsi
September 8, 2008 at 10:15 am

Magic!! Cool stuff.

Comments are closed.

Musa
September 19, 2008 at 2:28 am

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

Comments are closed.

Musa
September 19, 2008 at 2:28 am

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

Comments are closed.

ecards
September 25, 2008 at 4:12 pm

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…

Comments are closed.

ecards
September 25, 2008 at 4:12 pm

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…

Comments are closed.

dop3
October 4, 2008 at 5:17 am

Absolutely fantastic!
Thank you,

have a nice weekend 🙂

Comments are closed.

dop3
October 4, 2008 at 5:17 am

Absolutely fantastic!
Thank you,

have a nice weekend 🙂

Comments are closed.

dex online
October 10, 2008 at 4:13 pm

Is perfect this hack! thank you!!!

Comments are closed.

dex online
October 10, 2008 at 4:13 pm

Is perfect this hack! thank you!!!

Comments are closed.

wing
October 21, 2008 at 11:42 pm

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

Comments are closed.

wing
October 21, 2008 at 11:42 pm

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

Comments are closed.

Ace_ov_Spade
October 23, 2008 at 6:44 am

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

Comments are closed.

Ace_ov_Spade
October 23, 2008 at 6:44 am

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

Comments are closed.

Madhu
November 28, 2008 at 1:15 am

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

Comments are closed.

Madhu
November 28, 2008 at 1:15 am

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

Comments are closed.

nikola
December 12, 2008 at 7:58 am

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

Comments are closed.

nikola
December 12, 2008 at 7:58 am

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

Comments are closed.

ravin
December 17, 2008 at 4:13 am

works well thanks

Comments are closed.

ravin
December 17, 2008 at 4:13 am

works well thanks

Comments are closed.

adedip
December 24, 2008 at 12:35 pm

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

Comments are closed.

adedip
December 24, 2008 at 12:35 pm

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

Comments are closed.

John
January 27, 2009 at 7:43 am

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?

Comments are closed.

John
January 27, 2009 at 7:43 am

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?

Comments are closed.

Prasad
January 27, 2009 at 4:18 pm

Thanks a lot…

It works for Opera & Chrome also.

Comments are closed.

Prasad
January 27, 2009 at 4:18 pm

Thanks a lot…

It works for Opera & Chrome also.

Comments are closed.

kevin
February 17, 2009 at 3:23 am

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!

Comments are closed.

kevin
February 17, 2009 at 3:23 am

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!

Comments are closed.

Sandesh
February 17, 2009 at 3:40 am

this is superb!!!

Comments are closed.

Sandesh
February 17, 2009 at 3:40 am

this is superb!!!

Comments are closed.

SeVdA
February 18, 2009 at 5:01 am

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…?

Comments are closed.

SeVdA
February 18, 2009 at 5:01 am

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…?

Comments are closed.

MediaMarc
March 9, 2009 at 11:11 am

Thanks homie,

This just got me out of a tough spot

Comments are closed.

MediaMarc
March 9, 2009 at 11:11 am

Thanks homie,

This just got me out of a tough spot

Comments are closed.

perdele si draperii
March 31, 2009 at 2:08 pm

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

Comments are closed.

perdele si draperii
March 31, 2009 at 2:08 pm

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

Comments are closed.

jmarx
May 1, 2009 at 4:27 pm

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!

Comments are closed.

jmarx
May 1, 2009 at 4:27 pm

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!

Comments are closed.

Irinka
May 21, 2009 at 3:55 am

Spasibo!!Thx!!

Comments are closed.

Irinka
May 21, 2009 at 3:55 am

Spasibo!!Thx!!

Comments are closed.

Rafael Kuvasney
May 25, 2009 at 5:55 pm

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

Comments are closed.

Rafael Kuvasney
May 25, 2009 at 5:55 pm

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

Comments are closed.

Tim Letscher
June 18, 2009 at 6:24 pm

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

Comments are closed.

Tim Letscher
June 18, 2009 at 6:24 pm

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

Comments are closed.

Amit
June 25, 2009 at 3:20 am

Thanx a lot it’s really worked.

great!!!!!!!

Comments are closed.

Amit
June 25, 2009 at 3:20 am

Thanx a lot it’s really worked.

great!!!!!!!

Comments are closed.

Jonny D
June 25, 2009 at 2:02 pm

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

Comments are closed.

Jonny D
June 25, 2009 at 2:02 pm

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

Comments are closed.

Garry
July 6, 2009 at 5:52 pm

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

Comments are closed.