Difference between link and @improt

The difference between link and @import

1, different scopes

​ @import: Can be used in web pages or in CSS files to import multiple CSS files into one CSS file;

​ link: Only CSS files can be imported into web pages.

2, different functional scope

​ **@import:** is a way provided by CSS, only CSS can be loaded;

​ link: belongs to XHTML tags. In addition to loading CSS, link tags can also define RSS, define rel connection attributes, and so on.

3, different loading order

​ When a page is loaded,

​ @import: The CSS referenced will wait until the page is fully downloaded before being loaded.So sometimes when browsing @import and loading CSS pages, there will be no styles (that is, flickering), and it is quite obvious when the network speed is slow;

​ link: Referenced CSS will be loaded at the same time.

4. Compatibility

​ **@import :** is proposed by css2.1, so old browsers do not support it, and @import can only be recognized by IE5 or above;

​ link: tags do not have this issue .

5. Differences when controlling styles

​ link: This method allows users to switch CSS styles. Modern browsers such as Firefox, Opera, and Safari all support the rel=”alternate stylesheet” attribute (you can select different styles on the browser)), of course you can also use Javascript to make IE also support user changing styles

6, weight difference

​ The styles imported by link have more weight than those imported by @import