The difference between css import and link_Experience exchange

I saw that most of the pages on some websites are written like this



And many websites use link



Websites such as Google and Baidu 163 are written directly in the web page

Of course, the advantage of using link and import is that it is easy to maintain, but when the network speed is relatively slow, loading interruptions will occur, resulting in page layout errors

They have the same effect

The only difference is that the service objects are different

　@import serves CSS

　link serves the current page

　　 Some netizens said that @import will be executed first.

The difference between link and @import in external reference CSS

In the past two days, I just finished writing several ways to load CSS in XHTML. Among them, external reference CSS is divided into two methods: link and @import.

Essentially, these two methods are used to load CSS files, but there are still subtle differences.

Difference 1: The difference between ancestors. Link belongs to the XHTML tag, and @import is completely a method provided by CSS.
In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc. @import can only load CSS.

Difference 2: The difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing the page where @import loads CSS, there will be no style (it just flickers), which is quite obvious when the network speed is slow (the way to load CSS in Dream City is to use @import, I download and browse the Dream City web page at the same time) , the above problems will occur).

Difference 3: Difference in compatibility. Since @import was introduced in CSS2.1, older browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem.

Difference 4: The difference when using dom to control the style. When using JavaScript to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom.

These are the differences (if there are any other differences, please tell me and I will add them). Everything else is the same. From the above analysis, it is better to use the link tag.