Shulou(Shulou.com)06/01 Report--

This article is about the sample analysis of @ layer in CSS3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Problems in past CSS priorities

If there are a lot of styles on our page, for example, there are custom styles when we developed the page, and there are also introduced component library styles. At this point, the style will be very confusing and difficult to manage.

When we want to overwrite styles that are not written by ourselves, we often have to overwrite those styles by using style names with higher priority weights.

At the same time, when the style priority is difficult to control, developers are used to abusing it! important to solve, which in turn leads to a more chaotic style structure.

Based on the background of better control and management of CSS, CSS @ layer came into being.

What is CSS @ layer?

CSS @ layer is defined by the specification from CSS Cascading and Inheritance Level 5.

What is CSS @ layer? Simply put, @ layer in the CSS @ rule declares a cascading layer, and rules within the same layer will be cascaded together, giving developers more control over the cascading mechanism.

The grammar is also very simple. Look at an example like this:

@ layer utilities {/ * create a cascading layer called utilities * /}

In this way, we create a @ layer cascading layer called utilities.

How can the @ layer cascading layer be used?

Manage style priorities through @ layer cascading layers

The greatest function of the @ layer cascading layer is to control priorities between different styles.

Looking at the following example, we define two @ layer cascading layers An and B:

Div {width: 200px; height: 200px;} @ layer A {div {background: blue;}} @ layer B {div {background: green;}}

Because @ layer B comes after @ layer A, all styles in @ layer B have higher priority than @ layer A, and the final color of div is green:

Of course, if there are too many @ layer in the page, it may not be easy to remember the order of all @ layer, so there is another way to write it.

We can name multiple @ layer layers at the same time, and then supplement the style rules in them.

Layer B, C, Aten div {width: 200px; height: 200px;} @ layer A {div {background: blue;}} @ layer B {div {background: green;}} @ layer C {div {background: orange;}}

In the above code, we first define the @ layer B, C, A three @ layer cascading layers. The CSS code for each cascading layer is then added to the later CSS code, but the priority of the style is:

A > C > B

Therefore, the color value of the final div is the color defined in @ layer A, which is blue:

At this point, the role of CSS @ layer can be clearly seen.

With CSS @ layer, we can put different modules of CSS into different @ layer, using the sequence to control the global style priority very well.

Three ways to introduce the definition of @ layer cascade layer

In fact, I mentioned two ways to introduce the definition of @ layer cascading layer. Here again, there are three ways to introduce CSS @ layer cascading layer.

1. Directly create a @ layer rule at the block level, which contains the CSS rules that act within the layer:

@ layer utilities {p {padding: .5rem;}}

2. A cascading layer can be created by @ import, and the rules exist in the introduced stylesheet:

@ import (utilities.css) layer (utilities)

3. Create a named cascade layer, but do not specify any style. Styles can then be added anywhere within the CSS:

@ layer utilities;//... /... @ layer utilities {p {color: red;}} non-@ layer wrap layer and @ layer layer style priority

Of course, there is also a situation in which a style that is not wrapped by @ layer compares with the style wrapped by @ layer.

Look at an example like this:

@ layer A {a {color: red;}} @ layer B {a {color: orange;}} @ layer C {a {color: yellow;}} a {color: green;} / * style not wrapped by @ layer * /

A very important conclusion here is that the style of a non-@ layer package has a higher priority than the @ layer package style, so the sorting of the above rule is:

Styles that are not wrapped by @ layer > @ layer C > @ layer B > @ layer A

Anonymous layer and nesting layer

There are also two hierarchical relationships, the anonymous layer and the nested layer.

Anonymous layer

Allows you to create an unnamed @ layer:

@ layer {p {margin: 1remt;}}

Here, an anonymous layer is created. Two important features of the anonymous layer:

Rules cannot be added to it after creation

This layer has the same function as other named layers, and its priority also follows the later defined anonymous layer, which is higher than other defined @ layer layers.

Look at an example:

Div {width: 200px; height: 200px;} @ layer {div {background: pink;}} @ layer B, C, background player A {div: blue;}} @ layer B {div {background: green;}} @ layer C {div {background: orange;}}

In the above code, we first define an anonymous layer, specify the color of div as pink, and then define @ layer B, C, A. The order of priority here is:

A > C > B > Anonymous layer

The final color is the color value in @ layer A-- blue:

If we put anonymity at the end:

Div {width: 200px; height: 200px;} @ layer B, C, background player A {div: blue;}} @ layer B {div {background: green;}} @ layer C {div {background: orange;}} @ layer {div {background: pink;}}

At this point, the priority order of styles is:

Anonymous layer > A > C > B

The final color is the color value within the anonymous layer-pink:

Nesting layer

After talking about the anonymous layer, let's take a look at the nested layer.

As the name implies, the nested layer means that within @ layer, we can use the @ layer cascading layer again. Like this:

@ layer A {@ layer B {...}}

Of course, it has another syntax, and the above code is equivalent to:

@ layer A.B {...}

After learning this, then, look at an example like this:

Div {width: 200px; height: 200px;} @ layer A {div {background: blue;} @ layer B {div {background: red;}

We nest a @ layer B in @ layer An and define a style for div. What color is the background of div in the end?

It ends up with blue background: blue. Why? This is a good memory. Let's assume that if there is no @ layer A layer package, it is actually the priority of the @ layer layer compared to the non-@ layer layer, where the non-@ layer layer (which we can understand as a higher-level layer @ layer) has higher priority.

Therefore, for nested relationships within a single @ layer, the style priority is:

@ layer A > @ layer A.B

Priority relationship of multi-layer nesting layer

OK, take another look at this situation:

Div {width: 200px; height: 200px;} @ layer A {div {background: blue;} @ layer B {div {background: red;}} @ layer C {div {background: yellow;} @ layer D {div {background: green;}

There is a situation where multiple nested @ layer exist at the same time. So how do you prioritize this situation?

The rule here is that @ layer with high priority is generally higher than @ layer with or without nesting, regardless of whether there is nesting or not, so the priority here is:

@ layer C > @ layer C.D > @ layer A > @ layer A.B

! important's influence on CSS @ layer

Take another look at the impact of important on CSS @ layer.

Here can be divided into several situations, first look at one of them:

Div {width: 200px; height: 200px; background: black;} @ layer A {div {background: blue;} @ layer B {div {background: red;} @ layer C {div {background: yellow;} @ layer D {div {background: greenbelt importance;}

In the above code, we added a! important rule to @ layer C.D.

If, do not consider the important rule, then the actual CSS priority is (the higher the sequence number, the higher the priority):

@ layer A.B

@ layer A

@ layer C.D

@ layer C

Non-layer package block

Then, the color should be black black. However, a! important rule has been added to @ layer C.D.

In fact, the final color is green, that is, the final priority is (the higher the sequence number, the higher the priority):

@ layer A.B

@ layer A

@ layer C

Non-layer package block

! @ layer C.D under important

In other words, here! the important rule still takes precedence over the non -! important rule.

The above DEMO is quite interesting, if you are interested, you can take a look at: CodePen Demo-- CSS Cascade @ layer Demo

Https://codepen.io/Chokcoco/pen/KKZKBRr

Non @ layer contains blocks! important and @ layer contain blocks! important

When you get here, you may think you understand. OK, let's take a look at another DEMO, and if we include a non-@ layer block with a! important rule, things get interesting.

Div {width: 200px; height: 200px; background: blacklisted important;} @ layer A {div {background: blue;} @ layer B {div {background: red;} @ layer C {div {background: yellow;} @ layer D {div {background: greenbelt important;}

Take a closer look at the above code, non-@ layer contains blocks, and we also add a! important rule. According to the rules I can describe above, non-@ layer contains blocks have higher priority than @ layer containing blocks, so normally, it is not difficult to guess that background: blacklisted blocks should have a higher priority than background: green blocks, and should eventually show black.

In fact, the final color here is green. Here is another very interesting point of knowledge,! the rules of style priority under important are just the opposite under normal state of important.

This is a very important feature. When comparing normal (non -! important) rules, the more cascading (the later @ layer rule), the lower the priority; conversely, when comparing! important rules, the lower the cascading (the latter @ layer rule), the higher the priority.

Well, to go a step further, we need to know something about CSS Cascading.

CSS Cascade specification

Before CSS @ layer, let's take a brief look at a picture:

The surface of the image above shows the priority declared by the CSS style before CSS @ layer. According to the CSS Cascading 4 (Current Work) standard, the cascading order declared under the current specification is as follows (the lower the priority, the higher the priority, and the following rules are sorted in ascending order):

Normal user agent declarations

Normal user declarations

Normal author declarations

Animation declarations

Important author declarations

Important user declarations

Important user agent declarations

Transition declarations

According to the above algorithm, you can get a sort of style priority, which looks like this (the lower the priority, the higher the priority, and the following rules are sorted in ascending order):

User Agent-user agent normal style

User-normal style set by the user

Author-normal style for page author

Animations-Animation Styl

❗️ Author-Page author! important style

❗️ User-user-set! important style

❗️ User Agent-user agent! important style

Transitions-transition styl

A simple explanation: user agent style: the browser will have a basic style sheet to set the default style for any web page. These styles are collectively referred to as user agent styles, page author styles: the author of a web page can define the style of a document, which is the most common style sheet. In most cases, this type of stylesheet defines multiple, which constitute the vision and experience of the site, that is, the page theme, which can be understood as the page author style user style: the reader, as a browser user, can use custom stylesheets to customize the user experience, customize user preferences, and can be understood as user styles

With regard to CSS Cascading, the cascading specification, you can take a look at my article for a better understanding-- a deeper understanding of cascading in CSS (Cascading Style Sheets).

Https://github.com/chokcoco/iCSS/issues/76

With CSS @ layer, the cascading priority order is updated as follows:

The whole will change to a little more complex, but in general, two rules are followed:

! important style is higher than non -! important style

When comparing! important rules, the priority order is opposite to the normal rules. The lower the priority is in the normal state, the higher the priority is under! important.

To sum up.

To sum up, it is the basic knowledge about CSS @ layer.

The birth of CSS @ layer gives us the ability to better classify the style levels of the page and better deal with the priority order of internal and external reference styles, which is a major innovation.

At the same time, it also makes us realize that we need to gradually abandon the large-scale use of! important to override the wrong practice of style priority, avoiding many unnecessary side effects caused by priority issues.

Of course, today (2022-03-14), let's take a look at compatibility:

Although it has become a hit, CSS @ layer has been supported in the latest versions of Chrome, Safari, Firefox, and Edge, and it can be initially used through some polyfill. It is believed that it will become an indispensable part of business CSS code in the near future.

Thank you for reading! This is the end of the article on "sample Analysis of @ layer in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.