В начале года в ЦСС появились два интересных селектора. Они помогают уменьшить количество кода, нужного для решения некоторых задач по вёрстке.
На ноябрь 2021 года селекторы :is и :where поддерживают 93% браузеров. Совсем нет поддержки только в Интернет Эксплорере и древней мобильной Опере.
Can I Use
Сегодня эти селекторы уже поддерживаются всеми современными браузерами и их можно применять в реальных проектах.
На ноябрь 2021 года селекторы :is и :where поддерживают 93% браузеров. Совсем нет поддержки только в Интернет Эксплорере и древней мобильной Опере.
Can I Use
Как сейчас
Когда нужно стилизовать несколько элементов внутри одного, приходится писать кучу похожих друг на друга селекторов через запятую. Например, чтобы стилизовать все вложенные в определённый контейнер заголовки:
.content h1,
.content h2,
.content h3 {
font-family: 'Helvetica', sans-serif;
}Как можно с новыми селекторами
Селектор :is работает как массив селекторов и заметно упрощает код. Как и выше, стилизуем все вложенные в контейнер заголовки, но уже гораздо короче и лаконичнее:
.content :is(h1, h2, h3) {
font-family: 'Helvetica', sans-serif;
}Селектор :where на первый взгляд работает так же:
.content :where(h1, h2, h3) {
font-family: 'Helvetica', sans-serif;
}Разница между :is и :where
Селекторы отличаются специфичностью, то есть приоритетом применения своих стилей. Если вы ещё не знакомы с понятием специфичности, прочитайте совет Юрия Мазурского.
Селектор :is получает специфичность самого специфичного из перечисленных внутри него селекторов. А значит вполне может перебить уже имеющиеся в коде селекторы с меньшей специфичностью:
.content :is(.heading, h1, h2, h3) {
color: red;
}
.heading {
color: blue;
}:is, потому что он получает специфичность сразу двух классов: .content и .heading внутри. Специфичность двух классов «побеждает» специфичность одного классаА :where не имеет никакой специфичности:
.content :where(.heading, h1, h2, h3) {
color: red;
}
.heading {
color: blue;
}:where, потому что у него нет дополнительной специфичности, получаются два селектора со специфичностью одного класса. При прочих равных, «побеждает» тот, что расположен в коде нижеПри внедрении на работающий сайт, может быть безопаснее использовать :where, чтобы случайно не перебить уже существующие стили там, где вам это не нужно.
Совместимость с другими селекторами
Конечно, новые селекторы можно комбинировать друг с другом и другими селекторами:
:where(.article, .longread) :is(blockquote, .rule) {
font-size: 48px;
}
:is(.smallArticle, .preview) .authorPhoto {
display: none;
}
:where(.listWithMarkers, .footnote) li:before {
content: '★ ';
}
section:is(.highlighted, .featured) {
background: #fff5cf;
}Но помните, что чем проще ЦСС‑код, тем проще и дешевле его поддерживать и развивать. Вместо сложных составных селекторов бывает лучше просто добавить новый класс.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.