Recently, I am doing the review of knowledge system, and I will try my best to check and fill the gaps in the review. There’s a lot of talk on the web about the difference between @import and link import styles. There are several kinds as follows, but there will be some places where I doubt, we can discuss together.

The difference between

1. Affiliation differences

@import is a syntactic rule provided by CSS that only imports stylesheets; Link is an HTML-provided tag that not only loads CSS files, but also defines RSS, REL connection properties, and more.

2. Different loading sequences

When the page is loaded, the CSS introduced by the link tag is loaded at the same time. The CSS introduced by @import will be loaded after the page is loaded.

3. Compatibility differences

@import is a CSS2.1 syntax, so it can only be recognized in IE5+. The link tag, as an HTML element, has no compatibility issues.

4.DOM controllability differences

You can manipulate the DOM with JS and insert the link tag to change the style; Because DOM methods are document-based, you cannot insert styles using @import.

5. Weight difference

The style weight introduced by link is greater than that introduced by @import. (??)

When we search the Internet for the difference between the two, we often see the phrase number 5. Is this really the case with Article 5? Debatable.

So let’s just do a couple of demos to verify number five

Before we verify this, let’s talk about CSS weights:

The weight of the CSS refers to the priority of the selector. If the weight of the CSS selector is high, the selector has a high priority.

CSS precedence is reflected in the fact that, when setting elements for the same HTML element, different selectors have different priorities, and lower-priority styles will be overwritten by higher-priority styles.

The CSS weight priorities are as follows:

! Important > Inline Style > ID > Class, pseudo class, Property > Tag name > Inheritance > Wildcard

In order to understand the calculation method of weight, we conducted numerical hypothesis analysis in the following way:

The selector

The weight

The wildcard

0

The label

1

Class/pseudo class/property

10

ID

100

Inline style

1000

important

infinity

demo:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #myid { /* Background-color: pink; background-color: pink; } #divid. Myspan input {/* weighted 100 + 10 + 1 = 111 */ background-color: yellow; } input[type="button"] {/* 10 */ color: white! important; / *! } input. Myclass {/* this is a label specified selector, the weight is 1 + 10 = 11 */ color: black; } </style> </head> <body> <div id="divid"> <span class="myspan"> <input type="button" id="myid" class="myclass" Name ="myname" value=" myname" style=" color: green; > <! - style style has a weight of 1000 -- > < / span > < / div > < / body > < / HTML >Copy the code

Based on the above calculations, the button should have a yellow background and white font.

Which brings us back to our topic: Is the style weight introduced by Link really greater than @import?

Is there weight in the way CSS is introduced?

On the demo:

/* green.css */
div {
    background-color: green;
    border: 3px solid red;
}

/* yellow.css */
div {
    background-color: yellow;
    border: 3px solid black;
}

/* blue.css */
@import url("green.css");
div{
    background-color: blue;
}
Copy the code

Eg1.)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <! -- Example 1. Link tag importing yellow.css, CSS --> <link rel="stylesheet" href="yellow.css"> <style type="text/ CSS "> @import URL ("green.css"); </style> </head> <body> <div style="width: 50px; height: 50px;" ></div> <! </body> </ HTML >Copy the code

Effect:

Eg2.)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <! <style type="text/ CSS "> @import url("green.css"); </style> <link rel="stylesheet" href="yellow.css"> </head> <body> <div style="width: 50px; height: 50px;" ></div> <! </body> </ HTML >Copy the code

Effect:

In comparison with examples 1 and 2, link and @import are two ways of introducing CSS that have no concept of weights, but simply show cascading CSS lines. That is, the styles written behind will override the styles written before.

Eg3.)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <! <style type="text/ CSS "> @import url("green.css"); div { background-color: pink; } </style> </head> <body> <div style="width: 50px; height: 50px;" ></div> <! -- The box has a pink background and a red border, i.e. green.css, is in effect, but the background color is stacked with a pink inline style --> </body> </ HTML >Copy the code

Effect:

Eg4.)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <! -- Example 4. The link tag introduces blue.css, CSS --> <link rel="stylesheet" href="blue.css"> </head> <body> <div style="width: 50px; height: 50px;" ></div> <! -- The box has a blue background and a red border, i.e. green.css is in effect, but the background color is stacked blue by blue.css --> </body> </ HTML >Copy the code

Effect:

Analysis of the results of example 3 and 4 shows that:

For example 3, we see a red border, proving that the green-.css introduced with @import in the inline style is in effect, but its background style is overlapped by the pink background in the inline style. This phenomenon shows that @import is not just at the top of the inline style, as we see it. The style introduced is structurally, It is also placed before the inline style, so that the inline style can overlay it.

Similarly, in example 4, in the blue-.css file introduced by the link tag, there is also the green-.css introduced by @import at the top. The red border still shows that the green-.css is in effect, but its background style is overlapped by the blue background of blue-.css itself. The style introduced by @import is also placed before its own style in blue.css.

So it doesn’t make sense to say that link introduces a heavier style than @import.

Doubt?

We also talked aboutlinkand@importThe difference, when loading the page, is not said inlinkCSS styles will be introduced before@importTo load? That is whatlinkThe introduced style overwrites it@importIntroduced styles?

First, let’s review some concepts about browser execution:

Load: Resolves the domain name according to the requested URL, sends the request to the server, and receives the response file (such as HTML, CSS, JS, and images).

Parsing: Parses the loaded resources (HTML, CSS, JS, etc.) to build the internal data structure of the response (such as HTML DOM tree, JS object property sheet, CSS style rules, etc.).

Rendering: to build a rendering tree, to each element location calculation, style calculation, and then according to the rendering book to complete the layout of the page and the process of rendering (to produce the elements of the page).

So based on our understanding of browser execution above, we continue to ask the question:

Link loads before @import, does it also render before @import?

In fact, browser renders are usually performed multiple times. The last rendering of the page must be based on the integrated render tree of all the previously loaded styles. The page elements that have already been rendered will also be re-rendered.

In this case, the @import method can be interpreted as a substitution. When the CSS parsing engine parses a CSS file, if it encounters @import at the top of the file, it will replace all the styles in the imported CSS file with the @import.

Finally figured out why the styles that @import introduced were being layered. It is loaded later, but is placed at the top of the stylesheet when it is loaded, and is naturally layered with the same style below when it is rendered.