Keep it Dark: Hiding and Filtering CSS

Published Wednesday, January 10, 2007 @ 11:45 am • 8 Responses

Hiding and filtering CSS rules for specifically targeted browsers is often a foregone conclusion when it comes to cross-browser design considerations. Rather than dive into some lengthy dialogue concerning the myriad situations and implications of such design hackery, our current scheduling restraints behoove us to simply cut to the chase and dish the goods. Having said that, we now consider this post a perpetually evolving repository of CSS filters..

Hide CSS from IE3, IE4, NS4

This method employs JavaScript to hide CSS from IE3, IE4, NS4, and any other browser that does not support document.getElementById. The script must be written as a single line. Backslashes must comment out slashes.

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(document.getElementById) document.write('<style type="text\/css"> h1 { color: red } \/* hides from old browsers *\/ <\/style>');

//--><!]]>
</script>

Hide CSS from NS6, Moz1, Op5.12, Op6.0

This method employs JavaScript to hide CSS from NS6, Moz1, Op5.12, Op6.0. The script must be written as a single line. Backslashes must comment out slashes.

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(!(document.getElementById&&!document.all)) document.write('<style type="text\/css"> h1 { color: green } \/* hides from NS6.1, Moz1.0 *\/ <\/style>');

//--><!]]>
</script>

Hide CSS from all IE < 7

This method employs downlevel-conditional comments¹ to hide CSS from all IE less than IE7. Extrapolation of this method provides CSS filtering for any specific version(s) of IE. Note: the last line of this method may result in validation errors¹.

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-hacks.css" media="screen" />
<![endif]-->

Likewise, downlevel comments may be used to filter scripts, markup, or just about anything.
In this case, a JavaScript file is hidden from all IE less than IE7:

<!--[if gte IE 7]>
<script src="http://domain.com/javascript.js" type="text/javascript"></script>
<![endif]-->

This example shows CSS hidden from any IE strictly less than IE6.0:

<!--[if gte IE 6.0]>
<style type="text/css">h1 { color: red }</style>
<![endif]-->

Hide CSS from NS4.x, IE3Win, IE4win+mac, IE5win, and IE6win

This method hides CSS from NS4.x, IE3Win, IE4win+mac*, IE5win, and IE6win. The method relies on the exclusion of quotes from the url() attribute:

<style type="text/css">
<!--
@import url(hidden.css) screen; /* hide from NS4.x, IE3Win, IE4win+mac, IE5win, and IE6win */
-->
</style>

* Note: IE4/Win will parse CSS when located in the same directory as the reference file. Further, this method fails with IE4.72/Win

Hide CSS from NS4

This method hides CSS from all NS4:

<style type="text/css" media="screen, projection">
<!--
.hidden {color: red } /* hides from NS4 */
-->
</style>

Hide CSS from NS4, IE4win+mac

This method hides CSS from NS4 and IE4win+mac:

<style type="text/css">
<!--
@import "hidden.css"; /* hides from NS4, IE4win+mac */
-->
</style>

Hide CSS from NS4, IE4win+mac

This method also hides from NS4 and IE4win+mac:

<style type="text/css">
<!--
.hidden {color: red } /* hides from NS4, IE4win+mac */
.pseudo {/* perhaps not needed */}
-->
</style>

Hide CSS from Opera 5, Opera 6, Opera 7

This method hides CSS from Opera 5, Opera 6, Opera 7:

<style type="text/css" media="sc&#82;een">
<!--
.hidden {color: red } /* hides from Opera 5,6,7 */
-->
</style>

Hide CSS from NS6.1 and Mozilla

Inserting a comment between an element and its associated class or id results in hiding the corresponding CSS from Netscape 6.1 and Mozilla:

<style type="text/css">
<!--
span/*comment*/.hidden { color: red } /* hides from NS6.1 and Mozilla */
-->
</style>

Hiding via the @import Directive

Hide CSS from NS4.x, IE3win, IE4win (not 4.72), IE4.01mac, IE4.5mac, Konq2.1.2, Amaya5.1win

This method hides CSS from NS4.x, IE3win, IE4win (not 4.72), IE4.01mac, IE4.5mac, Konq2.1.2, and Amaya5.1win. It employs the url() attribute with quotes:

@import url("style.css");

Hide CSS from NS4.x, IE3, IE4* (not 4.72)

This method hides CSS from NS4.x, IE3, IE4* (not 4.72). It employs the url() attribute without quotes:

@import url(../style.css);

* Note: IE4win will execute the CSS if its file is located within the same directory as the calling HTML file.

Hide CSS from NS4.x, IE6win and below

This method hides CSS from NS4.x, IE6win and below. It employs the url() attribute with the media attribute value set to screen:

@import url(style.css) screen;

Hide CSS from NS4.x, IE4win and below, IE4.01mac, Konq2.1.2

This method hides CSS from NS4.x, IE4win and below, IE4.01mac, Konq2.1.2. It employs the import directive without the url() attribute:

@import "style.css";

Hide CSS from specific (X)HTML tags

Listing more than one class name hides the CSS from that particular tag:

<div class="class1 class2">The CSS from either class will not affect this tag</div>

Target IE5/Win Only

Using the now-common mid-pass filter, it possible to target IE5/Win exclusively:

@media tty {
i{content:"\";/*" "*/}} @import 'ie5-win.css'; /*";}
}/* */

Target IE5/Mac Only

Using the now-common IE5/Mac band-pass filter, it is possible to target IE5/Mac exclusively:

<style type="text/css">
/*\*//*/
@import "ie5mac.css";
/**/
</style>

Target IE5/Win Only

Using the now-common IE5/Win band-pass filter, it is possible to target IE5/Win exclusively:

<style type="text/css">
@media tty {
i{content:"\";/*" "*/}}; @import 'styles.css'; {;}/*";}
}/* */
</style>

References

• ¹ Fun with Downlevel Conditional Comments
• Hiding CSS from Browsers
• Hide CSS from Different Browsers
• JavaScript Object Detection
• Browser Sniffing for User Agent Strings
• User Agent Strings and Object Detection

← Previous post • Next post →

« Memorable Quotes, Part 2 • Riding the Wave »