Khả năng truy vấn kích thước cùng dòng của nhà xuất bản mẹ và các giá trị đơn vị truy vấn vùng chứa gần đây đã được hỗ trợ ổn định trong tất cả các công cụ trình duyệt hiện đại.
Tuy nhiên, thông số phòng chứa không chỉ bao gồm các truy vấn về kích thước mà còn cho phép truy vấn các giá trị kiểu của phần tử mẹ. Từ Chromium 111, bạn sẽ có thể áp dụng vùng chứa kiểu cho các giá trị thuộc tính tuỳ chỉnh và truy vấn một phần tử mẹ cho giá trị của một thuộc tính tuỳ chỉnh.
Điều này có nghĩa là chúng ta thậm chí có thể kiểm soát các kiểu trong CSS tốt hơn và cho phép tách biệt tốt hơn logic và lớp dữ liệu của ứng dụng khỏi các kiểu của ứng dụng.
Thông số cấp 3 của Mô-đun lưu trữ CSS, trong đó bao gồm các truy vấn về kích thước và kiểu, cho phép truy vấn bất kỳ kiểu nào từ phần tử mẹ, bao gồm cả các cặp thuộc tính và giá trị như font-weight: 800. Tuy nhiên, trong quá trình triển khai tính năng này, truy vấn kiểu hiện chỉ hoạt động với các giá trị thuộc tính tuỳ chỉnh CSS. Điều này vẫn rất hữu ích cho việc kết hợp kiểu và tách dữ liệu khỏi thiết kế. Hãy cùng xem cách bạn sử dụng truy vấn kiểu với thuộc tính tuỳ chỉnh CSS:
Bắt đầu tìm kiếm kiểu
Giả sử chúng ta có HTML sau:
<ul class="card-list">
<li class="card-container">
<div class="card">
...
</div>
</li>
</ul>
Để sử dụng truy vấn kiểu, trước tiên, bạn phải thiết lập một phần tử vùng chứa. Điều này yêu cầu cách tiếp cận hơi khác, tuỳ thuộc vào việc bạn đang truy vấn tài khoản mẹ trực tiếp hay gián tiếp.
Truy vấn cha mẹ trực tiếp
Không giống như các truy vấn kiểu, bạn không cần áp dụng vùng chứa bằng cách sử dụng thuộc tính container-type hoặc container cho .card-container để .card có thể truy vấn các kiểu của thành phần mẹ trực tiếp. Tuy nhiên, chúng ta cần phải áp dụng các kiểu (giá trị thuộc tính tuỳ chỉnh trong trường hợp này) cho một vùng chứa (trong trường hợp này là .card-container) hoặc bất kỳ phần tử nào chứa phần tử mà chúng ta đang tạo kiểu trong DOM. Chúng ta không thể áp dụng các kiểu đang truy vấn trên phần tử trực tiếp mà chúng ta đang tạo kiểu bằng truy vấn đó vì điều này có thể gây ra vòng lặp vô hạn.
Để truy vấn trực tiếp tệp gốc, bạn có thể viết:
/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
.card {
background-color: wheat;
border-color: brown;
...
}
}
Bạn có thể nhận thấy rằng truy vấn kiểu gói truy vấn bằng style(). Điều này nhằm phân biệt giá trị kích thước từ kiểu. Ví dụ: bạn có thể viết truy vấn về chiều rộng của vùng chứa dưới dạng @container (min-width: 200px) { … }. Thao tác này sẽ áp dụng kiểu nếu vùng chứa gốc có chiều rộng tối thiểu là 200px. Tuy nhiên, min-width cũng có thể là một thuộc tính CSS và bạn có thể truy vấn giá trị CSS của min-width bằng các truy vấn kiểu. Đó là lý do bạn nên sử dụng trình bao bọc style() để làm rõ sự khác biệt: @container style(min-width: 200px) { … }.
Tạo kiểu thư mục mẹ không trực tiếp
Nếu muốn truy vấn kiểu cho bất kỳ phần tử nào không phải phần tử mẹ trực tiếp, bạn cần cung cấp container-name cho phần tử đó. Ví dụ: chúng ta có thể áp dụng các kiểu cho .card dựa trên kiểu của .card-list bằng cách cung cấp cho .card-list một container-name và tham chiếu đến kiểu đó trong truy vấn kiểu.
/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
.card {
...
}
}
Nói chung, phương pháp hay nhất là đặt tên cho vùng chứa để làm rõ nội dung bạn đang truy vấn và mở khóa khả năng truy cập các vùng chứa đó dễ dàng hơn. Một ví dụ hữu ích là nếu bạn muốn tạo kiểu cho các phần tử ngay trong .card. Nếu không có vùng chứa có tên trên .card-container, họ không thể truy vấn trực tiếp vùng chứa đó.
Nhưng trong thực tế, tất cả những điều này lại có ý nghĩa hơn rất nhiều trong thực tế. Hãy cùng xem xét một số ví dụ:
Tạo kiểu cho cụm từ tìm kiếm trong thực tế
Truy vấn kiểu đặc biệt hữu ích khi bạn có một thành phần có thể sử dụng lại với nhiều biến thể hoặc khi bạn không có quyền kiểm soát tất cả các kiểu của mình nhưng cần áp dụng các thay đổi trong một số trường hợp nhất định. Ví dụ này cho thấy một bộ thẻ sản phẩm có cùng thành phần thẻ. Một số thẻ sản phẩm có thông tin chi tiết/ghi chú bổ sung, chẳng hạn như "Mới" hoặc "Có ít hàng", do một tài sản tuỳ chỉnh có tên là --detail kích hoạt. Ngoài ra, nếu sản phẩm ở trạng thái "Còn ít", sản phẩm đó sẽ có nền có đường viền màu đỏ đậm. Loại thông tin này có thể do máy chủ hiển thị và có thể được áp dụng cho thẻ thông qua các kiểu cùng dòng như sau:
<div class="product-list">
<div class="product-card-container" style="--detail: new">
<div class="product-card">
<div class="media">
<img .../>
<div class="comment-block"></div>
</div>
</div>
<div class="meta">
...
</div>
</div>
<div class="product-card-container" style="--detail: low-stock">
...
</div>
<div class="product-card-container">
...
</div>
...
</div>
Với dữ liệu có cấu trúc này, bạn có thể chuyển các giá trị đến --detail và sử dụng thuộc tính tuỳ chỉnh CSS này để áp dụng các kiểu:
@container style(--detail: new) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'New';
border: 1px solid currentColor;
background: white;
...
}
}
@container style(--detail: low-stock) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'Low Stock';
border: 1px solid currentColor;
background: white;
...
}
.media-img {
border: 2px solid brickred;
}
}
Đoạn mã ở trên cho phép chúng ta áp dụng khối cho --detail: low-stock và --detail: new, nhưng bạn có thể nhận thấy sự dư thừa trong khối mã. Hiện tại, không có cách nào để truy vấn chỉ sự hiện diện của --detail bằng @container style(--detail). Điều này sẽ cho phép chia sẻ kiểu tốt hơn và ít lặp lại hơn. Chức năng này hiện đang được thảo luận trong nhóm làm việc.
Thẻ thời tiết
Ví dụ trước sử dụng một thuộc tính tuỳ chỉnh duy nhất có nhiều giá trị có thể áp dụng để áp dụng kiểu. Tuy nhiên, bạn cũng có thể kết hợp các tài sản đó bằng cách sử dụng và truy vấn nhiều thuộc tính tuỳ chỉnh. Hãy xem ví dụ về thẻ thời tiết này:
Để tạo kiểu cho độ dốc của nền và biểu tượng cho các thẻ này, hãy tìm đặc điểm thời tiết, chẳng hạn như "nhiều mây", "nhiều mưa" hoặc "nắng":
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
Bằng cách này, bạn có thể tạo kiểu cho từng thẻ dựa trên đặc điểm riêng của thẻ đó. Tuy nhiên, bạn cũng có thể tạo kiểu cho các tổ hợp đặc điểm (thuộc tính tuỳ chỉnh) bằng cách sử dụng bộ kết hợp and theo cách tương tự như đối với truy vấn nội dung đa phương tiện. Ví dụ: một ngày có cả mây và nắng sẽ diễn ra như sau:
@container style(--sunny: true) and style(--cloudy: true) {
.weather-card {
background: linear-gradient(24deg, pink, violet);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: violet;
}
}
Tách dữ liệu khỏi thiết kế
Trong cả hai bản minh hoạ này, việc phân tách lớp dữ liệu (DOM sẽ hiển thị trên trang) khỏi các kiểu được áp dụng đều mang lại lợi ích về mặt cấu trúc. Các kiểu được viết dưới dạng các biến thể có thể tồn tại trong kiểu thành phần, trong khi một điểm cuối có thể gửi dữ liệu mà sau đó sử dụng để tạo kiểu cho thành phần. Bạn có thể sử dụng một giá trị duy nhất (chẳng hạn như trong trường hợp đầu tiên là cập nhật giá trị --detail hoặc nhiều biến), chẳng hạn như trong trường hợp thứ hai (thiết lập --rainy, --cloudy hoặc --sunny). Và điều tốt nhất là bạn cũng có thể kết hợp các giá trị này, việc kiểm tra cả --sunny và --cloudy có thể cho thấy kiểu mây rải rác một phần.
Việc cập nhật các giá trị thuộc tính tuỳ chỉnh thông qua JavaScript có thể được thực hiện liền mạch, trong khi thiết lập mô hình DOM (tức là trong khi xây dựng thành phần trong khung), hoặc cập nhật bất cứ lúc nào bằng <parentElem>.style.setProperty('--myProperty’, <value>). I
Dưới đây là bản minh hoạ trong vài dòng mã, cập nhật --theme của nút và áp dụng các kiểu bằng cách sử dụng truy vấn kiểu và thuộc tính tuỳ chỉnh đó (--theme):
Tạo kiểu cho thẻ bằng truy vấn kiểu, JavaScript dùng để cập nhật các giá trị thuộc tính tuỳ chỉnh là:
const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');
themePicker.addEventListener('input', (e) => {
btnParent.style.setProperty('--theme', e.target.value);
})
Các tính năng được nêu chi tiết trong bài viết này mới chỉ là bước khởi đầu. Bạn có thể kỳ vọng rằng truy vấn vùng chứa sẽ nhận được nhiều lợi ích hơn để giúp bạn xây dựng giao diện thích ứng và linh động. Riêng đối với các truy vấn về kiểu, vẫn còn một vài vấn đề chưa được giải quyết. Một là triển khai truy vấn kiểu cho kiểu CSS ngoài thuộc tính tuỳ chỉnh. Tính năng này đã là một phần của cấp độ thông số kỹ thuật hiện tại, nhưng chưa được triển khai trong bất kỳ trình duyệt nào. Hoạt động đánh giá ngữ cảnh boolean dự kiến sẽ được thêm vào cấp thông số kỹ thuật hiện tại khi vấn đề tồn đọng được giải quyết, trong khi việc truy vấn phạm vi được lên kế hoạch cho cấp độ tiếp theo của thông số kỹ thuật.