Skip to content


Code: importFilter

Here’s a cool way that you can serve your CSS to only modern browsers without having to write and include some crazy JavaScript sniffer.

Basically you use the @import link technique to load in your CSS but you make your syntax for the link code look something like this:

  1. <style type="text/css">
  2. @import"/css/styles.css";
  3. </style>

Obviously, you’ll need to replace the css/styles.css part with the actual path to your CSS file.

Some things that you will notice is that there is no space between the word import and the first quote. This is intentional as this is what causes some browsers to skip over the import code altogether.

By using this technique the only browsers that will be able to view the CSS file will be:

  • All Mozilla 0.6+
  • Win IE 5.5+
  • Win Opera 3.5+
  • OSX/Mac Opera 5.0+
  • OSX Safari 1.x+
  • MSN for OSX
  • OSX OmniWeb 4.1+

And here is a list of the browsers that will not be able to view the CSS file:

  • Win IE 4.0 – 5.0
  • OSX IE 5.x
  • Mac IE 4.0 – 5.x
  • All NS 4.x
  • OSX iCab 2.x
  • Konqueror 2.2 – 3.x

You can find a ton of other cool filtering techniques over at centricle.



RSS | valid XHTML & CSS | Powered by TXP

©1992-2008 qrayg.com | all rights reserved.