[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