CSS nổi tiếng thiếu cách chọn trực tiếp phần tử mẹ dựa trên
con của nó. Đây là yêu cầu hàng đầu của các nhà phát triển trong nhiều năm. Chiến lược phát hành đĩa đơn
Bộ chọn :has()
(hiện được tất cả các trình duyệt chính hỗ trợ) sẽ giải quyết vấn đề này. Trước
:has()
, bạn thường nên tạo chuỗi các bộ chọn dài hoặc thêm các lớp để tạo kiểu hook. Bây giờ
bạn có thể tạo kiểu dựa trên mối quan hệ của một phần tử với các phần tử con cháu của nó. Đọc thêm
về bộ chọn :has()
trong
CSS kết thúc năm 2023 và
5 đoạn mã CSS mà nhà phát triển giao diện người dùng nào cũng nên biết.
Mặc dù bộ chọn này có vẻ nhỏ, nhưng nó có thể hỗ trợ một số lượng lớn trường hợp sử dụng.
Bài viết này cho thấy một số trường hợp sử dụng mà các công ty thương mại điện tử đã đạt được bằng
Bộ chọn :has()
.
:has()
là một phần của chương trình Baseline Newly Available.
Hãy xem toàn bộ loạt video có trong bài viết này, trong đó thảo luận về cách các công ty thương mại điện tử đã nâng cao trang web của họ bằng cách sử dụng các tính năng mới về CSS và giao diện người dùng.
Policybazaar
Với bộ chọn
:has()
, chúng tôi có thể loại bỏ tính năng xác thực dựa trên JavaScript lựa chọn của người dùng và thay thế bằng một giải pháp CSS đang hoạt động liền mạch cho chúng tôi bằng trải nghiệm như trước đây.—Aman Soni, Trưởng nhóm công nghệ, Policybazaar
Nhóm Đầu tư của Policybazaar đã khéo léo áp dụng bộ chọn :has()
để cung cấp
dấu hiệu trực quan rõ ràng cho những người dùng đang so sánh các gói. Hình ảnh sau đây
cho thấy hai loại kế hoạch trong giao diện người dùng so sánh (màu vàng và màu xanh dương). Mỗi gói
chỉ có thể so sánh với loại của chính nó. Bằng cách sử dụng :has()
, khi người dùng chọn một
không thể chọn loại kế hoạch mà loại kế hoạch khác.
:has()
để tạo kiểu cho phần tử mẹ và phần tử con để tạo
chức năng lựa chọn giới hạn danh mục.Mã
:has()
cho phép bạn tạo kiểu cho các phần tử mẹ và phần tử con. Chiến lược phát hành đĩa đơn
đoạn mã sau đây sẽ kiểm tra xem vùng chứa mẹ có tập hợp lớp .disabled-group
hay không.
Nếu có, thẻ sẽ chuyển sang màu xám và nút "Thêm" không được phép tạo nút
tương tác với các lượt nhấp bằng cách đặt pointer-events
thành none
.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Nhóm sức khoẻ tại Policybazaar được triển khai
một trường hợp sử dụng hơi khác. Có một bài kiểm tra cùng dòng cho người dùng và họ
:has()
để đánh dấu trạng thái của hộp đánh dấu câu hỏi để xem câu hỏi có
đã trả lời. Nếu có, ảnh động sẽ được áp dụng để chuyển sang câu hỏi tiếp theo.
Mã
Trong ví dụ về việc so sánh kế hoạch, :has()
được dùng để kiểm tra sự hiện diện của
. Bạn cũng có thể kiểm tra trạng thái của một yếu tố đầu vào, chẳng hạn như hộp đánh dấu bằng cách sử dụng
:has(input:checked)
. Trong hình ảnh minh hoạ bài kiểm tra, mỗi câu hỏi trong
biểu ngữ màu tím là một hộp đánh dấu. Policybazaar kiểm tra xem câu hỏi đã được
đã trả lời bằng :has(input:checked)
và nếu có, hãy kích hoạt ảnh động bằng cách sử dụng
animation: quesSlideOut 0.3s 0.3s linear forwards
để trượt đến trang tiếp theo
. Xem cách hoạt động của chế độ này trong mã sau.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
Tokopedia đã dùng :has()
để tạo hình ảnh lớp phủ nếu hình thu nhỏ của sản phẩm
có chứa video. Nếu hình thu nhỏ của sản phẩm chứa lớp .playIcon
, thì CSS
sẽ được thêm lớp phủ. Ở đây, bộ chọn :has() được dùng cùng với &
bộ chọn lồng nhau trong lớp .thumbnailWrapper
tổng quát được áp dụng
cho tất cả các hình thu nhỏ. Việc này sẽ tạo ra CSS theo mô-đun và dễ đọc hơn.
![Ảnh chụp màn hình trang Tokopedia trước và sau khi sử dụng bộ chọn have.](https://developer.chrome.com/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=9&hl=vi)
:has()
.Mã
Mã sau đây sử dụng
Bộ chọn và tổ hợp CSS
(&
và >
) và lồng với :has()
để tạo kiểu cho hình thu nhỏ.
Đối với yêu cầu không hỗ trợ
trình duyệt, thì quy tắc lớp CSS bổ sung thông thường sẽ được sử dụng làm phương án dự phòng. Chiến lược phát hành đĩa đơn
Quy tắc @supports selector(:has(*))
cũng dùng để kiểm tra xem trình duyệt có hỗ trợ hay không.
Do đó, trải nghiệm tổng thể là giống nhau trên các phiên bản trình duyệt.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
Những điều cần cân nhắc khi sử dụng :has()
Kết hợp :has()
với các bộ chọn khác để tạo một điều kiện phức tạp hơn. Séc
một số ví dụ trong has() bộ chọn gia đình.
Tài nguyên:
- CSS kết thúc năm 2023
- :has(): bộ chọn gia đình
- Bản minh hoạ :has()
- Bạn muốn báo cáo lỗi hay yêu cầu tính năng mới? Chúng tôi muốn nghe ý kiến của bạn!
Hãy khám phá các bài viết khác trong loạt bài viết này về cách thương mại điện tử các công ty được hưởng lợi từ việc sử dụng các tính năng mới của CSS và giao diện người dùng, chẳng hạn như Điều hướng cuộn ảnh động, hiệu ứng chuyển đổi khung hiển thị, cửa sổ bật lên và các truy vấn vùng chứa.