A brief discussion on the difference between link and @import

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

The following are the differences and conclusions between the two methods:

Difference:

1. Loading sequence
When loading the page, link tag introduced CSS files are loaded simultaneously; @import introduced The CSS file will be loaded after the page has finished loading.

2. Compatibility
link tag is HTML element, no compatibility issues；@import Yes The syntax is only available in CSS2.1, so it can only be recognized by IE5+.

3. link is a label that can be loaded CSS files, you can also define RSS, rel connection attributes, etc. ; @import is a grammatical rule, only styles can be imported surface.

4. Whether DOM operations can be used to insert and modify styles.
You can operate the DOM through JS to insert the link tag to change the style, but @import cannot use the DOM method to insert the style.

Conclusion:

It is strongly recommended to use the link tag and use the @import tag with caution.

This can avoid @import from causing confusion in the download order of resource files and too many HTTP requests.

The above is the detailed content of A brief discussion on the difference between link and @import. For more information, please follow other related articles on the PHP Chinese website!