От автора: при написании CSS иногда можно получить длинные списки селекторов для нацеливания на несколько элементов с одинаковыми правилами стиля. Вместо этого можно использовать новые функциональные селекторы псевдо-классов.
Например, если вы хотите изменить цвет любых <b> внутри элемента заголовка, вы можете написать:
|
1 2 3 |
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; } |
Вместо этого вы можете использовать: is() и улучшить читаемость, избегая длинного селектора:
|
1 2 3 |
:is(h1,h2,h3,h4,h5,h6) > b { color: hotpink; } |
Понятность и удобство использования более короткого селектора — это лишь часть того значения, которое :is() и :where() привносят в CSS. В этом посте мы рассмотрим синтаксис и значение этих двух функциональных псевдо-селекторов.
Поддержка браузерами
Псевдо-классы :is и :where поддерживаются в Chromium (> = 88), Firefox (> = 78) и Safari (> = 14). См. таблицу совместимости браузеров MDN для получения дополнительной информации. Некоторые старые версии браузеров поддерживают селектор :is() как :matches() или -webkit-any(). Для получения дополнительной информации см. страницу :is() в MDN.
Встречайте :is() и :where()
Это функциональные селекторы псевдо-классов, обратите внимание на () в конце и на то, что они начинаются с “:”. Думайте об этом как о динамической функции вызывающей соответствующие элементы. При написании CSS они дают вам возможность группировать элементы вместе в середине, начале или конце селектора. Они также могут изменять специфичность, давая вам возможность аннулировать или увеличить специфичность.
Группировка
Все, что может делать :is() в отношении группировки, также может и :where(). Включая использование в любом месте селектора, их вложение и наложение. Полная гибкость CSS, которую вы знаете и любите. Вот несколько примеров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* at the beginning */ :where(h1,h2,h3,h4,h5,h6) > b { color: hotpink; } /* in the middle */ article :is(header,footer) > p { color: gray; } /* at the end */ .dark-theme :where(button,a) { color: rebeccapurple; } /* multiple */ :is(.dark-theme, .dim-theme) :where(button,a) { color: rebeccapurple; } /* stacked */ :is(h1,h2):where(.hero,.subtitle) { text-transform: uppercase; } /* nested */ .hero:is(h1,h2,:is(.header,.boldest)) { font-weight: 900; } |
Каждый из приведенных выше примеров селекторов демонстрирует гибкость этих двух функциональных псевдо-классов. Чтобы найти области вашего кода, для которых могут быть полезны :is() или :where(), ищите селекторы с несколькими запятыми и повторением селектора.
Использование простых и сложных селекторов с помощью :is()
Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту способность:
|
1 2 3 4 5 6 7 8 9 10 11 |
article > :is(p,blockquote) { color: black; } :is(.dark-theme.hero > h1) { font-weight: bold; } article:is(.dark-theme:not(main .hero)) { font-size: 2rem; } |
Обычно при использовании “,” при создания списка селекторов, если какой-либо из селекторов недействителен, все селекторы становятся недействительными. То есть, :is() и :where() не прощают ошибок, хоть и могут вывести вас из затруднительного положения!
:is() и :where() синтаксически взаимозаменяемы. Пришло время посмотреть, чем они отличаются.
Разница между :is() и :where()
Что касается специфики, то :is() и :where() сильно различаются. Чтобы получить более подробную информацию о специфике, см. модуль по специфике в Learn CSS. Вкратце:
:where() не имеет специфики. :where() подавляет всю специфичность в списке селекторов, переданных в качестве функциональных параметров. Это первая в своем роде функция выбора.
:is() принимает специфику своего самого главного селектора. :is(a, div, # id) имеет показатель специфичности идентификатора.
Использование селектора с наивысшей специфичностью из списка было для меня ошибкой только тогда, когда я слишком увлекся группировкой. Мне всегда удавалось улучшить читаемость, перемещая селектор высокой специфичности в его собственный селектор, где он не оказывал бы такого большого влияния. Вот пример того, что я имею в виду:
|
1 2 3 4 5 6 7 8 9 |
article > :is(header, #nav) { background: white; } /* better as */ article > header, article > #nav { background: white; } |
По :where() я жду, когда библиотеки предложат версии без специфики. Конкуренция между авторскими стилями и стилями библиотек может закончиться. При написании CSS не было бы специфики, с которой можно было бы соревноваться. CSS уже довольно давно работает над подобной функцией группировки, и это все еще в значительной степени неизведанная территория. Удачи вам, создавайте таблицы стилей меньшего размера и удаляйте запятые.
Автор: Adam Argyle
Источник: web.dev
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
