syntax

Cú pháp

/* Tên kiểu dữ liệu */
syntax: "<color>";

/* Tổ hợp '|' cho nhiều kiểu dữ liệu */
syntax: "<length> | <percentage>";

/* Danh sách giá trị phân tách bằng khoảng trắng */
syntax: "<color>+";

/* Danh sách giá trị phân tách bằng dấu phẩy */
syntax: "<length>#";

/* Từ khóa */
syntax: "small | medium | large";

/* Kết hợp kiểu dữ liệu và từ khóa */
syntax: "<length> | auto";

/* Giá trị cú pháp phổ quát */
syntax: "*";

Giá trị

Một chuỗi (được gọi là chuỗi cú pháp) xác định các giá trị được phép. Nó có thể là một trong những điều sau:

• Một hoặc nhiều tên thành phần cú pháp, có thể là:
  • Tên kiểu dữ liệu (được viết trong dấu ngoặc nhọn, chẳng hạn như <color> hoặc <length>)
  • Từ khóa (được viết không có dấu ngoặc nhọn, chẳng hạn như auto hoặc none)
• Cú pháp phổ quát *, chấp nhận bất kỳ giá trị CSS hợp lệ nào. Nó không thể được nhân hoặc kết hợp với các thành phần cú pháp khác.

Các tên thành phần cú pháp có thể được sử dụng một mình hoặc nhân và kết hợp theo nhiều cách:

• Các nhân tử + (phân tách bằng khoảng trắng) và # (phân tách bằng dấu phẩy) cho biết rằng một danh sách giá trị được mong đợi. Ví dụ, <color># có nghĩa là một danh sách <color> phân tách bằng dấu phẩy là cú pháp mong đợi.

• Tổ hợp đường dọc (|) có thể tạo điều kiện "hoặc" cho cú pháp mong đợi. Ví dụ, <length> | auto chấp nhận <length> hoặc auto, và <color># | <integer># mong đợi một danh sách giá trị <color> phân tách bằng dấu phẩy hoặc một danh sách giá trị <integer> phân tách bằng dấu phẩy.

Các tên thành phần cú pháp sau được hỗ trợ:

"<angle>"

Chấp nhận bất kỳ giá trị <angle> hợp lệ nào.

"<color>"

Chấp nhận bất kỳ giá trị <color> hợp lệ nào.

"<custom-ident>"

Chấp nhận bất kỳ giá trị <custom-ident> hợp lệ nào.

"<image>"

Chấp nhận bất kỳ giá trị <image> hợp lệ nào.

"<integer>"

Chấp nhận bất kỳ giá trị <integer> hợp lệ nào.

"<length>"

Chấp nhận bất kỳ giá trị <length> hợp lệ nào.

"<length-percentage>"

Chấp nhận bất kỳ giá trị <length> hoặc <percentage> hợp lệ và bất kỳ biểu thức calc() hợp lệ nào kết hợp các giá trị <length> và <percentage>.

"<number>"

Chấp nhận bất kỳ giá trị <number> hợp lệ nào.

"<percentage>"

Chấp nhận bất kỳ giá trị <percentage> hợp lệ nào.

"<resolution>"

Chấp nhận bất kỳ giá trị <resolution> hợp lệ nào.

"<string>"

Chấp nhận bất kỳ giá trị <string> hợp lệ nào.

"<time>"

Chấp nhận bất kỳ giá trị <time> hợp lệ nào.

"<transform-function>"

Chấp nhận bất kỳ giá trị <transform-function> hợp lệ nào.

"<transform-list>"

Chấp nhận danh sách các giá trị <transform-function> hợp lệ. Nó tương đương với "<transform-function>+".

"<url>"

Chấp nhận bất kỳ giá trị <url> hợp lệ nào.

Định nghĩa chính thức

Cú pháp chính thức

syntax = 
  <string>  

Ví dụ

Đăng ký thuộc tính tùy chỉnh với kiểm tra kiểu

Ví dụ này cho thấy cách định nghĩa thuộc tính tùy chỉnh --my-color chỉ cho phép các giá trị <color>:

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Sử dụng JavaScript CSS.registerProperty():

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Các mô tả @property khác: inherits và initial-value
• Đăng ký thuộc tính tùy chỉnh CSS
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs