CSS loading mode link and @import the difference!

Essentially, both of these approaches are meant to load CSS files, but there are subtle differences.

1. The differences between ancestors. Link is an XHTML tag, and @import is completely a way to provide CSS. In addition to the link tag can be loaded CSS, but also can do a lot of other things, such as the definition of RSS, the definition of REL connection properties, @import can only load CSS.

2. Differences in loading order. When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and the CSS referenced by @import waits until the page has been downloaded and loaded. So sometimes browsing @import loading CSS page when there will be no style (that is flashing), the speed of the slow time is quite obvious.

3. Differences in compatibility. Because @import is CSS2.1 proposed by the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem.

4. Use the DOM to control the differences in style. When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM.

@import can introduce another style sheet in the CSS, such as creating a main stylesheet and introducing other stylesheets into the main style sheet, such as:

　　

123456789101112

main.css   ———————-   @import “sub1.css”;   @import “sub2.css”;      sub1.css   ———————-   p {color:red;}      sub2.css   ———————-   .myclass {color:blue}

This is more conducive to modification and extension.

Roughly the difference, the others are the same, from the above analysis, or using the link tag is better. Standard Web page when you load a CSS file, you should also select which media to load, such as Screen,print, or all of them.

Tip: There is a drawback to this, will produce too many HTTP requests to the Web server, formerly a file, and now is two or more files, the pressure of the server, the large number of Web sites are still cautious use. Interested can look at such as Sina, such as the homepage of the website or the column home code, they will always put CSS or JS directly in the HTML, rather than external files.

CSS loading mode link and @import the difference!