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

Author: webpage tutorial network source: Tianji net responsibility Editor: Sheng Xiaoying

There are two methods to reference external CSS in a webpage: @ import and link. It is often said that it is better to use link to introduce CSS. This article will briefly explain the differences.

　　Link:Link is used to connect external CSS with webpages.

　　@ 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
Rel = "Alternate
Stylesheet "attribute (you can select different styles in the browser). Of course, you can also use JavaScript to enable IE to support style change.

@ 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 should I use:

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, we must also use @ import.