@layer

Try it

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

<p class="alert">Beware of the zombies</p>

Cú pháp

/* statement at-rules */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

trong đó:

layer-name

Là tên của cascade layer.

rules

Là tập hợp các quy tắc CSS trong cascade layer.

Mô tả

Các quy tắc trong một cascade layer cascade với nhau, cung cấp cho các nhà phát triển web khả năng kiểm soát tốt hơn đối với cascade. Các kiểu dáng không được định nghĩa trong một layer luôn ghi đè các kiểu dáng được khai báo trong các layer có tên và ẩn danh.

Sơ đồ sau cho thấy các ưu tiên layer trong đó các layer được khai báo theo thứ tự 1, 2, ..., N.

Như được ghi chú trong sơ đồ trên, khai báo quan trọng (declarations with !important flag) có ưu tiên cao hơn khai báo thông thường (regular declarations without !important). Thứ tự ưu tiên giữa các quy tắc quan trọng là nghịch đảo của các quy tắc thông thường. Transitions có mức độ ưu tiên cao nhất. Tiếp theo theo thứ tự từ cao đến thấp là các khai báo quan trọng của user agent, khai báo quan trọng của người dùng, và khai báo quan trọng của tác giả; theo thứ tự đó. Người dùng có thể chỉ định kiểu dáng bằng cách sử dụng tùy chọn trình duyệt, tùy chọn hệ điều hành hoặc tiện ích mở rộng trình duyệt. Các khai báo quan trọng của họ có ưu tiên cao hơn các khai báo quan trọng của tác giả hay nhà phát triển web.

Trong các kiểu dáng của tác giả, tất cả các khai báo quan trọng trong các CSS layer đều có ưu tiên cao hơn bất kỳ khai báo quan trọng nào được khai báo ngoài layer, trong khi tất cả các khai báo thông thường trong các CSS layer có ưu tiên thấp hơn các khai báo được khai báo ngoài layer. Thứ tự khai báo quan trọng. Layer được khai báo đầu tiên có ưu tiên thấp nhất và layer được khai báo cuối cùng có ưu tiên cao nhất. Tuy nhiên, ưu tiên bị đảo ngược khi cờ !important được sử dụng.

At-rule @layer được dùng để tạo cascade layer theo một trong ba cách.

Cách thứ nhất là sử dụng block at-rule @layer để tạo cascade layer có tên với các quy tắc CSS cho layer đó bên trong, như sau:

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

Cách thứ hai là sử dụng statement at-rule @layer để tạo một hoặc nhiều cascade layer có tên phân cách bằng dấu phẩy mà không gán bất kỳ kiểu dáng nào. Đây có thể là một layer duy nhất, như được hiển thị bên dưới:

@layer utilities;

Nhiều layer có thể được định nghĩa cùng một lúc, như được hiển thị bên dưới:

@layer theme, layout, utilities;

Điều này hữu ích vì thứ tự ban đầu trong đó các layer được khai báo chỉ ra layer nào có ưu tiên. Như với các khai báo, layer được liệt kê cuối cùng sẽ thắng nếu các khai báo được tìm thấy trong nhiều layer. Do đó, với ví dụ trước, nếu một quy tắc cạnh tranh được tìm thấy trong theme và utilities, quy tắc trong utilities sẽ thắng và được áp dụng.

Một quy tắc trong utilities sẽ được áp dụng ngay cả khi nó có độ đặc hiệu thấp hơn so với quy tắc trong theme. Điều này là vì một khi thứ tự layer đã được thiết lập, độ đặc hiệu và thứ tự xuất hiện bị bỏ qua. Điều này cho phép sử dụng các bộ chọn CSS đơn giản hơn vì bạn không phải đảm bảo rằng bộ chọn sẽ có độ đặc hiệu đủ cao để ghi đè các quy tắc cạnh tranh; tất cả những gì bạn cần đảm bảo là nó xuất hiện trong một layer sau.

Cách thứ ba là tạo một layer vô danh bằng cách sử dụng block at-rule @layer mà không bao gồm tên layer. Ví dụ:

@layer {
  p {
    margin-block: 1rem;
  }
}

Điều này tạo ra một anonymous cascade layer. Layer này hoạt động giống như các layer có tên; tuy nhiên, các quy tắc không thể được gán cho nó sau này. Thứ tự ưu tiên cho các layer ẩn danh là thứ tự mà các layer được khai báo, có tên hoặc không, và thấp hơn các kiểu dáng được khai báo ngoài layer.

Một cách khác để tạo cascade layer là sử dụng @import. Trong trường hợp này, các quy tắc sẽ nằm trong stylesheet được nhập. Hãy nhớ rằng at-rule @import phải đứng trước tất cả các loại quy tắc khác, ngoại trừ câu lệnh @charset và @layer (không phải block @layer).

@import "theme.css" layer(utilities);

Lồng các layer

Các layer có thể được lồng nhau. Ví dụ:

@layer framework {
  @layer layout {
  }
}

Để thêm quy tắc vào layer layout bên trong framework, hãy nối hai tên lại với nhau bằng dấu ..

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

Cú pháp chính thức

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

Ví dụ

Ví dụ cơ bản

Trong ví dụ sau, hai quy tắc CSS được tạo ra. Một cho phần tử <p> nằm ngoài bất kỳ layer nào và một bên trong layer có tên type cho .box p.

Không có layer, bộ chọn .box p sẽ có độ đặc hiệu cao nhất, và do đó, văn bản Hello, world! sẽ hiển thị màu xanh lá. Vì layer type xuất hiện trước layer ẩn danh được tạo để giữ nội dung không có layer, văn bản sẽ có màu tím.

Cũng lưu ý thứ tự. Mặc dù chúng ta khai báo kiểu dáng không có layer đầu tiên, nó vẫn được áp dụng sau các kiểu dáng trong layer.

HTML

<div class="box">
  <p>Hello, world!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Kết quả

Gán quy tắc cho các layer hiện có

Trong ví dụ sau, hai layer được tạo ra mà không có quy tắc nào được áp dụng, sau đó các quy tắc CSS được áp dụng cho hai layer. Layer base xác định color, border, font-size, và padding. Layer special xác định một màu khác. Vì special xuất hiện cuối cùng khi các layer được định nghĩa, màu mà nó cung cấp được sử dụng và văn bản được hiển thị bằng rebeccapurple. Tất cả các quy tắc khác từ base vẫn được áp dụng.

HTML

<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

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

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Introducing the CSS cascade
• Learn: Handling conflicts
• Learn: Cascade layers
• The future of CSS: Cascade layers on bram.us (2021)