Bộ chọn lớp giả hàm mới của CSS :is() và :where()

Những nội dung bổ sung có vẻ nhỏ này vào cú pháp bộ chọn CSS sẽ có tác động lớn.

Adam Argyle

Khi viết CSS, đôi khi bạn có thể phải sử dụng danh sách bộ chọn dài để nhắm đến nhiều phần tử có cùng quy tắc kiểu. Ví dụ: nếu muốn điều chỉnh màu cho bất kỳ thẻ <b> nào tìm thấy bên trong phần tử tiêu đề, bạn có thể viết:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Thay vào đó, bạn có thể sử dụng :is() để cải thiện khả năng đọc mà không cần sử dụng bộ chọn dài:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

Khả năng đọc và sự tiện lợi của bộ chọn ngắn hơn chỉ là một phần giá trị mà :is() và :where() mang lại cho CSS. Trong bài đăng này, bạn sẽ khám phá cú pháp và giá trị của hai bộ chọn giả lập chức năng này.

Hình ảnh vô hạn về trước và sau khi sử dụng :is()

Khả năng tương thích với trình duyệt

:is()

Hỗ trợ trình duyệt

  • Chrome: 88.
  • Cạnh: 88.
  • Firefox: 78.
  • Safari: 14.

Nguồn

:where()

Hỗ trợ trình duyệt

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Nguồn

Giới thiệu :is() và :where()

Đây là các bộ chọn lớp giả có chức năng, hãy lưu ý () ở cuối và cách chúng bắt đầu bằng :. Hãy coi đây là các lệnh gọi hàm động trong thời gian chạy khớp với các phần tử. Khi viết CSS, các dấu ngoặc này giúp bạn nhóm các phần tử với nhau ở giữa, đầu hoặc cuối bộ chọn. Các tham số này cũng có thể thay đổi độ cụ thể, cho phép bạn vô hiệu hoá hoặc tăng độ cụ thể.

Nhóm bộ chọn

:where() cũng có thể làm mọi việc mà :is() có thể làm liên quan đến việc nhóm. Điều này bao gồm việc sử dụng ở bất kỳ vị trí nào trong bộ chọn, lồng ghép và xếp chồng các bộ chọn đó. Dịch vụ CSS hoàn chỉnh mà bạn biết và yêu thích. Dưới đây là một số ví dụ:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Mỗi ví dụ về bộ chọn ở trên đều minh hoạ tính linh hoạt của 2 lớp giả chức năng này. Để tìm những phần mã có thể hưởng lợi từ :is() hoặc :where(), hãy tìm các bộ chọn có nhiều dấu phẩy và bộ chọn lặp lại.

Sử dụng bộ chọn đơn giản và phức tạp bằng :is()

Để ôn lại về bộ chọn, hãy xem mô-đun bộ chọn trên trang Tìm hiểu CSS. Sau đây là một vài ví dụ về bộ chọn đơn giản và phức tạp để minh hoạ khả năng này:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Cho đến nay, :is() và :where() có cú pháp thay thế cho nhau. Giờ là lúc chúng ta cùng xem xét sự khác biệt giữa các loại này.

Sự khác biệt giữa :is() và :where()

Khi nói đến tính cụ thể, :is() và :where() sẽ có sự khác biệt rõ rệt. Để ôn lại về tính cụ thể, hãy xem mô-đun về tính cụ thể trên trang Học CSS.

Tóm tắt

  • :where() không có tính cụ thể.
    :where() hợp nhất tất cả tính cụ thể trong danh sách bộ chọn được truyền dưới dạng tham số hàm. Đây là tính năng bộ chọn đầu tiên.
  • :is() lấy độ cụ thể của bộ chọn cụ thể nhất.
    :is(a,div,#id) có điểm số về độ cụ thể của mã nhận dạng là 100 điểm.

Việc sử dụng bộ chọn độ cụ thể cao nhất trong danh sách chỉ là một vấn đề đối với tôi khi quá hào hứng với việc nhóm. Tôi luôn có thể cải thiện mức độ dễ đọc bằng cách di chuyển bộ chọn độ cụ thể cao sang bộ chọn riêng để bộ chọn không có nhiều tác động. Sau đây là ví dụ về ý tôi:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Với :where(), tôi đang chờ xem các thư viện cung cấp các phiên bản không có tính cụ thể. Sự cạnh tranh về tính đặc thù giữa kiểu của tác giả và kiểu của thư viện có thể kết thúc. Sẽ không có sự khác biệt cụ thể nào khi viết CSS. CSS đã làm việc trên một tính năng nhóm như thế này trong khá nhiều thời gian, tính năng này đã có sẵn và vẫn còn là một lãnh thổ chưa được khám phá. Hãy vui vẻ tạo các tệp kiểu nhỏ hơn và xoá dấu phẩy.

Ảnh chụp của Markus Winkler trên Unsplash