Safari CSS hack redux
January 8, 2008 | Posted by Jeffrey Barke | 27 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 (and Opera as well):
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 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 Opera 9. 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 Opera 9.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.
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 am