A Deeper Look at the Differences Between Link and @import

There are three main ways to use CSS in a page: adding style attribute values inline, calling them inline in the page header, and calling them through external links. There are two types of external references: link and @import. There are two ways to reference CSS externally: link and @import:

XML/HTML Code

Copy code

The code is as follows:

XML/HTML Code

Copy code

The code is as follows:

Both are ways of externally referencing CSS, but there are some differences :

Difference 1: link is an XHTML tag. In addition to loading CSS, it can also define other things such as RSS; @import belongs to the CSS category and can only load CSS.

Difference 2: When link references CSS, it is loaded at the same time as the page is loaded; @import needs to be loaded after the page is fully loaded.

Difference 3: link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.

Difference 4: ink supports using Javascript to control DOM to change styles, while @import does not.

Supplement: Optimal writing method for @import
There are generally the following ways to write @import:

@import 'style.css' // Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 do not recognize
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 do not recognize
@import url(style.css) //Windows NS4, Macintosh NS4 does not recognize
@import url('style.css') // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 do not recognize
@import url("style.css") //Windows NS4, Macintosh NS4 do not recognize From the above analysis, we know that @import url(style.css) and @import url("style.css") are the best choices, with the most compatible browsers. From the perspective of byte optimization, @import url(style.css) is the most recommended.

The difference between link and @import in external reference CSS

I just finished writing several ways to load CSS in XHTML these two days. Among them, external references to CSS are divided into two ways: link and @import.
Essentially, both methods are for loading CSS files, but there are subtle differences.
Difference 1 : The difference between our ancestors. link is an XHTML tag, while @import is completely a method provided by CSS.
In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc., while @import can only load CSS.
Difference 2 : Difference in loading order. When a page is loaded (that is, when it is browsed by the viewer), the CSS referenced by the link will be loaded at the same time, while the CSS referenced by @import will wait until the entire page is downloaded before being loaded. So sometimes when you browse a page that uses @import to load CSS, there will be no style at first (it will flicker), and it is quite obvious when the network speed is slow (Dream City loads CSS by using @import. When I browse the Dream City webpage while downloading, the above problem will occur).
Difference 3 : Difference in compatibility. Since @import was proposed in CSS2.1, it is not supported by older browsers. @import can only be recognized by IE5 and above, while the link tag does not have this problem.
Difference 4 : Difference when using DOM to control styles. When using javascript to control dom to change the style, you can only use the link tag, because @import is not controllable by dom.
These are basically the differences (if there are any other differences, please tell me and I will add them), the rest are the same. From the above analysis, it is better to use the link tag.
When loading CSS files in standard web page creation, you should also select the media to be loaded, such as screen, print, or all. I will introduce this to you in the CSS advanced tutorial.
Note:
1. Netizen comehope pointed out another difference in his message.
Difference 5: @import can be used to import other style sheets into CSS. For example, you can create a main style sheet and import other style sheets into the main style sheet, such as:
main.css

Copy code

The code is as follows:

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

This is more conducive to modification and expansion.
Monkey Tip: There is a disadvantage of doing this, which is that it will generate too many HTTP requests to the website server. Previously it was one file, but now it is two or more files, which increases the pressure on the server. It should be used with caution for websites with a large number of visitors. If you are interested, you can look at the homepage or column homepage code of websites like Sina. They always write CSS or JS directly in HTML without using external files.

<<: The functions and differences between disabled and readonly

>>: How to find and delete duplicate rows in MySQL