nghiên cứu điển hình về :has()

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

CSS nổi tiếng là thiếu cách chọn trực tiếp một phần tử mẹ dựa trên các phần tử con của phần tử đó. Đây là yêu cầu hàng đầu của các nhà phát triển trong nhiều năm. 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 đây :has(), bạn thường xâu chuỗi các bộ chọn dài hoặc thêm các lớp cho các hook tạo kiểu. Giờ đây, 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 của nó. Đọc thêm về bộ chọn :has() trong CSS Wrapped 2023 và 5 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng nên biết.

Mặc dù bộ chọn này có vẻ nhỏ, nhưng nó có thể hỗ trợ rất nhiều trường hợp sử dụng. Bài viết này trình bày một số trường hợp sử dụng mà các công ty thương mại điện tử đã khai thác được nhờ bộ chọn :has().

Hãy xem toàn bộ loạt bài mà bài viết này là một phần trong đó. Loạt bài này 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 CSS và giao diện người dùng mới.

Policybazaar

Với bộ chọn :has(), chúng tôi có thể loại bỏ quy trình xác thực dựa trên JavaScript đối với lựa chọn của người dùng và thay thế bằng một giải pháp CSS hoạt động liền mạch cho chúng tôi với trải nghiệm tương tự như trước đây. – Aman Soni, Trưởng nhóm kỹ thuật, Policybazaar

Nhóm Đầu tư của Policybazaar đã khéo léo áp dụng bộ chọn :has() để cung cấp chỉ báo 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 2 loại gói 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 gói cùng loại. Bằng cách sử dụng :has(), khi người dùng chọn một loại kế hoạch, họ sẽ không thể chọn loại kế hoạch khác.

Triển khai :has() để định kiểu cho phần tử mẹ và phần tử con của phần tử mẹ nhằm tạo chức năng chọn theo danh mục.

Mã

:has() cho phép bạn truy cập vào các phần tử mẹ và phần tử con của kiểu. Đoạn mã sau đây kiểm tra xem vùng chứa gốc có được đặt lớp .disabled-group hay không. Nếu có, thẻ sẽ chuyển sang màu xám và nút "Thêm" sẽ không phản hồ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 đã triển khai một trường hợp sử dụng hơi khác. Họ có một bài kiểm tra tại chỗ cho người dùng và sử dụng :has() để kiểm tra trạng thái hộp đánh dấu câu hỏi nhằm xem câu hỏi đã được trả lời hay chưa. Nếu có, một ảnh động sẽ được áp dụng để chuyển sang câu hỏi tiếp theo.

health.policybazaar.com/

Mã

Trong ví dụ so sánh kế hoạch, :has() được dùng để kiểm tra sự hiện diện của một lớp. Bạn cũng có thể kiểm tra trạng thái của một phần 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 đều là một hộp đánh dấu. Policybazaar kiểm tra xem câu hỏi đã được trả lời hay chưa bằng cách sử dụng :has(input:checked) và nếu đã được trả lời, hãy kích hoạt một ảnh động bằng cách sử dụng animation: quesSlideOut 0.3s 0.3s linear forwards để chuyển sang câu hỏi tiếp theo. Xem cách hoạt động của đoạn 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 đã sử 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ỏ sản phẩm chứa một lớp .playIcon, thì một lớp phủ CSS sẽ được thêm vào. Ở đây, bộ chọn :has() được dùng cùng với bộ chọn lồng & trong lớp .thumbnailWrapper bao quát áp dụng cho tất cả hình thu nhỏ. Điều này giúp 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 has.
Trước và sau khi sử dụng :has().

Mã

Đoạn mã sau đây sử dụng bộ chọn và bộ kết hợp CSS (& và >) và tính năng lồng với :has() để tạo kiểu cho hình thu nhỏ. Đối với các trình duyệt không hỗ trợ, quy tắc lớp CSS bổ sung thông thường sẽ được dùng làm phương án dự phòng. Quy tắc @supports selector(:has(*)) cũng được dùng để kiểm tra khả năng hỗ trợ của trình duyệt. Do đó, trải nghiệm tổng thể là như 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 ra một điều kiện phức tạp hơn. Hãy xem một số ví dụ trong has() bộ chọn họ.

Tài nguyên:

Khám phá các bài viết khác trong loạt bài này để tìm hiểu về cách các công ty thương mại điện tử hưởng lợi từ việc sử dụng các tính năng CSS và giao diện người dùng mới như ảnh động dựa trên thao tác cuộn, hiệu ứng chuyển đổi khung hiển thị, truy vấn cửa sổ bật lên và truy vấn vùng chứa.