Difference between link and @ import in CSS

In the past two days, I have just written several methods for loading CSS in XHTML. The external reference CSS is divided into two methods: link and @ import.

Essentially, both methods are used to load CSS files, but there are still slight differences.

Difference 1: The old ancestor's difference. Link is An XHTML label, and @ import is a method provided by CSS.

In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.

Difference 2: the order of loading is different. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow (mengzhidu loads CSS by using @ import, the above problem occurs when I download and browse the dream capital web page ).

Difference 3: Differences in compatibility. Because @ import is proposed by CSS2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.

Difference 4: differences when using dom to control styles. When using javascript to control the dom to change the style, only link labels can be used, because @ import is not controllable by dom.

Basically, there are several differences (if there are any differences, let me know and I will add them). The others are the same. From the above analysis, it is better to use the link label.

When creating and loading CSS files for standard web pages, you should also select the media to be loaded, such as screen, print, or all. I will introduce it to you in the CSS advanced tutorial.

Note:

1. comehope raised another difference in the message.

Difference 5: @ import can introduce other style sheets in css again. For example, you can create a primary style sheet and then introduce other style sheets in the primary style sheet, for example:

Main.css
--------
@ Import into sub1.css ";
@ Import into sub2.css ";

Sub1.css
--------
P {color: red ;}

Sub2.css
--------
. Myclass {color: blue}

This is more conducive to modification and expansion.