Two Methods for introducing CSS: The difference between link and @ import

The two methods for introducing css external files are link and src attributes on html pages (note the trap when there is no link !), In addition, it is introduced through the CSS file itself through @ import url (). Although both methods can be loaded into the CSS file, there are also slight differences between link and @ import.

Differences in affiliation

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. Note that when the link src of the browser is empty, the page loading times will increase.

@ Import limit

It is rumored that in IE6, @ import can only introduce 31 css files, but it can be vertically extended by re-importing in the css file. the Broken Bridge and residual snow have not been tested. However, if this happens, this shows that the person who writes the code is also abnormal.

Different Loading Sequence

When a page is loaded (that is, when it is browsed by a browser), the CSS file referenced by link will be loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes there will be no style when you browse the page where @ import loads CSS, and then the style will appear suddenly, and the speed is quite slow, @ import has the same effect as placing the CSS file at the end of the page. However, if some of our style start pages do not appear, but they only appear during interaction, you can use this method to introduce them, time. For example, Ajax html, interactive pop-up box, and div pop-up

Compatibility differences

Because @ import is proposed by CSS2.1, @ import can only be identified by IE5 and later versions, but the link label does not have this problem (it does not seem to affect much ~).

Differences when using DOM to control styles

When using javascript to control DOM (document. styleSheets) to change styles, you can only use link labels because @ import is not controllable by dom.

Therefore, we recommend that you use link to introduce styles without special cases. Avoid using @ import whenever possible. If Ajax or interactive styles are used, you can use @ import to introduce them.

Source: http://www.js8.in/554.html