Привет, друзья! В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года. "Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности. Начнем с существующих возможностей, поддерживаемых большинством браузеров. Функция-псевдокласс :not() позволяет стилизовать элементы, которые не совпадают ни с одним селектором из указанного списка. Список может состоять как из одного, так и из нескольких селекторов, разделенных запятыми. Селекторы могут быть как простыми, так и сложными. Синтаксис Поддержка — 93.04%. Пример Предположим, что у нас имеется такой инпут: Мы хотим, чтобы в невалидном состоянии границы этого поля были красного цвета. "Невалидность" поля можно стилизовать с помощью псевдокласса :invalid. При этом, стилизация невалидности не должна влиять на стилизацию наведения и фокусировки. Это можно реализовать следующим образом: Лирическое отступление: стилизация placeholder Раньше заменители текста приходилось стилизовать так: Сейчас это можно делать с помощью псевдокласса ::placeholder (спасибо dynamicult): Поддержка — 96.26%. Псевдокласс :empty позволяет стилизовать элементы, которые не имеют потомков. К потомкам относятся элементы, текст и (sic!) пробелы. Синтаксис Поддержка — 97.65%. Пример Предположим, что у нас имеется такой список ссылок: С такими стилями: Допустим, что список формируется динамически и последний элемент по какой-то причине оказался пустым, например, в объекте не было url для ссылки. Тогда после второго элемента получим лишний отступ: 
 Скрываем пустые элементы списка с помощью :empty: Лишнего отступа больше нет: 
 Лирическое отступление: невидимый контент display: none; полностью скрывает элемент. Сделать элемент невидимым, но доступным для устройств чтения с экрана, можно следующим образом: Функции-псевдоклассы :is() и :where() позволяют стилизовать элементы, совпадающие с любым селектором из указанного списка. Список может состоять как из одного, так и из нескольких селекторов, разделенных запятыми. Селекторы могут быть как простыми, так и сложными. Разница между :is() и :where() заключается в том, что :is() принимает специфичность самого конкретного селектора из списка, а специфичность :where() всегда равняется 0. Синтаксис Поддержка :is() — 94.9%.
Поддержка :where() — 91.61%. Пример Предположим, что мы хотим стилизовать ссылки, находящиеся только в шапке или подвале страницы: Для понимания того, насколько :is() и :where() могут уменьшить количество шаблонного кода, рекомендую взглянуть на этот пример. Псевдокласс :focus-within позволяет стилизовать элементы, которые либо сами находятся в фокусе (в этом случае :focus-within аналогичен псевдоклассу :focus), либо имеют потомков, находящихся в фокусе. Синтаксис Поддержка — 95.32%. Пример Предположим, что у нас имеется такой инпут с подписью и иконкой: Обратите внимание на значение атрибута fill элемента path. И такими стилями: 
 Допустим, что при наведении и фокусировке мы хотим менять цвет подписи, границы поля и заливки иконки. С инпутом все просто: С наведением тоже: 
 Но следующее работать не будет, поскольку элемент div не является фокусируемым (focusable): Здесь на помощь приходит :focus-within: Scroll Snap позволяет реализовывать прокручиваемые слайдеры (scrollable sliders). Основными свойствами данной модели являются: Синтаксис (основные значения) Поддержка scroll-snap-type — 94.98%.
Поддержка scroll-snap-align — 94.75%. Пример Прокручиваемый слайдер с тремя изображениями котиков: Свойство scroll-behavior, как следует из названия, определяет поведение прокрутки. Синтаксис (основные значения) Поддержка — 91.01%. Пример Рассматриваемое свойство позволяет легко реализовать прокрутку к определенной позиции на странице без помощи JavaScript: Свойство accent-color позволяет менять цвет таких элементов, как <input type="checkbox" />, <input type="radio" />, <input type="range" /> и <progress />. Синтаксис Поддержка — 87.04%. Пример 
 Теперь в простых случаях можно обходиться без создания кастомных чекбоксов, радио-кнопок и т.д. Теперь поговорим о наиболее интересных возможностях, которые ждут нас в ближайшем будущем. Вложенность — одна из самых ожидаемых возможностей, давно реализованных в таких CSS-препроцессорах, как Sass и Less. Синтаксис похож на Sass, за исключением того, что использование символа & в качестве родительского селектора является обязательным. Пример Еще одно отличие от Sass состоит в том, что, судя по всему, в CSS нельзя будет "склеивать" селекторы. Например, если у нас имеется такая разметка: В Sass стилизовать заголовок можно следующим образом: Если вас интересует более подробная информация о вложенности, рекомендую взглянуть на эту статью. Функция-псевдокласс :has() предназначена для стилизации элементов, совпадающих хотя бы с одним селектором из списка, переданного в качестве аргумента. Прелесть данной функции состоит в том, что она позволяет стилизовать родительские элементы. Синтаксис Примеры Функция color-mix принимает 2 цвета и возвращает результат их смешивания в указанном цветовом пространстве и на указанный процент. Дефолтным цветовым пространством является LCH. Синтаксис: Пример Директива @scope предназначена для определения области видимости стилей. Синтаксис Пример Вернемся к примеру из раздела про вложенность: Если после этих стилей будет определено что-то вроде: То специфичность селекторов .article .info .author и .section .info .author будет одинаковой и стили, определенные в .section, перезапишут стили, определенные в .article. @scope позволяет решить данную проблему за счет инкапсуляции стилей в собственной области видимости: Справедливости ради следует отметить, что на сегодняшний день существует еще одно средство для решения проблемы правильного порядка определения стилей — директива @layer, позволяющая определять так называемые каскадные слои стилей (cascade layers). Однако, на мой взгляд, эта директива больше подходит для использования в CSS-фреймворках, чем для локального применения. Например, @layer активно используется в таком фреймворке, как TailwindCSS. Элемент selectmenu — это своего рода стилизуемый вариант элемента select. Синтаксис Пример Последняя возможность, о которой я хочу рассказать, это функция anchor(). Данная функция является альтернативой позиционированию элементов с помощью position: relative и position: absolute. Она позволяет привязывать одни элементы к другим независимо от их места в иерархии DOM. anchor() также будет предоставлять возможность определять границы позиционирования и другие интересные фичи. Перейдите по ссылке, если хотите получить более подробную информацию о рассматриваемом интерфейсе (да, это целый интерфейс, а не одна функция). Подробнее о новых и ожидаемых возможностях CSS можно почитать в этой замечательной статье. Пожалуй, это все, чем я хотел поделиться с вами в этой заметке. Надеюсь, вы узнали что-то новое и не зря потратили время. Благодарю за внимание и happy coding!  JavaScript Developer