New CSS feature @ layer -- cascade layer

New CSS feature @ layer

C in CSS refers to Cascading, that is, Cascading. Only by understanding how Cascading solves the conflict of style rules, can we accurately and quickly set the style of an element.

The stacking rules are considered according to "style sheet source", "selector priority" and "source code order". The following figure shows a decision process:

However, when the page is complex and there are many components, it is still very difficult to manage the style. Many times, you still have to overwrite the style with some selectors with high priority weight that you don't want to use, such as ID or! important, so a new @ layer feature in CSS can better manage and control styles.

grammar

If you have used ps, you can understand @ layer very well. It is like the layers in ps, which can sort ps layers. The layers above have higher priority. An important role of @ layer is to define the priority of "cascade layer" in advance:

@layer bootstrap,base,application;

@import url(bootstrap.css) layer(bootstrap);

@layer base {
    body {
        /* ... */
    }
}

In the above code, we first declare three layers with @ layer, bootstrap, base and application. The priority of these three layers is from low to high: bootstrap > base > application. The style priority of bootstrap components is the lowest, which is convenient for us to modify the style of some components. The priority of application layer is higher than that of base, which can carry out more fine-grained style control on content blocks. In this way, at the beginning of style design, A management plan was carried out.

From the above code, we can see three methods to create CSS @layer:

  • Directly create a block level @ layer rule:
@layer base {
    body {
        /* ... */
    }
}
  • Create layers through @ import:
@import url(bootstrap.css) layer(bootstrap);
  • Create a named layer first, but do not write the style code first, such as the application layer in the code. When you want to write the application layer later, write the style in the layer:
@layer application;

/*  */

/*  */

@layer application{
    a{
        color:red;
    }
}

Let's take a look at the priority between layer s through an example:

HTML

<div class="item">This passage is<em>gules</em></div>

CSS

@layer base,application;

@layer application {
.item {
    color: red;
}
}

@layer base {
.item {
    color: green;
    border: 5px solid green;
    font-size: 1.5em;
    padding: 0.5em;
}
}

@Although the style rule of layer application is written before @ layer base, when defining layer, the priority of application is higher after base, so the color attribute defined by application will take effect:

The priority between layer s has a higher weight than the selector priority. For example, in the example just now, we modify the following style code:

@layer base,application;

@layer application {
    em {
        color: red;
    }
}

@layer base {
    .item em {
        color: green;
    }
}

From the perspective of selector priority item em has higher priority than em, but from the perspective of layer, application has higher priority than base, so the color of < EM > is finally red.

Priority of non @ layer and @ layer layers

Of course, we also have to consider that the style not wrapped by @ layer has higher priority than the style wrapped by @ layer?

Test it:

HTML

<body>
    I'm using @layers.
</body>

CSS

body {
    background-color: bisque;
}
@layer A {
    body {
        background-color: red;
        color: black;
    }
}
@layer B {
    body {
        color: blue;
        background-color: green;
    }
}

The effect of the web page is:

It can be seen that the style of non @ layer package has higher priority than that of @ layer package, even if it is written before other layers.

@layer is also a function in the experiment. I used this feature in Chrome 100. Chrome 99, Edge 99, Firefox 97 and safari versions after 15.4 currently support this feature.

Anonymous layer

Anonymous layer refers to the cascade layer that does not declare the layer name. Its priority in the cascade layer depends on the layer declaration order:

@layer A {
    body {
        background-color: green;
    }
}
@layer {
    body {
        background-color: red;
    }
}
@layer B {
    body {
        background-color: bisque;
    }
}

The priority from high to low is: b > anonymous > A, so the background color of the last effective body is bisque.

Nested layer

Although the CSS native nesting has not been actually installed, the draft has been out for a long time, and @ layer also supports nesting:

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

Equivalent to:

@layer A.B {
  ...
}

It should be noted that the priority of a is higher than that of A.B

@layer A {
    div {
        background: blue;
    }
    
    @layer B {
        div {
            background: red;
        }
    }
}

The final background color of body is blue, which is understandable. Assuming there is no layer A package, it is actually A priority contest between layer and non layer, and non layer is higher, right.

If there is multi-level nesting of layers, the layers with high priority, whether nested or not, are higher than those with low priority, such as:

HTML

<div>I'm using @layers.</div>

CSS

div {
    padding: 20px;
    width: 300px;
    height: 50px;
}   

@layer A {
    div {
        background: blue;
    }
    @layer B {
        div {
        background: red;
        }
    }
}
@layer C {
    div {
        background: bisque;
    }
    @layer D {
        div {
        background: green;
        }
    }
}

Priority from high to low: @ layer C > @ layer C.D > @ layer a > @ layer a B. So the background color of the last div is:

In short, @ layer is still very easy to use. I hope it can be used in the business code as soon as possible.

Tags: css

Posted by rinkhals on Fri, 22 Apr 2022 06:37:01 +0300