Trang này được dịch bởi Cloud Translation API.

@property: Biến CSS thế hệ mới hiện đã hỗ trợ trình duyệt chung

Una Kravets

Hãy chuẩn bị sẵn sàng cho việc tăng cường CSS! Quy tắc @property, một phần của API CSS Houdini, hiện được hỗ trợ đầy đủ trên tất cả các trình duyệt hiện đại. Tính năng thay đổi cuộc chơi này mở ra các mức kiểm soát mới và sự linh hoạt cho các thuộc tính tuỳ chỉnh CSS (còn được gọi là biến CSS), giúp biểu định kiểu của bạn thông minh hơn và linh hoạt hơn.

Hỗ trợ trình duyệt

Nguồn

Lợi ích của `@property`

Ý nghĩa ngữ nghĩa: Sử dụng @property để xác định một loại (cú pháp) cho các thuộc tính tuỳ chỉnh của bạn. Điều này cho trình duyệt biết thuộc tính tuỳ chỉnh của bạn giữ loại dữ liệu nào (ví dụ: màu sắc, độ dài hoặc số), ngăn chặn các kết quả không mong muốn và hỗ trợ các khả năng mới như tạo ảnh động chuyển màu.
Giá trị dự phòng: Không còn kiểu biến mất nào nữa! Sử dụng @property để đặt giá trị ban đầu cho thuộc tính tuỳ chỉnh. Nếu sau đó bạn chỉ định giá trị không hợp lệ, thì trình duyệt sẽ sử dụng cấu hình dự phòng đã xác định của bạn một cách linh hoạt.
Cải thiện khả năng xử lý lỗi: Mức độ an toàn về kiểu được nâng cao và khả năng thiết lập bản dự phòng mở ra nhiều cơ hội mới để kiểm thử và xác thực trực tiếp trong CSS.

Tạo thuộc tính tùy chỉnh nâng cao

Để tạo một "tiêu chuẩn", thuộc tính tuỳ chỉnh, đặt tên thuộc tính được thêm vào trước -- và cung cấp một giá trị cho thuộc tính này. Giá trị của các thuộc tính tuỳ chỉnh này được trình duyệt phân tích cú pháp dưới dạng một chuỗi.

Ví dụ sau cho thấy cách khởi tạo một thuộc tính tuỳ chỉnh mặc định (dựa trên chuỗi).

:root {
 --myColor: hotpink;
}

Để hưởng lợi từ các "thuộc tính tuỳ chỉnh nâng cao", bao gồm cả ngữ nghĩa ngoài một chuỗi, hãy đăng ký thuộc tính tuỳ chỉnh CSS bằng @property.

Trong ví dụ này, cùng một thuộc tính tuỳ chỉnh được khởi động bằng @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

Thuộc tính tuỳ chỉnh được khởi tạo bằng @property cung cấp nhiều thông tin chi tiết hơn so với chỉ tên và giá trị. Thuộc tính này bao gồm loại cú pháp và đặt tính kế thừa thành true hoặc false.

Lợi ích của phương pháp này là với thuộc tính chuẩn, bạn muốn thuộc tính đó chứa một màu dưới dạng một giá trị và sẽ sử dụng màu đó ở nơi khác trong biểu định kiểu. Nếu ai đó cập nhật tài sản đó thành một giá trị dạng số, thì mọi hoạt động sử dụng tài sản đó ở những nơi khác đều sẽ không thành công. Khi sử dụng @property, bạn sẽ có một màu dự phòng được xác định, cùng với một syntax khai báo thuộc tính này phải có một giá trị màu. Nếu bạn cần sử dụng một giá trị không phải màu sắc, thì phương thức dự phòng sẽ được sử dụng.

Bản minh hoạ: Nền chuyển màu lấp lánh

Một trong những ứng dụng gọn gàng của @property là ảnh động mượt mà của các thuộc tính mà trước đây không thể chuyển đổi, chẳng hạn như độ dốc, được trình duyệt nhận biết dưới dạng hình ảnh. Tuy nhiên, nếu bạn cung cấp ý nghĩa cú pháp cho biến thông qua @property, thì bạn có thể sử dụng các biến này trong câu lệnh chuyển màu. Bây giờ, bạn sẽ mô tả ảnh động giữa hai giá trị được khai báo trong độ dốc, bật ảnh động. Hãy xem ví dụ sau đây: một thẻ có ảnh động nền tinh tế gồm hai dải chuyển màu dạng hình tròn giúp thay đổi màu trên các dòng thời gian khác nhau:

Sử dụng @property để tạo kiểu cho hiệu ứng động màu trong hiệu ứng chuyển màu của nền.

Bạn có thể thực hiện việc này bằng cách thiết lập các giá trị của thuộc tính tuỳ chỉnh dưới dạng màu:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Sau đó, bạn truy cập vào các mẫu đó để tạo nền chuyển màu ban đầu:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Ngoài ra, sau đó bạn cập nhật các giá trị trong khung hình chính:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

Và tạo ảnh động cho từng giao diện:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Kết luận

Thuộc tính tuỳ chỉnh đã đăng ký CSS là một tính năng rất mạnh mẽ, giúp mở rộng ngôn ngữ CSS bằng cách cung cấp ý nghĩa và ngữ cảnh cho các biến CSS. Giờ đây, khi @property hạ cánh trong đường cơ sở, siêu năng lực CSS này đang phát triển mạnh mẽ.