Jan 22/2010 UPDATE: this bug is no longer present in Safari 4.0.4 or Chrome 3.0.195.38

This web page was built in February 2009 using Safari/Win 3.2.1 and Chrome 0.4.154.29. Safari and Chrome shared a bug that could lead to a method of sending different styles to Safari/Chrome vs. other browsers by way of a hack, without Javascript. This bug has been fixed, so what follows on this page is now obsolete.

The background color of this box used to appear orange in most browsers, but green in Safari and Chrome.

This hack came from http://www.stuffandnonsense.co.uk/archives/hide_css_from_safari.html

Here are the styles in the header that make this work. The first styles are overridden by the second ones in browsers that don't have the bug, so put the Safari/Chrome styles first, and then override them below.

<style type="text/css">
/* put Safari/Chrome styles here */
#testbox {background:lime;}
</style>

<style>
@media all {
@import url(dummy.css);  /* css file does not exist */
/* put styles here to override the Safari/Chrome styles */
#testbox {background:orange;}
}
</style>

Chances are, this bug will be fixed eventually, so use at your own risk. Tested in Safari/Win 3.2.1 and Chrome 0.4.154.29 in February 2009.

Here is another method of accomplishing the same thing that uses Javascript It does not rely on a bug, but is still not a very robust method because there is no way of future proofing it.

Return to tightCSS Home Page