@import vs link?

[lexus]

What is the difference between using @import vs. linking a style sheet? I thought I understood it but I am finding I can't explain it to students clearly. The simpler the explanation, the better!

Thanks in advance!

**Quiquid latine dictum sit altum viditur.**

 

[Vragabond]

There is no clear difference. It is two different methods to do the same thing. The advantage of @import is that it is not supported in the old browsers, so you can load a modern stylesheet without the fear of upsetting old browsers trying to render it and leave those unstyled. However, it seems that @import is executed after the page has loaded and link is executed right away. That means that with larger stylesheets, users can see the unstyled version for a split second when using @import. I don't know how many occurences of this are there or how browser independent the problem is (you will most likely spot it in IE) or even how much does @import attribute to that, so it is hard to say @import is not recommended because of that.

All that said, it is down to personal preference what you want to use. I use link.

 

[lexus]

Thanks! Very clear...Appreciate it!

**Quiquid latine dictum sit altum viditur.**

 

[ChrisHunt]

One is CSS, the other is (X)HTML. You use @import inside a style sheet (or <style> element) to import one bit of CSS into another. You use <link> in an (X)HTML document to attach a CSS style sheet to it.

As Vrag says, in the olden days we used to use @import to ensure that Netscape v4 didn't see any CSS at all - as it's implementation was so bad that totally unstyled documents were preferable. The Flash of unstyled Content was an unwelcome side effect of this technique in some browsers. Since NS4 is totally dead now, I'd advise using <link>.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TamedTech]

Yeah i would agree with both of your guys,

I would use the @import for linking or organising my CSS files into a tree.

Have a look at the

http://www.macromedia.com

to see the @import being used, you'll find that the page somtimes takes a second or two to load the styles.

When you look in the CSS file you'll see that it sometimes drills down several levels using the @import feature.

Rob

 

[lexus]

Ok..I have been teaching html and css etc for about 9 years now and never used the @import. I noticed it in a macromedia webinar i was taking yesterday and have seen it before but just never used it. They weren't using it inside another style sheet but on a regular html page, along with linking to a style sheet. I guess that's what confused me. @import along with links to a style sheet on the same html page.

Aren't ya glad I asked? I guess I will continue just using the link feature and not even tell my intro to css adults about @import.

Thanks!

**Quiquid latine dictum sit altum viditur.**