At-rules
At-rules là các câu lệnh CSS hướng dẫn CSS cách hoạt động. Chúng bắt đầu bằng dấu at, @ (U+0040 COMMERCIAL AT), theo sau là một định danh. Chúng bao gồm tất cả mọi thứ từ từ khóa at cho đến dấu chấm phẩy tiếp theo, ; (U+003B SEMICOLON), hoặc CSS block tiếp theo, tùy cái nào đến trước.
At-rules được dùng để nhóm và cấu trúc các style rule cũng như các at-rule khác, khai báo thông tin style không liên kết trực tiếp với nội dung được chọn, và quản lý các cấu trúc cú pháp như import và ánh xạ từ khóa namespace.
Cú pháp
At-rule được định nghĩa trong module CSS syntax, với các at-rule khác nhau được định nghĩa trong các module tương ứng. Chúng thường có một trong hai dạng tùy thuộc vào quy tắc cụ thể và mục đích của nó: statement at-rule và block at-rule, có thể chứa các qualified rule lồng nhau, at-rule hoặc các khai báo.
Statement at-rules
/* Cấu trúc chung */
@identifier (RULE);
/* Ví dụ: báo trình duyệt sử dụng bộ ký tự UTF-8 */
@charset "utf-8";
Statement at-rule kết thúc bằng dấu chấm phẩy. Có nhiều statement at-rule, được chỉ định bởi các định danh của chúng, mỗi cái có cú pháp khác nhau:
@charset-
Một thuật toán (có dạng cú pháp của at-rule, nhưng không phải là định nghĩa) xác định bộ ký tự dự phòng được stylesheet sử dụng (CSS Syntax).
@import-
Báo CSS engine bao gồm một stylesheet bên ngoài (CSS cascading and inheritance).
@layer-
Xác định thứ tự ưu tiên trong trường hợp có nhiều cascade layer (CSS cascading and inheritance). Cũng được dùng như block at-rule để định nghĩa style của một layer.
@namespace-
Định nghĩa namespace mặc định cho stylesheet hoặc tiền tố namespace mà selector chỉ khớp nếu namespace và các thành phần selector khác khớp (CSS namespaces).
Block at-rules
@identifier (RULE) {
}
Block at-rule kết thúc bằng khối {}chứa các rule lồng nhau, các at-rule khác, hoặc các khai báo thuộc tính hay descriptor.
@counter-style-
Định nghĩa các kiểu counter tùy chỉnh và mở rộng các kiểu danh sách được định nghĩa sẵn (CSS counter styles).
@container-
Một conditional group rule áp dụng nội dung của nó nếu container đáp ứng các
<container-condition>(CSS containment). @font-face-
Định nghĩa vị trí tài nguyên font, cả cục bộ và bên ngoài, cùng với các đặc tính kiểu dáng khi các tài nguyên đó được sử dụng với
font-familyđã khai báo (CSS fonts). @font-feature-values(cộng với@swash,@ornaments,@annotation,@stylistic,@stylesetvà@character-variant)-
Kiểm soát hiển thị font theo từng font-family bằng cách định nghĩa các lựa chọn thay thế dành riêng cho font, hoặc tên tùy chỉnh, cho các chỉ số feature trong
font-variant-alternatesở OpenType (CSS fonts). @keyframes(và alias@-webkit-keyframes)-
Định nghĩa một animation được đặt tên bằng cách mô tả các kiểu CSS cho các bước trung gian (hoặc keyframe) trong chuỗi animation (CSS animations).
@layer-
Tạo một cascade layer được đặt tên với các CSS rule cho layer đó bên trong (CSS cascading and inheritance). Cũng được dùng như statement at-rule để xác định thứ tự ưu tiên trong trường hợp có nhiều cascade layer.
@media-
Một conditional group rule áp dụng nội dung của nó nếu thiết bị đáp ứng các tiêu chí của điều kiện được định nghĩa bằng media query (CSS conditional rules).
@page-
Chỉ định các khía cạnh của một trang cần in, chẳng hạn kích thước, hướng và margin (CSS paged media).
@position-try-
Định nghĩa các tùy chọn vị trí tùy chỉnh có thể được dùng để xác định các tùy chọn vị trí và căn chỉnh dự phòng cho các phần tử được định vị theo anchor (CSS anchor positioning).
@property-
Định nghĩa một CSS custom property, cho phép kiểm tra và ràng buộc kiểu thuộc tính, đặt giá trị mặc định và xác định liệu custom property có thể kế thừa giá trị hay không (CSS custom properties for cascading variables).
@scope-
Định nghĩa một phạm vi để áp dụng chúng cho các phần tử được chọn và các style để áp dụng cho các phần tử trong phạm vi đó (CSS cascading and inheritance).
@starting-style-
Định nghĩa các giá trị thuộc tính bắt đầu cho một phần tử để transition từ khi phần tử nhận được bản cập nhật style đầu tiên, chẳng hạn khi transition từ
display: none(CSS transitions). @supports-
Một conditional group rule áp dụng nội dung của nó nếu trình duyệt hỗ trợ các tính năng CSS của điều kiện đã cho (CSS conditional rules).
@view-transition-
Chọn tài liệu hiện tại tham gia vào view transition, và cả tài liệu đích trong trường hợp các transition điều hướng giữa các tài liệu.
Đặc tả
| Specification |
|---|
| CSS Syntax Module Level 3> |
Xem thêm
- CSS at-rules
- CSS at-rule functions
- Nesting at-rules
- CSS statements
- Interface CSSRule
- Module CSS conditional rules
- Module CSS syntax
- Specificity
- Inheritance