Compare the differences between import and link in css

I saw that the Taobao web page uses import, and many websites use link. Of course, there are also some websites with relatively simple pages and high traffic that directly write CSS in the html code? What's the difference between them? Is it better to use import or link for css? I got a rough idea from the classic forum and another website

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



Many websites use link



And websites like Google, Baidu 163 and other websites are written directly in the web page

Of course, the advantage of using links and imports is that they are easy to maintain. But when the network speed is relatively slow, there will be loading interruptions, 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

Classically 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.

The above is the detailed content of Compare the differences between import and link in css. For more information, please follow other related articles on the PHP Chinese website!