In terms of compatibility

@import is a CSS2.1 syntax, so it can only be recognized in IE5+. The link tag, as an HTML element, has no compatibility issues.

In terms of the loading order

When the page is loaded, the CSS introduced by the link tag is loaded at the same time. The CSS introduced by @import will be loaded after the page is loaded.

In terms of function

@import is a syntactic rule provided by CSS that only imports stylesheets; Link is an HTML-provided tag that not only loads CSS files, but also defines RSS, REL connection properties, and more.

In terms of DOM controllability

You can manipulate the DOM with JS and insert the link tag to change the style; Because DOM methods are document-based, you cannot insert styles using @import.

conclusion

  1. linkisHTMLWay,@importIs the CSS style
  2. linkMaximum support for parallel downloads,@importExcessive nesting causes serial downloads to occurFOUC(Document style is temporarily invalid)
  3. linkCan be achieved byrel="alternate stylesheet"Specifying candidate styles
  4. The browser tolinkSupport earlier than@import, you can use@importHide styles from older browsers
  5. @importYou can reference other files in the CSS file before the style rule
  6. In general:linkBetter than@import