<link> vs. @import

Do both get cached equally?

[MatthewHSE]

I've been trying to get specific information about this for some time but the answer seems to be illusive, even after several site searches here . . .

I know the content of the <link> tag gets cached by most (all?) browsers and thus only needs to be downloaded once. But what about the @import method of calling a stylesheet? Will that cache just like <link> will do?

The idea is to call as little CSS per page as necessary, depending on page features. But if @import isn't cached, I may just opt to do one large CSS file and call it with the <link> tag.

[drbrain]

I have not noticed, when watching server logs, Mozilla re-fetching style sheets that are @import'd from inside a <link>'d style sheet. I would be very surprised if they were not cached the same.

The benefit that using <link> gives you is that you can specify alternate style sheets and switch between them. Other than that, they should be completely identical.

[TheDoctor]

My understanding is that browsers wil try to cache as much as possible in order to minimise download time. This is going to be the case with all files, regardless of type (.html, .css, .wav, .whatever) or how the file is referenced.

[frank_stahl]

As is the case with <link>, @import also recognises media types:

<style type="text/css">
<!--
@import url(druck.css) print, embossed;
@import url(pocketcomputer.css) handheld;
@import url(normal.css) screen;
-->
</style>

Sometimes you would use @import rather than <link> to prevent older browsers like Navigator 4.x to see the stylesheet at all.

[annej]

If you go with import be aware of the dreaded 'flash of unstyled content'. If you see it on a slow dial up it really looks awful. You can read more about it at [bluerobot.com...] .

I've done a combination of 'link' for the basics (color, font, etc) and 'import' for positioning, etc. Having 'link ' in there with 'import' stops the flash.