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

css
/* 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

css
@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, @styleset@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