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