:is() là tên hiện tại của lớp giả “Khớp-Bất kỳ” trong bản nháp làm việc CSS4.
Ban đầu, lớp giả này được đặt tên :any()và được triển khai với sự hỗ trợ giới hạn dành riêng cho nhà cung cấp:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Sau đó, tên lớp giả “Phù hợp-Bất kỳ” đã được đổi thành :matches()trong các phiên bản đầu tiên của bản nháp làm việc CSS4, với hỗ trợ bổ sung (không đầy đủ) được cung cấp cho một số trình duyệt.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Cuối cùng, bản nháp làm việc hiện tại đã đổi tên lớp giả này thành, lớp :is()này hiện không được hỗ trợ trong các trình duyệt.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Mục tiêu của bộ chọn “Khớp với Bất kỳ” (với tất cả các tên của nó) là làm cho các nhóm bộ chọn phức tạp dễ viết hơn.
Cú pháp
/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Này, điều đó không giống như tiền xử lý CSS sao?
Việc đơn giản hóa các bộ chọn với :is()thực sự tương tự như cách các bộ tiền xử lý CSS xử lý các quy tắc lồng nhau:
/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */Nhưng hãy cẩn thận! Các bộ tiền xử lý, như Sass, “giải nén” các quy tắc lồng nhau của bạn vào một danh sách các bộ chọn dễ hiểu. :is()sẽ xử lý các quy tắc về tính cụ thể khác một chút:
Tính cụ thể là thú vị
Theo Dự thảo làm việc CSS4:
Tính cụ thể của lớp giả: is () được thay thế bằng tính cụ thể của đối số cụ thể nhất của nó. Do đó, một bộ chọn được viết bằng: is () không nhất thiết phải có độ đặc hiệu tương đương với bộ chọn tương đương được viết không có: is ().
Điều đó có nghĩa là tính cụ thể của :is()được tự động nâng cấp thành mục cụ thể nhất trong danh sách các đối số được cung cấp:
/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */Hỗ trợ trình duyệt
Chúng tôi đã đề cập đến điều này trước đó, nhưng :is()không có trình duyệt hỗ trợ vào lúc này. Nó đã được giới thiệu trong Bản nháp 1 của Người biên tập về Đặc điểm kỹ thuật cấp 4 của Bộ chọn CSS. Điều đó có nghĩa là mọi thứ vẫn đang được định hình nên còn hơi sớm để các trình duyệt tập hợp xung quanh một khái niệm như thế này.
Điều đó nói rằng, chúng tôi có hỗ trợ trình duyệt tuyệt vời dưới dạng :matches(với tiền tố nhà cung cấp :anyđiền vào một số khoảng trống) cho chức năng chung. Và, tất nhiên, :notlà một lớp giả khác có thể hỗ trợ so khớp.
Điều thú vị cần lưu ý là :is()được giới thiệu sau :matchesđó được giới thiệu sau :any. Nó giống như :anyđang được thay thế bằng :matchescái đang được thay thế bằng :is(), với các chi tiết thay đổi dọc theo đường đi. Luôn luôn gọn gàng để xem những thứ này phát triển như thế nào.
Để nhận được sự hỗ trợ tối đa cho "Đối sánh-Bất kỳ", yêu cầu sử dụng kết hợp các tên lịch sử, vì tại thời điểm này, việc xử lý trình duyệt là một mớ hỗn hợp của tiền tố nhà cung cấp và cài đặt thử nghiệm.
/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )Xem các ví dụ về Pen về: bất kỳ lớp giả nào bằng CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
:matches():not():any-link()
Tài nguyên
- Bài đăng trên blog của David Baron giải thích lý do tại sao anh ấy thêm
:-moz-anyhỗ trợ cho Gecko - Tài liệu MDN
- Đặc điểm kỹ thuật của Bộ chọn CSS cấp 4 (Bản thảo của người biên tập 1): Đặc tả giới thiệu lớp
:is()giả. - Gặp gỡ Bộ chọn lớp giả: CSS-Tricks đăng bài phác thảo cách hoạt động của lớp giả.