Giả sử bạn đã tạo một số kiểu ban đầu cho trang web của mình và bạn nhận thấy mình đang lặp lại một số giá trị trong CSS. Bạn đang sử dụng dodgerblue làm màu chính và bạn đang thêm màu đó vào đường viền nút, văn bản của đường liên kết, nền tiêu đề, đồng thời sử dụng một công cụ thiết kế để chọn một số biến thể của màu xanh dương đó cho các phần khác của trang web. Sau đó, bạn sẽ nhận được một bản hướng dẫn về phong cách và màu chính hiện là oklch(70% 0.15 270).
Các thuộc tính tuỳ chỉnh hoặc biến CSS cho phép bạn sắp xếp và sử dụng lại các giá trị trong CSS, nhờ đó, các kiểu của bạn sẽ linh hoạt hơn và dễ hiểu hơn.
Tạo tài sản
Cách đơn giản nhất để tạo một thuộc tính là đặt một giá trị cho thuộc tính mới bằng tên mà bạn xác định.
.card {
--base-size: 1em;
}
Tất cả tên thuộc tính phải bắt đầu bằng hai dấu gạch ngang. Điều này giúp bạn không cố gắng sử dụng tên thuộc tính CSS hiện có cho một giá trị tuỳ chỉnh. Quy cách CSS sẽ không bao giờ thêm một thuộc tính bắt đầu bằng hai dấu gạch ngang.
Sau đó, bạn có thể truy cập vào thuộc tính này bằng hàm var(). Ví dụ này đặt kích thước phông chữ trong .card-title thành gấp đôi giá trị --base-size.
.card .card-title {
font-size: calc(2 * var(--base-size));
}
Sử dụng thuộc tính tuỳ chỉnh
Như bạn thấy, bạn có thể sử dụng giá trị của một thuộc tính tuỳ chỉnh bằng hàm var(). Bạn có thể sử dụng hàm var() trong các giá trị, nhưng không thể sử dụng trong các truy vấn nội dung nghe nhìn. Chúng đặc biệt hữu ích khi là đối số cho các hàm CSS khác.
Dự phòng
Điều gì xảy ra nếu bạn cố gắng sử dụng một thuộc tính tuỳ chỉnh chưa được đặt giá trị? Hàm var() lấy giá trị thứ hai sẽ được dùng làm giá trị dự phòng. Giá trị dự phòng thậm chí có thể là một thuộc tính tuỳ chỉnh khác có var() được lồng.
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
Giá trị không hợp lệ
Nếu một thuộc tính tuỳ chỉnh phân giải thành một giá trị không hợp lệ, ví dụ: giá trị 1em cho thuộc tính background-color, thì các khai báo hợp lệ khác trên phần tử đó cho thuộc tính đó sẽ không được sử dụng. Điều này là do trình duyệt không thể biết liệu một giá trị có không hợp lệ hay không cho đến khi trình duyệt loại bỏ các khai báo khác khi tính toán một giá trị. Thay vào đó, giá trị được dùng sẽ là giá trị kế thừa hoặc giá trị ban đầu.
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
Trong ví dụ trước, phần tử .invalid sẽ không có nền màu xanh dương. Thay vào đó, vì background-color không kế thừa, nên giá trị sẽ là transparent (giá trị ban đầu).
Ghi đè và kế thừa
Thông thường, bạn sẽ muốn hành vi mặc định của các thuộc tính tuỳ chỉnh, tức là các giá trị sẽ được kế thừa. Khi bạn đặt một giá trị mới cho một thuộc tính, phần tử đó và tất cả các phần tử con của nó sẽ có giá trị đó cho đến khi giá trị đó bị ghi đè bằng một giá trị khác.
Các thuộc tính tuỳ chỉnh được xác định bằng cascade, vì vậy, bạn cũng có thể ghi đè thuộc tính này bằng một bộ chọn cụ thể hơn.
Kiểm soát nhiều hơn bằng @property
Thuộc tính tuỳ chỉnh được tạo bằng cách đặt một giá trị có thể là bất kỳ loại nào và được kế thừa. Để kiểm soát tốt hơn một thuộc tính tuỳ chỉnh, bạn có thể sử dụng quy tắc @property.
Thuộc tính --base-size mà chúng ta đã tạo trước đó sẽ tương đương với khai báo @property này.
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
Giá trị syntax đặt các loại giá trị CSS hợp lệ cho thuộc tính. Nếu bạn đặt một loại khác cho thuộc tính đó, thì thuộc tính đó sẽ không hợp lệ và quay về giá trị ban đầu hoặc giá trị được kế thừa được đặt cao hơn trong tầng.
Khi tạo một thuộc tính tuỳ chỉnh bằng @property, bạn có thể tắt tính năng kế thừa bằng inherit: false. Việc ghi đè giá trị cho một thuộc tính tuỳ chỉnh khi tắt tính năng kế thừa sẽ thay đổi giá trị đó cho phần tử đã chọn, nhưng không thay đổi cho các phần tử con. Điều này thường hữu ích khi nhiều bộ chọn nhắm đến cùng một phần tử.
initial-value đặt giá trị của thuộc tính, trừ phi giá trị đó được thay đổi sau này. Trừ phi cú pháp là * (nghĩa là mọi loại CSS), @property phải đặt initial-value. Điều này đảm bảo rằng thuộc tính sẽ luôn có giá trị của cú pháp được chỉ định và sẽ không bao giờ không xác định.
Cập nhật thuộc tính tuỳ chỉnh bằng JavaScript
Bạn có thể cập nhật giá trị của một thuộc tính tuỳ chỉnh trên một phần tử bằng JavaScript. Bạn có thể dùng JavaScript để cập nhật kiểu của trang web một cách linh hoạt.
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
Ví dụ này cập nhật thẻ kiểu trên phần tử #my-button và kiểm tra thẻ này trong Công cụ cho nhà phát triển sẽ cho bạn thấy:
<button id="my-button" style="--color: orange">Click me</button>
Trong ví dụ trước, bạn có thể thấy cách thiết lập các thuộc tính tuỳ chỉnh bằng cách truy cập vào dữ liệu được lưu trữ trong các thuộc tính HTML tuỳ chỉnh. Mỗi nút có một thuộc tính data-color với giá trị là một màu cụ thể. Thuộc tính tuỳ chỉnh --background được đặt trên phần tử nội dung sẽ được đặt lại thành giá trị của data-color trên bất kỳ nút nào được nhấp.
Bạn cũng có thể dùng getComputedStyle(element).getPropertyValue("--variable") để lấy giá trị của một thuộc tính trên một phần tử cụ thể. Điều này có thể hữu ích nếu logic của bạn cần phản hồi một giá trị xếp tầng.