We know that there are two ways to reference external CSS in web pages, namely: @import and link. We often hear people say that it is better to use link to introduce CSS, but do you know why?
link
Link is to connect external CSS to web pages. The specific form is
@import
The difference between import and link is that it can introduce several other CSS files into one CSS file. The specific form is
Why use @import
Most people use @import because old browsers do not support @import, which means we can use @import to introduce CSS styles that only modern browsers can parse.
Use the following code to prevent browsers IE6 and below from parsing the CSS (the methods below IE6 are in disrepair and will be omitted here)
@import url(../style.css) screen; Another main reason is when your web page needs to introduce several external CSS files. You can use link to introduce a CSS, and then use the @import method in this CSS file Introduce several other CSS files. This looks easier to manage.
Why use link
One of the main reasons for using the link method is that you can allow users to switch CSS styles. Modern browsers such as Firefox, Opera, and Safari all support the rel="alternate stylesheet" attribute (that is, you can choose different styles on the browser). Of course, you You can also use Javascript to enable IE to support users changing styles.
If you don't understand, please enter this page and click "View - Page Style" in Firefox.
Small problems with @import
If the head tag of your web page is very simple, with only the @import attribute, when the user browses on a slow Internet speed, he will see a page without styles, and then he can see the page as the CSS file is downloaded. style. To avoid such problems, you need to ensure that there is at least one script or link tag in the head.
04-11 Update: @import will make the overall loading time of CSS longer. And it will cause the file download order to be changed in IE. For example, script files placed after @import will be downloaded before CSS.
For details, please refer to http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Which method should be used?
At present, it seems that link is more suitable (or more popular) for small websites. Of course, if we need to modularize CSS in the future, we will definitely use @import.