Погружаемся в CSS: как использовать :where ()

ARTICLES 27.03.22 27.03.22 80
Бесплатные курсына главную сниппетов

Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования.

Что это за функция CSS :where()

Как пишут на  MDN, :where() — это псевдокласс, который в качестве аргумента принимает список селекторов и применяет заданные стили к любому элементу из этого списка. Полезен, когда надо укоротить длинный список селекторов.

В CSS часто приходится писать длинный список селекторов, разделённых запятыми, когда к нескольким элементам одновременно применяются одни и те же стили.

Вот что бывает, когда один и тот же стиль применим ко всем тегам  <a> внутри header, main  и  footer.

header a:hover,
    main a:hover,
    footer a:hover {
      color: green;
      text-decoratíon: underline;
    }

Выше у нас только три элемента. Но когда их больше, код становится трудно читать и понимать. А ещё он визуально становится некрасивым. Вот тут-то и требуется :where().

:where(header, main, footer) a:hover {
      color: red;
      text-decoratíon: underline;
    }

Браузер доходит до такого фрагмента кода. Код отправляет его к селекторам header, main, и footer и ко всем якорям в этих селекторах. Когда пользователь наведет курсор на якорь, браузер применит заданный стиль. В этом случае — red и underline. То есть список селекторов можно записать коротко и ясно.

Что можно сделать с :where() 

С помощью :where() можно группироваться элементы разными способами. Можно разместить :where() в начале, середине или в конце селектора. Допустим, у нас есть списки.

/* first list */
    header a:hover,
    main a:hover,
    footer a:hover {
      color: green;
      text-decoratíon: underline;
    }
    /* second list */
    article header > p,
    article footer > p{
      color: gray;
    }
    /* third list */
    .dark-theme button,
    .dark-theme a,
    .dim-theme button,
    .dim-theme a{
      color: purple;
    }

А вот то же самое, сделанное с :where().

/* first list */
    /* at the beginning */
    :where(header, main, footer) a:hover {
      color: red;
      text-decoratíon: underline;
    }
    /* second list */
    /* in the middle */
    article :where(header, footer) > p {
      color: gray;
    }
    /* third list */
    /* at the end */
    .dark-theme :where(button, a) {
      color: purple;
    }

В первом списке мы указываем, что red и underline должны применяться к header, main, и footer при наведении курсора. 

Во втором списке указываем, что содержание, заголовок и футер окрашены в серый.

В третьем списке мы указываем, что для button и a задали стили .dark-theme, .dim-theme, и purple.

Упростим ещё.

/* at the end */
    .dim-theme :where(button, a) {
      color: purple;
    }

И ещё. 

/* stacked */
    :where(.dark-theme, .dim-theme) :where(button, a) {
      color: purple;
    }

Такой подход к сокращению сложного списка селекторов называется наложением.

Специфичность и :where()

Специфичность — способ, с помощью которого браузеры определяют, какие значения свойств CSS или стили нужно применить к конкретному элементу. 

Специфичность :where() всегда равна нулю. Следовательно, любой элемент, на который нацелена функция, автоматически получает равную нулю специфичность. Поэтому можно легко аннулировать стиль любого элемента, сводя специфичность к нулю. Пример с упорядоченными списками HTML.

<div>
      <h2>First list no class</h2>
      <ol>
        <li>List Item 1</li>
        <li>List Item 2</li>
      </ol>
    </div>
    <div>
      <h2>Second list with class</h2>
      <ol class="second-list">
        <li>List Item 1</li>
        <li>List Item 2</li>
      </ol>
    </div>
    <div>
      <h2>Third list with class</h2>
      <ol class="third-list">
        <li>List Item 1</li>
        <li>List Item 2</li>
      </ol>
    </div>

Во фрагменте кода есть три упорядоченных списка с двумя элементами в каждом. У второго и третьего списка есть заданный класс, у первого — нет. Без применения стилей каждый список упорядочен по номерам. 

Добавляем стили. Для этого используем :where(), чтобы выбрать все теги <ol>, к которым применен class.

:where(ol[class]) {
      list-style-type: none;
    }

Ниже видим, что :where() применяется ко второму и третьему списку (с классами), поэтому стиль списков удалён.

Добавляем ещё стили.

:where(ol[class]) {
      list-style-type: none;
    }
    .second-list {
      list-style-type: disc;
    }

Если применять :where() только ко второму списку, используя наименование класса, то список отобразится с маркерами. А у третьего списка по-прежнему нет стиля. 

Вопрос: разве так и не должно быть, раз новый стиль записан ниже :where()? Нет, и сейчас разберёмся, почему.

Посмотрим, что произойдёт, если переместить добавленный код в верхнюю часть блока кода и передвинуть :where() вниз.

.second-list {
      list-style-type: disc;
    }
    :where(ol[class]) {
      list-style-type: none;
    }

Стиль всё ещё не изменился.

Запомним, что у :where() нулевая специфичность. Вне зависимости от того, где размещён новый код относительно :where(), специфичность элемента, к которому применяется :where(), равна нулю, а стили аннулированы. Для наглядности давайте добавим стили второго списка в третий список после :where()в коде.

.second-list {
      list-style-type: disc;
    }
    :where(ol[class]) {
      list-style-type: none;
    }
    .third-list{
      list-style-type: disc;
    }

Теперь и второй, и третий список отображаются с маркерами, независимо от размещения кода. 

Теперь посмотрим, как :where() будет работать, если один из элементов выбран с помощью недопустимого селектора.

Forgiving и :where() 

Если браузер в CSS не распознает только один селектор в списке, весь список окажется недопустимым. Стиль не будет применяться. Но только если не использовать :where().

Если элемент в :where() содержит недопустимый селектор, никакой стиль к этому элементу применен не будет. Но для остальных элементов стили сработают. Функция :where() пропустит недопустимый селектор. Поэтому :where() называют forgiving-селектором, дословно — «прощающим».

Ниже видим селектор :unsupported — недопустимый для многих браузеров. Но весь код ниже будет успешно распарсен и будет соответствовать селектору :valid, даже в браузерах, которые не поддерживают :unsupported.

:where(:valid, :unsupported) {
      ...
    }

А вот пример кода, который будет проигнорирован в браузерах, которые не поддерживают:unsupported, но при этом поддерживают селектор :valid.

:valid, :unsupported {
      ...
    }

Где можно и нельзя использовать :where()

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

Улучшить CSS reset

CSS reset — это загрузка набора правил перед применением любых стилей, чтобы очистить браузер от заданных по умолчанию стилей, и чтобы устранить несоответствия между разными браузерами. CSS reset обычно размещают до собственной таблицы стилей, чтобы эти правила сработали первыми. От сложности или простоты селекторов в CSS reset зависит, насколько трудно будет переопределить исходные стили в коде.

Например, представьте, что мы захотели оформить все якоря на странице зелёным. А потом решили, что в футере все якоря должны быть серыми. 

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

Удалить стили

Функция :where() помогает удалить или обнулить стили или изменить специфичность элементов. Когда поместим функцию в код, она сработает как reset на минималках.

Минимизировать код

Короткий код легко читать и исправлять. Хороший тон — проверять, можно ли сократить любой код, в котором есть больше двух запятых или больше трёх элементов списка. Эта же стратегия помогает комбинировать два и более селектора: section > header > p > a.


Функция :where() помогает работать с CSS resets, удалять стили в любом месте кода и просто делать код красивым и понятным. Пользуетесь?

 

 

на главную сниппетов
Курсы