Safari CSS Hack

Friday, November 11, 2005 by Nicholas Gagne

Although I don't condone the use of CSS hacks, I know that someone may find this useful. I haven't seen this hack (or any Safari hack) before, so I decided to put it out there.

In your stylesheet, if you place the pound sign (#) after a semi-colon (;), all styles within those brackets and thereafter will be ignored in Safari. If you are using Safari the background of the box below will be green, otherwise it will be red.

<div id="testBox">
    <p>The background color of this box will appear
        green in Safari and red in other browsers.</p>
</div>

Here is what the CSS code looks like:

#testBox{
    background:#063
}
#testBox{
    // Safari won't read the next line
    // because of the floating pound sign
    background:#c00;
    #
}

Notice the pound sign highlighted in blue. Most browsers will ignore this and continue reading the CSS, but in Safari it will cancel all styles within its containing brackets and all styles after that. Of course, this will not validate in CSS validators, so use at your own risk.