Difference between @ import and link when CSS is used for external reference

Differences between link and @ import in CSS for external reference

There are two external reference methods for CSS: link and @ import. Essentially, both methods are used to load CSS files, but there are still slight differences.

Difference 1:

Link is An XHTML label, and @ import is a method provided by CSS.
In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.

Difference 2:

The differences in the loading sequence. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow.

Difference 3:

Compatibility differences. Because @ import is proposed by css2.1, it is not supported by the old browser. @ import can be identified only when it is later than ie5, but the link label does not have this problem.

Difference 4:

Differences when using Dom to control styles. When using JavaScript to control the Dom to change the style, only link labels can be used, because @ import is not controllable by Dom.