@property: cung cấp siêu năng lực cho các biến CSS

Una Kravets

CSS Houdini là một thuật ngữ bao quát đề cập đến một một nhóm API cấp thấp hiển thị các phần của công cụ kết xuất CSS và cung cấp quyền truy cập của nhà phát triển vào Mô hình đối tượng CSS. Đây là một đối với hệ sinh thái CSS, vì điều này cho phép nhà phát triển cho trình duyệt biết cách để đọc và phân tích cú pháp CSS tuỳ chỉnh mà không cần chờ nhà cung cấp trình duyệt cung cấp tích hợp sẵn cho các tính năng này. Thật thú vị!

Một trong những bổ sung thú vị nhất cho CSS trong phạm vi Houdini là Thuộc tính và giá trị .

API này giúp tăng cường hiệu quả của các thuộc tính tuỳ chỉnh CSS (còn thường được gọi là biến CSS) bằng cách gán cho chúng ý nghĩa ngữ nghĩa (được xác định bằng cú pháp) và thậm chí giá trị dự phòng, cho phép kiểm tra CSS.

Viết thuộc tính tuỳ chỉnh Houdini

Dưới đây là ví dụ về cách đặt thuộc tính tùy chỉnh (ví dụ: biến CSS), nhưng có cú pháp (loại), giá trị ban đầu (dự phòng) và boolean kế thừa (có nó có kế thừa giá trị từ phần tử mẹ hay không?). Cách hiện tại để thực hiện việc này là thông qua CSS.registerProperty() trong JavaScript, nhưng trong việc hỗ trợ các trình duyệt, bạn có thể sử dụng @property:

Tệp JavaScript riêng (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Có trong tệp CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Giờ đây, bạn có thể truy cập --colorPrimary như mọi thuộc tính tuỳ chỉnh CSS khác, thông qua var(--colorPrimary) Tuy nhiên, sự khác biệt ở đây là --colorPrimary không chỉ đọc dưới dạng một chuỗi. Có dữ liệu rồi!

Giá trị dự phòng

Giống như bất kỳ thuộc tính tuỳ chỉnh nào khác, bạn có thể nhận (sử dụng var) hoặc đặt (ghi/ghi lại) nhưng với thuộc tính tùy chỉnh Houdini, nếu bạn đặt giá trị falsey khi ghi đè giá trị đó, thì công cụ hiển thị CSS sẽ gửi giá trị ban đầu (giá trị dự phòng) thay vì bỏ qua dòng.

Hãy xem ví dụ dưới đây. Biến --colorPrimary có một initial-value/magenta. Nhưng nhà phát triển đã cung cấp mã không hợp lệ giá trị "23". Nếu không có @property, trình phân tích cú pháp CSS sẽ bỏ qua mã không hợp lệ. Giờ đây, trình phân tích cú pháp sẽ quay lại dùng magenta. Điều này cho phép dự phòng thực sự và thử nghiệm trong CSS. Tuyệt vời!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Cú pháp

Với tính năng cú pháp, giờ đây bạn có thể viết CSS ngữ nghĩa bằng cách chỉ định một loại. Sau đây là các loại dữ liệu được phép hiện tại:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (chuỗi giá trị nhận dạng tuỳ chỉnh)

Việc đặt cú pháp cho phép trình duyệt kiểm tra kiểu thuộc tính tuỳ chỉnh. Việc này có nhiều lợi ích.

Để minh hoạ điểm này, tôi sẽ cho bạn biết cách tạo hiệu ứng chuyển màu cho hiệu ứng chuyển màu. Hiện tại, không có cách nào để tạo hiệu ứng chuyển động (hoặc nội suy) giữa các giá trị độ dốc, như mỗi khai báo về độ dốc được phân tích cú pháp dưới dạng một chuỗi.

Sử dụng thuộc tính tùy chỉnh với "số" cú pháp, dải chuyển màu ở bên trái cho thấy hiệu ứng mượt mà chuyển đổi giữa các giá trị điểm dừng. Độ dốc ở bên phải sử dụng thuộc tính tuỳ chỉnh mặc định (không xác định cú pháp) và cho thấy hiệu ứng chuyển đổi đột ngột.

Trong ví dụ này, tỷ lệ phần trăm dừng chuyển màu được tạo ảnh động từ điểm bắt đầu 40% thành giá trị kết thúc là 100% thông qua tương tác khi di chuột. Bạn sẽ thấy một chuyển tiếp mượt mà màu chuyển màu trên cùng xuống dưới.

Trình duyệt ở bên trái hỗ trợ Houdini Properties and Values API, cho phép chuyển đổi điểm chuyển màu mượt mà. Trình duyệt ở bên phải thì không. Chiến lược phát hành đĩa đơn trình duyệt không hỗ trợ chỉ có thể hiểu thay đổi này là một chuỗi từ điểm A đến điểm B. Không có cơ hội để nội suy các giá trị, và do đó, bạn sẽ không thấy quá trình chuyển đổi suôn sẻ.

Tuy nhiên, nếu bạn khai báo loại cú pháp khi viết thuộc tính tuỳ chỉnh, sau đó sử dụng để bật ảnh động, bạn sẽ thấy hiệu ứng chuyển đổi. Bạn có thể tạo thực thể tuỳ chỉnh --gradPoint như sau:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Sau đó, khi đến lúc tạo ảnh động, bạn có thể cập nhật giá trị từ 40% ban đầu thành 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Thao tác này giờ đây sẽ cho phép chuyển đổi độ dốc mượt mà.

Chuyển đổi đường viền chuyển màu một cách mượt mà. Xem bản minh hoạ về sự cố

Kết luận

Quy tắc @property làm cho một công nghệ thú vị trở nên dễ tiếp cận hơn nữa cho phép bạn viết CSS có ý nghĩa về mặt ngữ nghĩa trong chính CSS. Để tìm hiểu tìm hiểu thêm về CSS Houdini cũng như Properties and Values API (API Thuộc tính và giá trị), hãy xem tài nguyên:

Ảnh của Cristian Escobar trên Unsplash.