What is the difference between a link and a @import URL when calling CSS?

The difference between loading CSS link and @import:

In fact, link and @import in the display effect is still very different, basically see link In addition will be in the page before all add in full, and @import will be read after the file is added, so if the network speed is very good or very fast situation, will appear first without CSS definition, The CSS definition is then loaded. @import the moment the page is loaded, it will blink (a page without a style sheet) before it returns to normal (the page after the style is loaded), and link does not have this problem.

They are the same way, just a bit of a gap in the browser recognition, link in support of CSS browser support and @import only in more than 5.0 version valid, but also can be used for browser filtering is the use of hack, compatible with some older versions of the browser. So it's better to use link general-purpose, but it's the same for a high-level browser, which is now a browser, which is a less significant distinction.

Exception a Description:

@import URL (/css/a.css) is simple, but there is a compatibility problem, in the FF can not invoke the style, we all think it is @import, but with link after the problem still appears. After some discussion, the absolute path is not recognized under FF.

Here's a summary of the @import URL ():

1, @import URL () mechanism is different from link, link is loading the page before the CSS loaded, and the @import URL () is loaded after reading the file, so there will be no CSS style at the beginning, flashing the appearance of the page after the style (slow speed).

2, @import is inside the css2, so the ancient IE5 does not support.

3, when using JavaScript to control the DOM to change the style, you can only use the link tag, because @import is not controlled by the DOM.

4,link can also define RSS in addition to the ability to load CSS, define rel connection properties, @import can only load CSS

So I think the best combination to use, such as: <link href= "Css/main.css" rel= "stylesheet" type= "Text/css" >

A main.css file is referenced, and the @import URL (footer.css) is referenced in main.css; @import url (head.css);

This achieves a clear and unambiguous role.

What is the difference between a link and a @import URL when calling CSS?