The specific difference between @import and link in CSS

We know that there are two ways to refer to external CSS in a Web page: @import and link

We also often hear people say that it's better to use link to introduce CSS, but do you know why? Keep looking down.

Link
Link is to connect the external CSS with the Web page.

@import
The difference between the import text and link is that it can introduce several other CSS files into a CSS file.

Why use @import
The majority of people who use the @import approach are because the old browsers do not support the @import approach, which means that we can use @import to introduce CSS styles that are only parsed by modern browsers.
Another major reason is when your Web page needs to introduce several external CSS files. You can use link to introduce a CSS, and then in this CSS file in the @import way to introduce a few other CSS files. This looks easier to manage.

Why use link
One of the main reasons for using link is that you can let the user switch CSS styles. Modern browsers such as Firefox,opera,safari support the rel= "Alternate stylesheet" property (you can choose a different style on the browser), Of course you can also use JavaScript to make IE also support user-replaceable styles.

@import little problem.
If your page head tag is very simple, only the @import attribute, when the user browsing speed is slow, he will see a no style style of the page, and then as the CSS file is downloaded to see the proper style. To avoid such problems, You need to make sure that there is at least one script or link tag in the head.
Update: @import will make the overall loading time of the CSS longer. And in IE, the file download order is changed, for example, the script file placed behind @import will be downloaded before the CSS.

In that way, exactly.
At the moment it seems that the small site is more appropriate (or more popular) to use link, of course, if we need to put the CSS in the future of modular management will certainly use @import.

Original: http://www.w3cfuns.com/forum.php?mod=viewthread&tid=262

The exact difference between @import and link in CSS