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 của 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.

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

:is()

:where()

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ó 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 đó. Tính linh hoạt đầy đủ của CSS 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 thể hiện tính linh hoạt của hai lớp giả lập chức năng này. Để tìm các 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 tập 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ó thể thay thế cho nhau về mặt cú pháp. 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() khác biệt rất nhiều. Để ô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 thuộc loại này.
• :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ó độ cụ thể cao nhất trong danh sách chỉ là một sai lầm đối với tôi khi tôi quá hào hứng với việc nhóm. Tôi luôn có thể cải thiện khả năng đọc bằng cách di chuyển bộ chọn có độ cụ thể cao sang bộ chọn riêng của bộ chọn đó, nơi bộ chọn đó sẽ không ảnh hưởng nhiều. 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ể. Cuộc 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