Функция :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 и 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, удалять стили в любом месте кода и просто делать код красивым и понятным. Пользуетесь?
