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 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ỗ trợ trình duyệt

  • Chrome: 105.
  • Cạnh: 105.
  • Firefox: 121.
  • Safari: 15.4.

Nguồn

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.

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 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.

health.policybazaar.com/

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.
Trước và sau khi sử dụng :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:

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.