Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer): perishablepress.com/wordpress-… #WordPress #security #html
Perishable Press

Keep it Dark: Hiding and Filtering CSS

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

Here are some CSS techniques that use @import to help do the job.

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 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");

Other CSS techniques

Here are some additional CSS techniques for your consideration.

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>

Related Resources

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
10 responses
  1. Hide css from IE7 (and of course othe IEs, too!)

    html>/**/body { }

    Can’t remember where I found that one.
    Works like a charm.

    Kind regards,
    mtness

  2. Jeff Starr

    Thanks for the tip! I am working on an IE7 hacks article and will definitely add this to the list. You can never have too many hacks for good ‘ol Internet Explorer!

  3. hi there again!
    just to explain this hack in full:

    htlml>/**/body foo { bar }
    where *foo* is a css class or id or selector and
    *bar* a css statement like font-size

  4. Jeff Starr

    Ah, very nice — very thoughtful of you to drop in again to share the details behind the IE7 hack. Do you happen to know if it passes W3C validation? That would be icing on the cake..

  5. Hi there again!

    I just dropped by with good news:
    This hack passes W3C validation!

    html>/**/body #content { height: 235px; }
    /* hide css from IE7! */

    renders to:
    html > body #content { height : 235px; }

    That’s it.

    Another nice link for ya:
    http://pornel.net/firefoxhack

    target FF only:
    #hackme, x:-moz-any-link {styles for Firefox 2.0 here}

    #hackme, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}

    works like a charm, too.
    This one doesn’t validate, coz -moz-any-link is an unknown pseudo-element or pseudo-class.

    Kind regards,
    mtness

  6. Jeff Starr

    Ahh, so good to see you again!
    Your site is looking better than ever..
    I found myself actually enjoying the Internet there for awhile.. but, alas, back to the grind!

    Thanks for hooking us up with even more tasty Firefox hacks. I look forward to returning to this post in the near future to dig into some of the juicy details.

    Muchas gracias, señor!
    m0n

  7. does anyone know a way of hiding javascript from ie 5 mac…

    jquery seems to be crashing the browser and I’d prefer to just have it hidden from ie mac users,

    thanks. Iain.

  8. Jeff Starr

    Hi iain,

    Beyond testing for specific functional support via if(function.name), you may have no choice but to journey into the dark realms of “browser detection”.. ;)

    May the force be with you.

    Always.

  9. Hi there again!

    Long time no see ;-)

    It seems that this hack stopped working in vista ie7…
    But then again, vista make it nearly impossible to install ie6.

    My website is currently under reconfiguration, I will tell you when its (re)done.

    Kind regards, mtness

  10. Jeff Starr

    Hi mtness! Great to hear from you again! I haven’t had a chance yet to work on IE7/Vista.. which hack is no longer working? Looking forward to your new design — definitely let me know after the renovation is complete!
    Cheers,
    Jeff

[ Comments are closed for this post ]