CSS - @layer

The CSS at-rule @layer is used to declare a cascade layer and may additionally specify the priority order when multiple cascade layers are involved.

  • layer-name - It is the name of the cascade layer.

  • rules - It is the set of CSS rules in the cascade layer.

Description

  • Rules within a cascade layer are combined, providing web developers with greater control over the cascade.

  • Styles that are not assigned to a layer are grouped into a single anonymous layer that is ordered after all named and unnamed layers.

  • Consequently, styles defined outside a layer take precedence over those inside a layer, regardless of specificity.

The @layer at-rule is utilized to create a cascade layer using three different ways.

  • First way is to create a cascade layer with a specific name, containing the corresponding CSS rules within.

    @layer layer-name {rules}

  • Another way involves creating a named cascade layer without specifying any styles. It is possible to define multiple layers at the same time. The order of layer declaration determines priority; the last layer listed wins in the case of conflicting rules in multiple layers.

    @layer layer-name;
@layer layer-name, layer-name, layer-name;

  • The third way is to create a cascade layer without specifying a name. An anonymous cascade layer is established that functions similarly to the named layers. The precedence of anonymous layers is based on the order of their declaration order.

    @layer {rules}

  • A cascade layer can also be created using the @import at-rule, placing the rules in the imported stylesheet. There is an example below.

    @import "demo-layer.css" layer(layout);

Nesting layers

Layers can be nested, which means that you can create layers within other layers. This can be useful for organizing your CSS and giving certain layers priority over others.

@layer layer-name1 {
   @layer layer-name2 {
} }

Syntax

A formal @layer syntax would be as follows:

@layer <layer-name>? { <stylesheet> } | @layer <layer-name># ;

Example

The following example demonstrates the styles declared outside a layer have higher priority than those declared within the layer.

<html>
<head>
<style>
   h1 {
      color: white;
      background-color:gray;
   }
   p {
      color: black;
   }
   @layer components {
      .container h1  {
         background-color: blue;
         color: red;
         padding: 10px;
         border-radius: 20px;
      }
      .container p {
      color: white;
      background-color: lightblue;
      font-size: 25px;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h1>HTML example to show CSS at-rules @layer</h1>
      <p>This is a sample text.</p>
      <button>Click Me</button>
   </div>
</body>
</html>

Assigning Rules To Existing Layers

Following example demonstrates assigning rules to existing layers. Two layers are initially created without any rules, after which CSS rules are later applied to both layers.

  • In the example given, @layer primary-demo, custom-demo; declares two CSS layers with the names primary-demo and custom-demo.

  • The styles defined in @layer primary-demo apply default formatting to elements with the class container.

  • The subsequent section @layer custom-demo overrides certain properties for the same class, allowing custom styling without affecting the base layer, demonstrating the use of CSS layers to organize and manage styles.

<html>
<head>
<style>
   @layer primary-demo, custom-demo;
   @layer primary-demo {
      .container {
      background-color: blue;
      color: black;
      font-family: Arial, sans-serif;
      font-size: 20px;
      line-height: 1.5;
      }	
   }
   @layer custom-demo {
      .container {
      background-color: orange;
      color: white;
      padding: 10px;
      text-align: center;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Welcome to My Website</h1>
      <p>This is a welcome quote with a blue background and white text.</p>
      <p><a href="#">Learn More</a></p>
      <h2>About Me</h2>
      <p>I am a web developer with experience in HTML, CSS, and JavaScript.</p>
      <p><a href="#">View My Portfolio</a></p>
   </div>
</body>
</html>
Advertisements