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

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

Adam Argyle

Khi viết CSS, đôi khi bạn có thể thấy các danh sách bộ chọn dài để nhắm mục tiêu 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 bất kỳ thẻ <b> nào bên trong một phần tử tiêu đề, bạn có thể viết như sau:

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

Thay vào đó, bạn có thể dùng :is() để cải thiện mức độ dễ đọc, đồng thời tránh sử dụng bộ chọn dài:

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

Mức độ dễ đọ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ẽ tìm hiểu cú pháp và giá trị của 2 bộ chọn giả chức năng này.

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

:is()

:where()

Gặp gỡ :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à những lệnh gọi hàm động thời gian chạy khớp với các phần tử. Khi viết CSS, chúng cung cấp cho bạn cách nhóm các phần tử với nhau ở giữa, đầu hoặc cuối bộ chọn. Chúng cũng có thể thay đổi tính cụ thể, giúp bạn huỷ bỏ hoặc tăng tính cụ thể.

Nhóm bộ chọn

Mọi việc :is() có thể làm liên quan đến việc nhóm, thì :where() cũng có thể. Đ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 và xếp chồng chúng. Hoàn toàn linh hoạt của CSS mà bạn biết và yêu thích. Sau đâ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 hai 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à lặp lại bộ chọn.

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

Để xem lại các bộ chọn, hãy xem mô-đun bộ chọn trên Learn CSS. Dưới đây là một vài ví dụ về các bộ chọn đơn giản và phức tạp để giú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. Đã đến lúc xem xét sự khác biệt giữa các mô-đun này.

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

Khi nói đến tính cụ thể, :is() và :where() rất khác biệt. Để ôn lại kiến thức về tính cụ thể, hãy xem mô-đun tính cụ thể trên Learn CSS.

Tóm tắt

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

Tôi chỉ muốn sử dụng bộ chọn độ cụ thể cao nhất trong danh sách khi thấy quá hứng thú với việc phân nhóm. Tôi luôn có thể cải thiện mức độ dễ đọc bằng cách chuyển bộ chọn có mức độ cụ thể cao sang bộ chọn riêng mà không có quá nhiều ảnh hưởng. Dưới đâ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ờ thấy các thư viện cung cấp các phiên bản không có mức cụ thể. Sự cạnh tranh về tính cụ thể giữa kiểu tác giả và kiểu thư viện có thể kết thúc. Không có đặc điểm cụ thể để cạnh tranh khi viết CSS. CSS đã nghiên cứu tính năng nhóm như thế này được khá lâu, tính năng này đã xuất hiện và phần lớn vẫn là lãnh thổ chưa được khám phá. Hãy thoả sức tạo các biểu định kiểu nhỏ hơn và xoá dấu phẩy.

Ảnh của Markus Winkler trên Unsplash