The difference between CSS Import and link _ experience Exchange

Source: Internet
Author: User
See most of the pages in some Web sites written like this

<style type= "text/css" media= "screen" >
@import url ("Http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css");
</style>

And a lot of websites are using link

<link rel= "stylesheet" rev= "stylesheet" href= "Default.css" type= "Text/css" media= "All"/>

And like Google Baidu 163 and other sites they are directly written in the Web page

Of course, the advantage of linking link and import imports is easy to maintain, but when the speed is slow, there will be load interruption, resulting in page typesetting error

They work the same thing.

The only difference is that the service object is not the same

@import for CSS Services

Link is a service for the current page

A classic Netizen said @import will give priority to implementation.

The difference between link and @import in external referencing CSS

These two days just finished the XHTML loading CSS in several ways, where the external reference CSS is divided into two ways link and @import.

In essence, both of these methods are meant to load CSS files, but there are subtle differences.

Difference 1: The difference between the ancestors. Link is an XHTML tag, and @import is a completely CSS-provided way.
In addition to loading CSS, link tag can do many other things, such as defining RSS, defining rel connection properties, @import can only load CSS.

Difference 2: The difference in load order. When a page is loaded (that is, when viewed by a viewer), link-referenced CSS is loaded at the same time, and @import-referenced CSS waits until the page is all downloaded and loaded. So sometimes browsing @import load CSS page will start without style (is flashing), slow speed when the network is quite obvious (the dream is loaded with CSS is the way to use @import, I download while browsing the dream of the Web page, it will appear above problems).

Difference 3: Compatibility difference. Because the @import is proposed by the CSS2.1, so the old browser does not support, @import only in IE5 above the ability to identify, and the link label does not have this problem.

Difference 4: The difference between using the DOM to control the style. When you use JavaScript to control the DOM to change the style, you can only use the link tag, because @import is not a DOM control.

Roughly on these kinds of differences (if there is any difference, you tell me, I add up), the other is the same, from the above analysis, or use link tag better.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.