В мире веб-разработки постоянно происходят изменения и улучшения. CSS, каскадные таблицы стилей, не являются исключением. В этой статье мы рассмотрим два новых псевдо-класса CSS, которые были недавно добавлены в спецификацию: :is() и :where(). Эти псевдо-классы призваны упростить написание CSS-кода и сделать его более читаемым и поддерживаемым.
Псевдо-класс :is()
Псевдо-класс :is() позволяет группировать селекторы в одном месте, что упрощает создание и поддержку CSS-кода. Вместо перечисления нескольких селекторов через запятую, вы можете использовать :is() и включить их внутрь скобок.
Вот пример использования :is():
/* Старый способ */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* С использованием :is() */ :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; } Как вы можете видеть, использование :is() делает код более компактным и легче для чтения. Он также позволяет комбинировать селекторы различных типов, такие как селекторы элементов, классов и идентификаторов.
Вложенность с :is()
Псевдо-класс :is() также поддерживает вложенность, что дает дополнительную гибкость в работе с CSS. Вот пример:
/* Старый способ */ nav ul li a { color: blue; } /* С использованием :is() */ nav :is(ul, ol) :is(li a, li > a) { color: blue; } В этом примере мы используем :is() для выбора как нумерованных, так и ненумерованных списков внутри элемента nav, а также для выбора ссылок внутри элементов списка. Это делает код более гибким и легко расширяемым.
Псевдо-класс :where()
Псевдо-класс :where() имеет схожую функциональность с :is(), но с одним важным отличием: он игнорирует неизвестные селекторы внутри скобок. Это означает, что вы можете использовать экспериментальные или будущие селекторы, не вызывая ошибок в браузерах, которые их не поддерживают.
Вот пример использования :where():
/* Это вызовет ошибку в браузерах, не поддерживающих :has() */ :has(> a) { font-weight: bold; } /* С использованием :where() браузеры проигнорируют неизвестный селектор */ :where(:has(> a)) { font-weight: bold; } В этом примере мы используем экспериментальный селектор :has(). В первом случае браузеры, не поддерживающие этот селектор, выдадут ошибку. Однако, когда мы оборачиваем его в :where(), браузеры, не поддерживающие :has(), просто проигнорируют этот селектор, не вызывая ошибок.
Поддержка браузерами
На момент написания этой статьи поддержка браузерами для :is() и :where() выглядит следующим образом:
| Браузер | Поддержка :is() | Поддержка :where() |
|---|---|---|
| Chrome | ✅ (с версии 88) | ✅ (с версии 88) |
| Firefox | ✅ (с версии 78) | ✅ (с версии 78) |
| Safari | ✅ (с версии 14.1) | ✅ (с версии 14.1) |
| Edge | ✅ (с версии 88) | ✅ (с версии 88) |
Как вы можете видеть, поддержка этих псевдо-классов довольно хорошая в современных браузерах. Тем не менее, вы должны учитывать совместимость с более старыми версиями браузеров при использовании этих псевдо-классов в производственном коде.
Заключение
Псевдо-классы :is() и :where() являются полезными дополнениями к CSS, которые могут упростить написание и поддержку кода. :is() позволяет группировать селекторы в одном месте, делая код более компактным и читаемым, а :where() игнорирует неизвестные селекторы, предотвращая ошибки в браузерах, не поддерживающих их.
Хотя поддержка этих псевдо-классов в современных браузерах довольно хорошая, вы все же должны учитывать совместимость с более старыми версиями браузеров и использовать соответствующие методы для обеспечения обратной совместимости, такие как @supports или Autoprefixer.
В целом, :is() и :where() являются мощными инструментами, которые могут значительно улучшить ваш рабочий процесс разработки CSS и сделать ваш код более организованным и легко поддерживаемым.
