March 28, 2007 - 26 comments

Safari CSS hack

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

Published by: jeffreybarke in The Programming Mechanism
Tags:

Comments

Dave Fletcher
March 28, 2007 at 1:50 pm

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!

Comments are closed.

Dave Fletcher
March 28, 2007 at 1:50 pm

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!

Comments are closed.

Ash Haque
April 3, 2007 at 9:12 pm

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”

Comments are closed.

Ash Haque
April 3, 2007 at 9:12 pm

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”

Comments are closed.

Hiren Mehta
July 10, 2007 at 7:23 am

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.

Comments are closed.

Hiren Mehta
July 10, 2007 at 7:23 am

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.

Comments are closed.

Jason Boychuk
July 19, 2007 at 2:26 pm

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

Comments are closed.

Jason Boychuk
July 19, 2007 at 2:26 pm

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

Comments are closed.

Dave Fletcher
July 30, 2007 at 2:38 pm

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

Comments are closed.

Dave Fletcher
July 30, 2007 at 2:38 pm

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

Comments are closed.

Chaz
December 13, 2007 at 10:08 am

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!

Comments are closed.

Chaz
December 13, 2007 at 10:08 am

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!

Comments are closed.

Parag
December 27, 2007 at 3:20 am

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

Comments are closed.

Parag
December 27, 2007 at 3:20 am

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

Comments are closed.

Jeffrey Barke
January 8, 2008 at 2:16 pm

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.

Comments are closed.

Jeffrey Barke
January 8, 2008 at 2:16 pm

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.

Comments are closed.

Egyptian Web Designer
May 3, 2008 at 11:47 pm

hi Jeffrey,

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

Thanks alot,

Mohammed

Comments are closed.

Egyptian Web Designer
May 3, 2008 at 11:47 pm

hi Jeffrey,

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

Thanks alot,

Mohammed

Comments are closed.

website design
May 5, 2008 at 5:24 am

Be careful with that hack 🙂

Comments are closed.

website design
May 5, 2008 at 5:24 am

Be careful with that hack 🙂

Comments are closed.

ecards
September 25, 2008 at 4:09 pm

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…

Comments are closed.

ecards
September 25, 2008 at 4:09 pm

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…

Comments are closed.

Sanath Peiris
January 30, 2009 at 12:39 am

Thank you

Comments are closed.

Sanath Peiris
January 30, 2009 at 12:39 am

Thank you

Comments are closed.