CSS :is() и :where() уже на пути в браузеры

CSS :is() и :where() уже на пути в браузеры

От создателя: новейшие псевдо-классы CSS :is() и :where() сейчас поддерживаются в подготовительных версиях Safari (Tech Preview 106) и Firefox (версия 78). Реализация в Chrome остается с флагом.

Используйте :is(), чтоб уменьшить количество повторений

Вы сможете употреблять псевдо-класс :is()для удаления повторений в перечнях селекторов.

CSS

12345678910/* 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> отсутствует:

READ
Ориентация изображений в Веб

CSS

123svg:not([fill]) {  fill: currentColor;}

Из-за наиболее высочайшей специфики (B = 1, C = 1) сайт не может переопределить это объявление одним селектором класса (B = 1) и обязан добавить !important либо искусственно прирастить специфика селектора (к примеру, .share-icon.share-icon).

CSS

123.share-icon {  fill: blue; /* не применяется из-за низшей специфики */}

Библиотеки CSS и базисные таблицы стилей могут избежать данной препядствия, оборачивая селекторы атрибутов в :where(), чтоб поддерживать низкую общую специфика селектора (C = 1).

CSS

123456789/* sanitize.css */svg:where(:not([fill])) {  fill: currentColor;} /* авторская таблица стилей */.share-icon {  fill: blue; /* применяется из-за высшей специфики */}

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий