Recently, I found this message in the Weekly email push:

The Chromium team has announced that they will be releasing CSS Cascade Layers with Chromium 99 (due in March next year)

You will find a new term CSS CSS Cascade Layers appeared in this message. Out of curiosity and desire for new knowledge (I believe myself, haha), I looked up relevant information about CSS Cascade Layers to try to understand it.

Front knowledge

The at – rule rule

At-rule, CSS Conditional Rules Module Level 3 is a statement that provides instructions for CSS to execute or how to execute. Common AT-rule Rules are as follows:

  • @import, which allows users to import style rules from other style sheets
  • @font-face, which allows us to reference custom fonts
  • @keyframes, declare an animation
  • @media is a conditional CSS whose condition is a media query
  • @supports, tests whether the user agent supports CSS property/value pairs
  • @viewPort, which controls viewport Settings on mobile devices

Cascading and Inheritance Level

Cascades and Inheritance Over the years, there are currently several versions (CSS2.2, Level3, Level4, and Level5)

What is cascading?

Cascading is essentially an algorithm that defines how to combine attribute values from multiple sources. Simply put, the order of CSS rules is important. When two sibling rules are applied to an element, what follows is the actual rule used.

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
Copy the code

Both rules have the same priority, so the order takes effect at the end. H1 is color:blue’ wins’, showing blue.

Only CSS declarations, property name-value pairs, participate in cascading calculations. This means that @ rules that contain entities other than CSS declarations do not participate in the cascade, such as @font-face that contains descriptors, and @ rules (at-rules) participate in the cascade as a whole.

Which sources do CSS properties come from?

User agent style sheet: the basic style sheet of the browser, used to set default styles for all web pages.

2. User style Sheets: The author of a web page can define the style of the document. In most cases this type of stylesheet defines the theme of the site. 3. Users of the browser use custom stylesheets to customize the experience.

How do cascading algorithms filter CSS rules from different sources?

Conflicting declarations apply in the following order, with the latter overwriting the former:

Declarations in the user agent style sheet (the default style for the browser).

2. General declarations in user stylesheets (user-defined styles set by users, as in our reset.css). 3. General declarations in the author style sheet (styles set by the developer). 4. Author style sheet! 5, user style sheet in the important declaration! Important statement

After filtering CSS rules from different sources, determine the same origin priority and determine who wins.

! Important > inline style > #id >.class > tagCopy the code

Learning about cascading algorithms can help us understand how browsers resolve style rule conflicts. That is, browsers decide which style rules apply to elements. Learn more about CASCADING CSS:

What is inheritance?

When an inherited attribute of an element does not specify a value, the computed value of the same attribute of the parent element is taken. Only the document root element takes the default value defined by this attribute. Similar attributes include color, font-size, and so on.

Cascading Style Sheets CSS is an acronym for Cascading Style Sheets, and many people refer to it as Cascading Style Sheets.

@layer

Cascading Layers, also known as Cascading Layers, is a new CSS feature in the Cascading and Inheritance Level5 specification. The corresponding @layer is a new @ rule. It’s called an at-rule.

Why @layer?

From our introduction to cascading, we have already seen the importance of order for cascading. CSS attributes with the same weight will “win” the former, and different weights will determine who “wins” according to the CSS declaration source and priority algorithm. ! The important CSS rule automatically jumps it ahead of the cascade algorithm, which can override the cascade of normal rules.

That is, we usually use selector weights and order as a way to control the cascade, but this is often encountered:

Use high-weight selectors to prevent your code from being overwritten by later code (or someone else’s code). But this can also lead to another undesirable phenomenon, which can add a lot of new bands to your code! Important style rule, which in itself can cause more problems, such as! Important is ubiquitous in CSS stylesheets and is hard to override when needed.

Using a lower-weight selector can easily be overwritten by later code (or someone else’s code). For example, when you introduce a third-party code base or component, your own code may be overwritten.

These two phenomena are also common in writing CSS code, especially in large projects or collaborative projects. It also causes a lot of problems for CSS developers.

Although there are many third-party solutions in the community, such as CSS-in-JS, CSS Modules, and CSS Scoped, to help solve the cascading problems, the coverage and conflicts caused by the order are still unresolved because the source order (packaged products) still plays a decisive role. And the selector weights are still more important than the order of the layers (source order).

This background promoted the emergence of @Layer to really solve these problems caused by the cascade.

The emergence of @layer also requires a new understanding of CSS cascading in the past,

We can see that the cascading layer of CSS is usually located between a “Style Attribute” and a CSS selector weight.

With cascading CSS layers, you can use @layer at-rule to divide the CSS into multiple layers.

In the same way that CSS attribute sources provide trade-offs between user and author style sheets, Cascade Layers provides a structured way to organize and weigh concerns within a single source

How to use

Create a cascading layer

Cascading layers can be declared in a number of ways:

1. Use the @Layer block rule and assign styles to it immediately:

@layer reset {
  * { /* Poor Man's Reset */
    margin: 0;
    padding: 0; }}Copy the code

2. Use the @layer statement without specifying any style:

@layer reset;
Copy the code

Use @import with the layer keyword or the layer() function

@import(reset.css) layer(reset);
Copy the code

Each of the above creates a cascading layer called RESET.

Manage the cascade layer

The cascading layers are sorted in the order they are declared.

In the following example, we create four cascading layers: reset, Base, theme, and Utilities.

@layer reset { /* Create cascade layer "reset" */
  * {
    margin: 0;
    padding: 0; }}@layer base { /* Create the cascading layer "base" */... }@layer theme { /* Create a cascading layer "theme" */... }@layer utilities { /* Create cascade layer "utilities" */... }Copy the code

In the order in which they are declared, the layer order becomes:

reset

base

theme

utilities

When a cascading layer name is reused, the style is appended to an existing cascading layer. The order of the cascading layers remains the same, because only the first occurrence has been determined in order:

@layer reset { /* Create the first cascading layer "reset" */... }@layer base { /* Create a second cascading layer "base" */... }@layer theme { /* Create a third cascading layer "theme" */... }@layer utilities { /* Create a fourth cascade layer, "utilities" */... }@layer base { /* Adds styles to the cascading layer "base" */... }Copy the code

Reusing the cascading layer name keeps the order of the layers the same to make the @Layer syntax more convenient and rigorous. Using it, you can pre-establish layer order and then attach all CSS to it:

@layer reset;     /* Create the first cascading layer "reset" */
@layer base;      /* Create a second cascading layer "base" */
@layer theme;     /* Create a third cascading layer "theme" */
@layer utilities; /* Create a fourth cascade layer, "utilities" */

@layer reset { /* Add style to cascade layer "reset" */... }@layer theme { /* Add style to cascading layer "theme" */... }@layer base { /* Add styles to the cascading layer "base" */... }@layer theme { /* Add style to cascading layer "theme" */... }Copy the code

Of course you can declare cascading layers in a much shorter syntax,

@layer reset, base, theme, utilities;
Copy the code

As you can see above, when multiple cascading layers are declared, the declaration of the last cascading layer wins. Like this,

@import(reset.css) layer(reset); /* The first cascading layer */

@layer base { /* Second cascading layer */
  form input {
    font-size: inherit; }}@layer theme { /* Third cascading layer */
  input {
    font-size: 2rem; }}Copy the code

If CSS cascades are used in the past, form input takes precedence over input, but @Layer Theme input wins because of the cascading layer.

Cascade layer nesting

The cascading layer supports nesting, as follows:

@layer base { /* The first cascading layer */
  p { max-width: 70ch; }}@layer framework { /* Second cascading layer */
  @layer base { /* The second level of the nested sub-cascade layer 1 */
    p { margin-block: 0.75 em; }}@layer theme { /* The second level of the nested sub-cascade layer 2 */
    p { color: # 222; }}}Copy the code

In this example there are two cascading layers:

base

framework

The framework layer itself also contains two layers:

base

theme

It’s like a tree, like this,

If you want to attach a style to a nested cascading layer, you need to refer to it with the following full name,

@layer framework {
  @layer default {
     p { margin-block: 0.75 em; }}@layer theme {
    p { color: # 222; }}}@layer framework.theme {
  /* These styles are added to the @Layer framework within the theme layer */
  blockquote { color: rebeccapurple; }}Copy the code

@ media with @ layer

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }}}@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }}}Copy the code

If the first @media (min-width: 30em) matches (based on viewport size), then the layout cascading layers will take the first place in the layer order. If only @media (prefer-color-scheme: dark) matches, the theme will be the first layer.

If they match, the layer order will be Layout, theme. If there is no match, the layer is not defined.

conclusion

With the advent of Cascade Layers, our developers will have more tools to control Cascade. The real power of Cascade Layers comes from its unique location in Cascade: between the Style Attribute and the CSS selector weight. Therefore, we don’t need to worry about the selector specificity of CSS used in other layers, nor about the order in which we load CSS into those layers.

Knowing this, do you think @layer is quite cool and can’t wait to use it? Let’s take a look at the compatibility of @layer with caniuse.

Unfortunately, the level of support is pretty poor, and it’s going to have to wait until Chromium 99 comes out next March.

Of course, now if you want to experiment, there are some suggestions for the community,

You can also try it, thanks for reading!