Close

1 июля, 2021

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

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

CSS
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}

123 h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {  color: hotpink;}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}

123 :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, которую вы знаете и любите. Вот несколько примеров:

CSS
/* 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;
}

1234567891011121314151617181920212223242526272829 /* 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()

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS
article > :is(p,blockquote) {
color: black;
}

:is(.dark-theme.hero > h1) {
font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}

1234567891011 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() сильно различаются. Чтобы получить более подробную информацию о специфике, см. модуль по специфике в Learn CSS. Вкратце:

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

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

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

CSS
article > :is(header, #nav) {
background: white;
}

/* better as */
article > header,
article > #nav {
background: white;
}

123456789 article > :is(header, #nav) {  background: white;} /* better as */article > header,article > #nav {  background: white;}

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

Автор: Adam Argyle

Источник: webformyself.com

Похожие статьи

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

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

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?