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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS nổi tiếng thiếu cách chọn trực tiếp phần tử mẹ dựa trên phần tử con. Đâ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 hỗ trợ trên tất cả các trình duyệt chính) sẽ giải quyết vấn đề này. Trước :has(), bạn thường liên kết các bộ chọn dài hoặc thêm các lớp để chuyển 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 cháu. Hãy đọc thêm về bộ chọn :has() trong CSS Đã gói 2023 và 5 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng cần biết.

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

:has() là một phần của Cơ sở mới ra mắt.

Hỗ trợ trình duyệt

  • 105
  • 105
  • 121
  • 15,4

Nguồn

Hãy xem loạt bài đầy đủ trong bài viết 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á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ỏ tính năng 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 đang hoạt động liền mạch với 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 người dùng đang so sánh các gói. Hình ảnh sau đây cho thấy hai 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). Bạn chỉ có thể so sánh mỗi gói với một loại riêng. Bằng cách sử dụng :has(), khi người dùng chọn một loại gói thì không thể chọn được loại kế hoạch còn lại.

Triển khai :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 theo danh mục.

Mã

:has() cho phép bạn truy cập vào các phần tử mẹ tạo kiểu và các phần tử con của các phần tử đó. 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" sẽ không phản ứng lại với 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. Chúng có một bài kiểm tra cùng dòng cho người dùng và sử dụng :has() để kiểm tra trạng thái của 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ó, ả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 là một hộp đánh dấu. Policybazaar kiểm tra xem câu hỏi đã được trả lời bằng cách sử dụng :has(input:checked) hay chưa. Nếu đã 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 đến câu hỏi tiếp theo. Hãy xem cách hoạt động trong đ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 lớp .playIcon, thì lớp phủ CSS sẽ được thêm. Ở đây, bộ chọn :has() được sử dụng cùng với bộ chọn lồng & trong lớp .thumbnailWrapper tổng thể áp dụng cho tất cả các hình thu nhỏ. Thao tác này sẽ tạo 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ã

Mã sau đây sử dụng bộ chọn và bộ kết hợp CSS (& và >) và lồng bằng :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 quy tắc dự phòng. Quy tắc @supports selector(:has(*)) cũng được dùng để kiểm tra khả năng hỗ trợ trình duyệt. 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 lưu ý 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. Hãy xem một số ví dụ trong mục has() bộ chọn gia đình.

Tài nguyên:

Khám phá các bài viết khác trong loạt bài này về cách các công ty thương mại điện tử được 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 di chuyển, chuyển đổi khung hiển thị, cửa sổ bật lên và truy vấn vùng chứa.