18.10.2021

Новые функциональные селекторы псевдо-классов CSS :is() и :where()

Новые многофункциональные селекторы псевдо-классов CSS :is() и :where()

От создателя: при написании CSS иногда можно получить длинноватые списки селекторов для нацеливания на несколько частей с одинаковыми правилами стиля. Вместо этого можно использовать новые многофункциональные селекторы псевдо-классов.

К примеру, если вы хотите изменить цвет всех <b> внутри элемента заголовка, вы сможете написать:

CSS

Заместо этого вы можете использовать: is() и сделать лучше читаемость, избегая длинного селектора:

CSS

Понятность и удобство использования более недлинного селектора — это лишь часть того значения, которое :is() и :where() привносят в CSS. В этом посте мы разглядим синтаксис и значение этих двух многофункциональных псевдо-селекторов.

Поддержка браузерами

Псевдо-классы :is и :where поддерживаются в Chromium (> = 88), Firefox (> = 78) и Safari (> = 14). См. таблицу сопоставимости браузеров MDN для получения дополнительной инфы. Некоторые старые версии браузеров поддерживают селектор :is() как :matches() либо -webkit-any(). Для получения дополнительной информации см. страничку :is() в MDN.

Встречайте :is() и :where()

Это многофункциональные селекторы псевдо-классов, обратите внимание на () в конце и на то, что они начинаются с “:”. Думайте об этом как о динамической функции вызывающей надлежащие элементы. При написании CSS они дают вам возможность группировать элементы совместно в середине, начале или конце селектора. Они также имеют возможность изменять специфичность, давая вам возможность аннулировать либо увеличить специфичность.

Группировка

Все, что может делать :is() в отношении группировки, также может и :where(). Включая внедрение в любом месте селектора, их вложение и наложение. Полная упругость CSS, которую вы знаете и любите. Вот несколько примеров:

CSS

Каждый из приведенных выше примеров селекторов показывает гибкость этих двух функциональных псевдо-классов. Чтоб найти области вашего кода, для которых имеют возможность быть полезны :is() или :where(), отыскиваете селекторы с несколькими запятыми и повторением селектора.

Внедрение простых и сложных селекторов с помощью :is()

Вот несколько примеров обычных и сложных селекторов, которые помогут проиллюстрировать эту способность:

CSS

Обычно при использовании “,” при сотворения списка селекторов, если какой-либо из селекторов недействителен, все селекторы становятся недействительными. То есть, :is() и :where() не прощают ошибок, хоть и имеют возможность вывести вас из затруднительного положения!

:is() и :where() синтаксически взаимозаменяемы. Пришло время поглядеть, чем они отличаются.

Разница меж :is() и :where()

Что касается специфичности, то :is() и :where() сильно различаются. Чтоб получить более подробную информацию о специфике, см. модуль по специфике в Learn CSS. Кратко:

:where() не имеет специфичности. :where() подавляет всю специфичность в перечне селекторов, переданных в качестве функциональных характеристик. Это первая в своем роде функция выбора.

:is() воспринимает специфику своего самого главного селектора. :is(a, div, # id) имеет показатель специфики идентификатора.

Использование селектора с наивысшей спецификой из списка было для меня ошибкой только тогда, когда я очень увлекся группировкой. Мне всегда удавалось сделать лучше читаемость, перемещая селектор высокой специфичности в его свой селектор, где он не оказывал бы такового большого влияния. Вот пример того, что я имею в виду:

CSS

По :where() я жду, когда библиотеки предложат версии без специфичности. Конкуренция между авторскими стилями и стилями библиотек может окончиться. При написании CSS не было бы специфичности, с которой можно было бы соревноваться. CSS уже достаточно давно работает над подобной функцией группировки, и это все еще в значимой степени неизведанная территория. Удачи вам, создавайте таблицы стилей наименьшего размера и удаляйте запятые.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *