[thelist] TIP: CSS Import - Hiding from Browsers

brian cummiskey brian at hondaswap.com
Thu Oct 14 12:10:54 CDT 2004


This was posted on the css-d list i'm (and im sure some of you folks 
are) on.  Figured it would make a good entry for the tip harvester here...



<tip author="Mitchell (WildRanger222222 at aol.com)" type="How to Hide Your 
Style Sheets from Browsers using Import" />

  "How to Hide Your Style Sheets from Browsers using Import"
  -----------------------------------------------
  Several people were asking about ways to hide certain style sheets 
from certain browsers. (Im sure most of us know these but sending them 
if it helps others.) This is a very powerful way to hide advanced styles 
from many of the older browsers, and will save you huge amounts of time 
trying to patch together design fixes for browsers which as a group are 
probably less than 5% of the browser demographics worldwide, if even 
that. Use these import "hacks" if you like and you will send those 
people just plain clean text, which is more usable in many cases anyway, 
than your  layouts.

Some of these @import rules actually allow you to hide your more 
advanced styles from Netscape 1-4 series, all MAC IE (4-5), and IE PC 
(3-4) in one fell swoop, freeing you from having to design for those 
browsers as a group. That leaves you with IE 5-6 in terms of major 
issues to address, and there are lots of hacks for those agents, if you 
choose to use those. Here is a sample list and a link to a very good 
chart of these and others that supports this information:

  /*@MPORT STYLE SHEET HACKS*/
  First, I recommend you use absolute paths for all paths and paths to 
background images, as well as keep all your styles in the same path or 
directory, otherwise causes problems in Netscape, plus re-caching of 
others. For a reference of which IMPORT structure works in which browser 
go here:

  Centricle: http://centricle.com/ref/css/filters/?whitebg

  1. @import '/styles/styles.css' - Viewed in all but NS4 or earlier 
(PC/MAC), IE4 or earlier (PC), all IE (all MACs only) [use to target IE 
5 PC]
  2. @import "/styles/styles.css" - Viewed in all but NS4 or earlier 
(PC/MAC), IE4 or earlier (MAC/PC) [use to target IE 5 PC/MAC]
  3. @import url(/styles/styles.css) - Viewed in all but NS4 or earlier 
(PC/MAC) [use to exclude NS4 PC/MAC]
  4. @import url('/styles/styles.css') - Viewed in all but NS4 or 
earlier (PC/MAC), all IE (all MACs only) [use to target all IE's PC only]
  5. @import url("/styles/styles.css") - Viewed in all but NS4 or 
earlier (PC/MAC) [use to exclude NS4 PC/MAC]
  6. @import "null?\"\{";
     @import "/styles/styles.css"; - Viewed in all but NS4 or earlier 
(PC/MAC), IE4 or earlier (MAC/PC), IE 5 (PC only) [use to target IE 5 MAC]
  7. @media all{(open comment) rules (close comment)} - Viewed in all 
but NS4 or earlier (PC/MAC), IE4 or earlier (PC), all IE (all MACs 
only), special browsers on new MAC OSX [use to target IE 5 PC]

  EXPERMIMENTAL....possibly hides styles from all IE 3-5 for MAC and PC 
and NS 4.8 and earlier...
  @import "null?\"\{";
  @import 'styles.css';

  *Other tricks for IE include "@media screen", and others which in some 
cases are also hidden from IE 5 and others. Because IE 5 for PC is the 
only browser In seeing with possibly 5% or greater market share online, 
thats the only agent I design for, and most others are version 1-5 are 
sent clean text only. Finally, alot of people are using IE's conditional 
statements (<!--[if IE5] apply this style [end if]-->), but Ive found 
its not very useful if you are managing thousands of web pages as its 
managed in the web page header, unless you are using includes or other 
form of inserting code on the server-side. The use of imports can be 
applied within the page or within a linked style sheet, making 
management easier. Hope that helps!

  Mitchell
  www.stormdetector.com

</tip>


More information about the thelist mailing list