Safari CSS hack
March 28, 2007 | Posted by Jeffrey Barke | 11 comments
Please note that this hack does not work in Safari 3. The updated hack is here.
While I’m not a fan of CSS hacks in general, there comes a time when nothing else will solve the problem. This was the situation this morning—the site looked perfect in every browser except Safari (due to a background repeat bug), and I needed a quick way to apply CSS rules to Safari alone. Here’s the hack:
Place the pound sign ( # ) after a semi-colon ( ; ), all styles within those brackets and the remainder of the stylesheet will be ignored in Safari.
Example: The following code will make any <p> assigned the callout class red with normal font-weight in Safari, but black and bold in the rest of the browsers.p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }
[demo]
Tested on Mac OS X version 10.4.9 with Safari version 2.0.4 (419.3) and Mozilla Firefox version 2.0.0.3. Tested on Windows XP SP 2 with Mozilla Firefox version 2.0.0.3, Opera 9.10, and Microsoft Internet Explorer 6 and 7. Hack from bballcity
Spread the Love
Thanks to Jonathan Badeen at badeen.com for pointing out the pesky error at one our sites: Esopus Meadows Lighthouse. Now that we’ve learned that even the mighty Apple mocks the web designer, we have a new “naughty” check mark next to the Safari Browser in our “list of evil.”
Great job sussing that one, Jeffrey!
Dave Fletcher (theMechanism)
March 28th, 1:50 pmYeah I see to use this one quite often when the design has kind of a complicated background, safari usually throws it 1px to the left, while IE throws it off 1px to the right =\
and the design requires pixel “perfectedness”
Ash Haque
April 3rd, 9:12 pmGreat code but same code Can we repeat in the same page by different class?
p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }
p.call { color:#000000; font-weight:normal; }
p.call { color:#FF0000; font-weight:bold;# }
if we use then 1 part will work and after # if 2nd hack css code is mentioned then it wont work.. plz give me code for it.
Hiren Mehta
July 10th, 7:23 amThe hack doesn’t work on the new Safari 3 beta. I tested the demo page on both Mac and Windows versions.
Jason Boychuk
July 19th, 2:26 pmPerhaps the hack is no longer even needed with the darling new beta release from Apple. But then again…
Dave Fletcher (theMechanism)
July 30th, 2:38 pmreally good hack i’ve used sparingly in the past, but now I’m left searching for a hack for safari 3 on windows
oh the joys of cross browser compatibility!
Chaz
December 13th, 10:08 amcan any one explain, how to customize look & feel of form elements in Safari for mac? How to hide textfield border or change its color??
Also is there anyway to hide the blue glow in mac for textfield??
Parag
December 27th, 3:20 amSome belated responses here (I apologize for not reviewing these comments months earlier):
Hiren, all styles after the # sign are ignored by Safari versions less than 3, so simply group all of your Safari only rules above the first # and you can override as many classes as you want.
Jason and Chaz, you're correct—the hack no longer works in Safari 3. I added a disclaimer to the top of the post to make this more apparent.
Chaz, there is a hack for Safari 3. I wrote about it here.
Jeffrey Barke (theMechanism)
January 8th, 2:16 pmhi Jeffrey,
is there anything make the text rendered in safari lighter and don’t look as if it’s bold?
Thanks alot,
Mohammed
Egyptian Web Designer
May 3rd, 11:47 pmBe careful with that hack
website design
May 5th, 5:24 am[...] by route609 any idea what the root hack is as the problem is only happening on versions < 2 Safari CSS hack | theMechanism, llc. [...]
Can you have Style Sheets for Safari - DesignersTalk
June 17th, 6:39 am