On the difference between link and @import

In CSS operations, there are 2 ways to introduce CSS from the outside,link and @import.

Here are the differences between the two ways and the conclusion:

Difference:

1. Load Order
when the page loads,Linkthe CSS file introduced by the tag is loaded at the same time; @importThe imported CSS file will be loaded after the page has been loaded.

2. Compatibility
tags are HTML elements, There is no compatibility issue @import

3.link is a tag, you can load CSS files, you can also define RSS, rel connection properties, etc. ; @importis a grammar rule, only style sheets can be imported.

4. Whether you can insert a modified style with DOM actions.
The DOM can be used to insert the link tag to change the style, and @import cannot insert the style using the DOM method.

Conclusion:

It is strongly recommended that you use the link tag carefully using the @import tag.

This avoids @import resulting in a confusing download order of resource files and too many HTTP requests.