You've got to hide your styles away! / journal / hicksdesign

11/08/03

You've got to hide your styles away!

No matter how you try and avoid it, you often get to the point where you need to hide CSS from a particular browser, because of a bug. Its 'not cricket' but they work, and they validate. So rather than being an article as such, what I've done here is gather all the various links for hiding CSS from browsers.

Opera - Owen Hack
IE 5 Windows Tantek Celik hack
Media Type Hack - Hide CSS from all versions of IE up to 6
IE 5 Mac - commented backslash hack
IE 5 Mac - alternative hack
Netscape 4 @import hack
Star 7 hack - affects Opera 7 amongst others
Safari - Escape Hack
Inline high pass filter hack - hides styles from browsers with poor CSS1 support
CSS Filters - Kevin Smith has put together a huge table of all the hacks, and you can see instantly which browsers it will affect.

Please let me know if you find any more!

Technorati Tags Tags: bugs, css, hacks, webstandards

Comments | RSS

Chris Neale said 1789 days ago:

I did a very quick hack of all the ways @import can be ignored :

http://flibble.mozdev.org/css/

any text which isn't the same colour as its word is the method ignored

I do need to improve on it, since it was a hack to find things out, not that I've consciously used this knowledge yet : )

Chris Neale said 1789 days ago:

improved

[ old version w/o code http://flibble.mozdev.org/css/1dex.hml ]

Taylor said 1787 days ago:

Kevin Smith has a really good listing here:

http://centricle.com/ref/css/filters/

Love your design and just subscribed to your feed :)

Jon Hicks said 1787 days ago:

That's one thorough article - thanks for the link! I hadn't seen that one before - I'll add it to the list.

Jan said 1697 days ago:

A title refferring to a Beatles song! Very interesting list.

Justin French said 1691 days ago:

Not sure I'd class @import as a hack — for starters, it's part of the W3 specs for CSS2.

Jon Hicks said 1691 days ago:

Sure, not really a hack, but its the title of the page I'm linking to.

jonasn said 1612 days ago:

Might be the wrong forum for this, but i wanted to tell anyway: We did it a different (somewhat ugly) way:

First: create a css file with php syntax, ie a php file that outputs css. Then: browser check (included at the end). This might not be the best solution, but works if:

* the css file has a .php extension
* the (css) php file is correctly formatted. We did it with loads of echo commands.
* The php file starts with header('Content-Type:text/css');. Without this, Mozilla-based browsers doesn't understand that it's really css.

browser check:
$msie='/msie\s([5-9])\.?[0-9]*.*(win)/i';
$opera='/opera\s+[0-9]+/i';
if(!isset($_SERVER['HTTP_USER_AGENT']) || !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) || preg_match($opera,$_SERVER['HTTP_USER_AGENT']))
{
//Non-IE stuff here
}

else {
//IE stuff here. For example the DX PNG filter.
}

Note: I did not create this browser check. I will try to find out who did and credit him/her appropriately.

Thanks for some great articles. Will study vertical centering tomorrow. :)