The difference between a CSS link and an import

Essentially, both of these approaches are meant to load CSS files, but there are subtle differences.

Difference 1: the difference between ancestors. Link is an XHTML tag, and @import is completely a way to provide CSS.

In addition to the link tag can be loaded CSS, but also can do a lot of other things, define the REL connection properties, etc.
@import can only load the CSS .

Difference 2: The difference in the loading order.

When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and @import referenced CSS waits until the page has been downloaded and loaded .

So sometimes browsing @import loading CSS page when there will be no style (that is flashing), the speed of the slow time is quite obvious.

Difference 3: differences in compatibility. Because @import is CSS2.1 proposed by the old browser does not support,@import only in IE5 above the ability to identify , and link tag does not have this problem.

Difference 4: The difference between using the DOM to control the style. When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM .

The difference between a CSS link and an import