Safari CSS hack

March 28th, 2007  |  browsers, CSS, web design, web development

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.

1
p.callout { color:#FF0000; font-weight:normal; }<br />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

  • http://www.themechanism.com Dave Fletcher

    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!

  • http://www.bballcity.com Ash Haque

    Yeah 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”

  • Hiren Mehta

    Great 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.

  • Jason Boychuk

    The hack doesn’t work on the new Safari 3 beta. I tested the demo page on both Mac and Windows versions.

  • http://www.themechanism.com Dave Fletcher

    Perhaps the hack is no longer even needed with the darling new beta release from Apple. But then again…

  • http://www.cchana.co.uk Chaz

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

  • Parag

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

  • http://themechanism.com Jeffrey Barke

    Some 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.

  • http://www.seniorwebdesigner.com Egyptian Web Designer

    hi Jeffrey,

    is there anything make the text rendered in safari lighter and don’t look as if it’s bold?

    Thanks alot,

    Mohammed

  • http://ooyes.net website design

    Be careful with that hack :)

  • Pingback: Can you have Style Sheets for Safari - DesignersTalk

  • http://www.hdgreetings.com ecards

    Thank you so much for this info.

    These kinds of issues are such a waste of time, how could Apple not have noticed the font consistency issue?

    Anyway I guess that’s the current state of the web…

  • http://www.sanathlk.com Sanath Peiris

    Thank you