Safari CSS hack redux
January 8, 2008 | Posted by Jeffrey Barke | 74 comments
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.
Spread the Love
Works perfect!!!
Thank you
abZ
January 9th, 6:52 pmThanks man!
you saved the day :]
mo
January 15th, 4:17 amHi, 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; }
}
Debbie
January 16th, 5:42 pmHello 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.
Jeffrey Barke (theMechanism)
January 21st, 1:01 pmThanks a lot, it’s really works in Safari…
Nanda YK. Salunkhe
January 23rd, 1:44 amThis does not work on Safari 1.3.
Mike
January 27th, 7:50 pmHence "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.
Jeffrey Barke (theMechanism)
January 28th, 10:26 amThis is awesome. Perfect Safari 3 CSS hack.
April
February 15th, 5:42 pmIt 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
brian
February 23rd, 3:05 amHi Jeffrey
It took some digging to find this post, but well worth the effort. Works perfectly in Safari 3
Thanks a million
Jayx
March 3rd, 8:35 pmGreat 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.
Josif
March 7th, 7:33 amWorks swell – thanks so much for sharing!
Matt Radel
March 7th, 3:47 pmI 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.
TK Vanacoro
April 17th, 2:46 pmTK,
You only need to specify the rules you want to override in Safari and Opera, not the entire class.
Jeffrey Barke (theMechanism)
April 17th, 3:27 pmokay, 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.
TK Vanacoro
April 18th, 11:28 amTK, 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
.calloutclass 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; }
}
Jeffrey Barke (theMechanism)
April 18th, 1:50 pmuse an Opera hack to separate Safari from Opera:
html:first-child>b\ody #menu ul {margin-top:0;}
anyhow: big thanx for this Safari only solution!!!!!!!!
cheers
thomas
April 22nd, 8:10 pmOkay, 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…
Dan-O
April 23rd, 11:40 amWorked great! Thanks a lot! I wish there were also FF only css hacks.
freelancer
April 25th, 5:23 amIts working… thanks..
lamirs
April 28th, 7:05 amDoes this work for inserting in external style sheets as well as within html?
Real Estate Graphic Design and Marketing
April 30th, 2:54 pmYep, it does work for inserting in external style sheets as well as within HTML.
Jeffrey Barke (theMechanism)
April 30th, 3:46 pmSaved my life. Thanks!
Jason Gill
May 2nd, 4:15 pmPerfect! Worked exactly as described. Thanks so much.
Ian Ferguson
May 15th, 9:51 amThank you from me, too.
Rachel M
June 9th, 12:13 pmHi, 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
Jenni
July 17th, 8:18 pmJenni, you can target any version of Internet Explorer by using conditional comments: http://www.quirksmode.org/css/condcom.html
Jeffrey Barke (theMechanism)
July 18th, 9:58 amThanks, this did the trick!
Shelley
August 5th, 2:28 pm[...] Recently while coding a client’s site, I had an issue with a background image being misaligned by just one pixel. It was only happening in Safari. I tried a number of things and finally resorted to a CSS hack for Safari. [...]
Zodomatica - Bits of Tzaddi's Life
September 1st, 11:35 pmMagic!! Cool stuff.
Vamsi
September 8th, 10:15 amMan, this doesnt work for google crome which execute safari specific code. If any luck let me know please.
Musa
September 19th, 2:28 amChrome 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…
ecards
September 25th, 4:12 pmAbsolutely fantastic!
Thank you,
have a nice weekend
dop3
October 4th, 5:17 amIs perfect this hack! thank you!!!
dex online
October 10th, 4:13 pm[...] Originally published here. [...]
Is There Any Dedicated CSS Hacks For Safari or Opera? - CSS-Tricks
October 15th, 8:46 amThank you!!!
And it is works on Chrome too.
wing
October 21st, 11:42 pmthanx. its a nice hack for safari 3. it works
Ace_ov_Spade
October 23rd, 6:44 am[...] Originally published here. [...]
Is There Any Dedicated CSS Hacks For Safari or Opera? | Proba
October 26th, 11:59 am[...] Originally published here. [...]
Opera and Safari | Branding Studio Serghei Tiutiunic
October 26th, 1:10 pmThanks 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
Madhu
November 28th, 1:15 amwell this code is visible in Google Chrome also so it is not solution only for Safari …
nikola
December 12th, 7:58 amworks well thanks
ravin
December 17th, 4:13 amwhat if I want to have safari css different from chrome’s one?
adedip
December 24th, 12:35 pmThanks 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?
John
January 27th, 7:43 amThanks a lot…
It works for Opera & Chrome also.
Prasad
January 27th, 4:18 pmDear 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!
kevin
February 17th, 3:23 amthis is superb!!!
Sandesh
February 17th, 3:40 amok, 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…?
SeVdA
February 18th, 5:01 amThanks homie,
This just got me out of a tough spot
MediaMarc
March 9th, 11:11 amthanks dude with this hack, i am done with my stuff now
perdele si draperii
March 31st, 2:08 pm[...] (Thx to Solid State Group, Evotech, and Jeffrey.) [...]
Paul Irish » Browser-specific CSS hacks
April 15th, 1:24 pmjust 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!
jmarx
May 1st, 4:27 pmSpasibo!!Thx!!
Irinka
May 21st, 3:55 amI.LOVE.YOU
please browsers, use the same engine for all!
Rafael Kuvasney
May 25th, 5:55 pmWorked great, thanks! Just a note that this hack also performs well with the new release of Safari 4.0 as well. Thanks again.
Tim Letscher
June 18th, 6:24 pmThanx a lot it’s really worked.
great!!!!!!!
Amit
June 25th, 3:20 amIs there a hack that will just effect Safari and not chrome?
Jonny D
June 25th, 2:02 pmI’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
Garry
July 6th, 5:52 pmThank you.This is a good post!
bolo
July 20th, 1:56 amthank you ! it works well!!!
adamghost
July 20th, 8:47 am[...] article comes from :Safari CSS hack redux http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/ Tags: hack, safari, Xhtml [...]
Safari/Chorme/Webkit-based Browsers CSS hack redux - Safari/Chorme/基于Webkit浏览器 CSS hack 写法 | 不一样的蚊子
July 22nd, 8:22 pmGreat man. it works.
winthan
July 23rd, 8:36 am[...] this, Mac that, Im looking for a job and beggars can’t be choosers). Then I found the hack on the Mechanism’s blog and it works beautifully. Essentially the gist of the hack is [...]
Jamie Rothwell/blog » Blog Archive » Safari hack for CSS that works for Safari Windows
August 30th, 9:34 pmThanks dude – this just killed a frustating issue I have been working on all afternoon – you da man!
Steve
September 23rd, 2:38 pmThank’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…………..
Mirza Nayeem
October 9th, 8:38 amwow! this is helpful! this saves me from hell. Good JOB!
Miro Enriquez
October 13th, 12:56 amsadly it gives bad result to my site in chrome browser.
(
Miro Enriquez
October 13th, 1:05 amThanks very much! I was going a little nuts!
EffEss
October 15th, 5:42 pmThis works in Safari 4. Thanks very much.
Lee
November 21st, 9:16 amThank you so much….
PRasanna Jathan
November 27th, 1:02 am10x mate. U saved so much time
Mehmet Gültein
January 8th, 11:38 amI 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!
Tim
January 12th, 11:35 amWoooooW, 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!!!
Taniguchi
January 16th, 9:27 pmThank you so much! Hopefully I can get this to fix my tooltip positioning issue! But the hack works flawlessly!
Thomas Bliss
January 19th, 6:45 pm