[thelist] CSS: question about @import

aardvark roselli at earthlink.net
Thu Jul 25 15:00:01 CDT 2002

> From: "Chris W. Parker" <cparker at swatgear.com>
> as far as i know it's recommended to use the @import command to hide
> advanced css from older browsers, i.e. nn4.x.

that is my preferred method, yes...

> i haven't heard anything about WHY i need to hide it from older
> browsers. i'm guessing that the older browser could get even more
> screwed up when it comes across advanced css. if this is not the case,
> won't the older browser(s) just skip over the css it does not
> understand?

try this... take a table cell holding some content... have an image
in there with an align="right|left" attribute (or hell, no align at all)...
now add a line-height CSS property to the mix... watch it in

for this reason, all my line-height attributes sit in the CSS file that
gets called via @import... usually that file is less than 20 lines,
because it only brings in thing that outright break NN4.x...

> also, when you import an advanced stylesheet, does it override
> everything in the primitive stylesheet? or does it just add-on to it?

if you call the @import after the <link> then styles applied to the
same element (or with the same class/id/selector/etc.) in the
@import will override those in the <link>ed file...

so if you make your <h1> blue in the <link>ed CSS file, then make
it green in the @imported CSS file, the <h1> will appear green in
browsers that support @import as long as it's called after the
<link>ed CSS file...  NN4.x will show the <h1> as blue...

that help?  if you're still in doubt, make a test page and try it out...

> in conclusion, please point out WHY i need to seperate the two, or why
> it doesn't matter. (i.e. i can stick everything in one css file and
> let the browser deal with it.)

see above... if, for example, you have to support NN4.x *and* you
want line-height properties, that's a perfect case...

the same can be true with margin and padding attributes...

IOW, in a perfect world, you could just say screw it and go to
town... i've done that on my personal site (roselli.org/adrian), but on
a client site, that just wouldn't fly...

> references of course are welcomed.

stay on this list...

Read the evolt.org case study
Usability: The Site Speaks for Itself
ISBN: 1904151035

More information about the thelist mailing list