От автора: новые псевдо-классы CSS :is() и :where() теперь поддерживаются в предварительных версиях Safari (Tech Preview 106) и Firefox (версия 78). Реализация в Chrome остается с флагом.
Используйте :is(), чтобы уменьшить количество повторений
Вы можете использовать псевдо-класс :is()для удаления повторений в списках селекторов.
/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover { opacity: 1;
} /* AFTER */
:is(.embed, .attachment) .save-button:hover { opacity: 1;
}
Этот функционал в основном полезен в стандартном, необработанном коде CSS. Если вы используете Sass или похожий препроцессор CSS, вы можете вместо этого использовать вложение.
Специфичность :is() определяется его наиболее специфичным селектором аргумента. Посмотрите короткое видео Стефана Джудиса с аннотированным примером такого поведения.
Примечание. Браузеры также поддерживают нестандартные псевдо-классы :-webkit-any() и :-moz-any(), которые похожи на :is(), но являются более ограниченными. :-webkit-any() устарел в 2015 году, а Mozilla уже обновили таблицу стилей пользовательского агента Firefox, чтобы использовать :is() вместо:-moz-any().
Псевдо-класс :-webkit-any() не поддерживает сложные селекторы (например, .card p), и его специфичность всегда является только псевдо-классом (не определяется его аргументами).
Используйте :where(), чтобы сохранить специфичность низкой
Псевдо-класс :where() имеет тот же синтаксис и функционал, что и :is(). Единственная разница между ними заключается в том, что :where() не увеличивает общую специфичность селектора.
Ни псевдо-класс :where(), ни какой-либо из его аргументов не способствуют специфичности селектора — его специфичность всегда равна нулю.
Этот функционал полезен для стилей, которые должны быть легко переопределены, Например, базовая таблица стилей sanitize.css включает следующее правило стиля, которое устанавливает цвет заливки по умолчанию, если атрибут <svg fill> отсутствует:
svg:not([fill]) { fill: currentColor;
}
Из-за более высокой специфичности (B = 1, C = 1) веб-сайт не может переопределить это объявление одним селектором класса (B = 1) и вынужден добавить !important или искусственно увеличить специфичность селектора (например, .share-icon.share-icon).
.share-icon { fill: blue; /* не применяется из-за низшей специфичности */
}
Библиотеки CSS и базовые таблицы стилей могут избежать этой проблемы, оборачивая селекторы атрибутов в :where(), чтобы поддерживать низкую общую специфичность селектора (C = 1).
/* sanitize.css */
svg:where(:not([fill])) { fill: currentColor;
} /* авторская таблица стилей */
.share-icon { fill: blue; /* применяется из-за высшей специфичности */
}
Источник: https://webplatform.news
Редакция: Команда webformyself.
