CSS: What is the difference between @ import and link?

We often hear people say it is better to use link to introduce CSS, but do you know why? Continue to look down


Link
Link is to connect external CSS with Web pages.

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

Why use @ import?
Most people use the @ import method because the old browser does not support the @ import method. This means that we can use @ import to introduce CSS styles that are only parsed by modern browsers.
Another major reason is when several external CSS files need to be introduced to your webpage. you can use link to introduce a CSS file, and then use @ import to introduce several other CSS files. this seems easier to manage.

Why link?
One of the main reasons for using link is that you can allow users to switch CSS styles. modern browsers such as Firefox, opera, and Safari support the rel = "alternate stylesheet" attribute (you can select different styles on the browser ), of course, you can also use JavaScript to enable IE to change the style.

@ Import
If the head Tab Of Your webpage is very simple and only has the @ import attribute, when the user's network speed is slow, he will see a page with no style, after the CSS file is downloaded, you can see its style. to avoid this problem, make sure that there is at least one script or link tag in the head.
04-11 update: @ import will extend the overall loading time of CSS. in ie, the file download order will be changed. For example, the script file placed after @ import will be downloaded before CSS.

Which method is used?
At present, it seems that it is more appropriate for small websites to use link (or more popular). Of course, if we need to modularize CSS management in the future, @ import will be used.