:is() є поточною назвою псевдокласу «Збіги - будь-який» у робочому проекті CSS4.
Спочатку цей псевдо-клас був названий :any()і був реалізований з обмеженою підтримкою конкретного постачальника:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Потім ім’я псевдо-класу „Збіги - будь-яке” було змінено на :matches()попередні версії робочого проекту CSS4, з додатковою (неповною) підтримкою для деяких браузерів.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Нарешті, поточний робочий проект перейменував цей псевдо-клас на :is(), який в даний час не підтримується у браузерах.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Мета селектора «Збігається з будь-яким» (з усіма його назвами) полягає в тому, щоб полегшити написання складних груп селекторів.
Синтаксис
/* 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; )Гей, це не як попередня обробка CSS?
Спрощення селекторів :is()дійсно схоже на те, як препроцесори CSS обробляють вкладені правила:
/* 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()! */Але будьте обережні! Попередні процесори, як Sass, “розгортають” ваші вкладені правила у список легко зрозумілих селекторів. :is()буде обробляти правила конкретності трохи інакше:
Специфіка цікава
Відповідно до робочого проекту CSS4:
Специфічність псевдокласу: is () замінюється специфікою його найбільш конкретного аргументу. Таким чином, селектор, записаний із: is (), не обов'язково має еквівалентну специфічність еквівалентному селектору, записаному без: is ().
Це означає, що специфічність :is()автоматично оновлюється до найбільш конкретного елемента у списку аргументів:
/* 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`! */Підтримка браузера
Ми про це вже говорили раніше, але :is()наразі не підтримуємо браузер. Він був введений у редакторському проекті 1 специфікації CSS Selectors Level 4. Це означає, що речі все ще формуються, що робить браузерам трохи рано згуртувати подібну концепцію.
Тим не менш, ми маємо чудову підтримку браузера у вигляді :matches(з попередньо встановленим продавцем :anyзаповненням деяких прогалин) для загальної функціональності. І, звичайно, :notце ще один псевдо-клас, який може допомогти у відповідності.
Що цікаво відзначити, так це те, що :is()було представлено після, :matchesяке було введено після :any. Це ніби :anyзамінюється тим, :matchesщо замінюється :is(), при цьому деталі змінюються по ходу. Завжди охайний, щоб побачити, як ці речі розвиваються.
Щоб отримати максимальну підтримку програми "Збіги-будь-які", потрібно використовувати поєднання історичних назв, оскільки на даний момент обробка браузером - це нагромадження префіксів постачальників та експериментальних налаштувань.
/* 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 ( /*… */ )Див. Приклади Pen: будь-якого псевдокласу від CSS-Tricks (@ css-tricks) на CodePen.
Пов’язані
:matches():not():any-link()
Ресурси
- Допис у блозі Девіда Барона, в якому пояснюється, чому він додав
:-moz-anyпідтримку Gecko - Документація MDN
- Специфікація CSS Selectors Level 4 (Чернетка редактора 1): Специфікація, яка вводить
:is()псевдо-клас. - Познайомтесь із селекторами псевдокласів: CSS-Tricks повідомляє про те, як працюють псевдокласи.