На сегодняшний день существует множество стабильных CSS-фич, которые фронтендер может использовать в своей работе. Поделимся с вами некоторыми из них, обязательно сохраните и пробуйте их применять ⬇️
🔹️ Фиксация прокрутки.
Это поможет сайту выделиться среди конкурентов, а фиксация скролла обеспечит важные точки остановки.
🔹️ Контейнерные запросы.
Позволяют стилизовать элемент в зависимости от размера его родителя. Для этого нужно указать элемент в качестве контейнера, используя свойство container. В качестве значения container-type может быть width, height, inline-size, block-size.⠀
🔹️ Псевдокласс :has()
Может выбирать элемент в зависимости от его дочерних элементов и у него есть несколько вариантов использования. Например, по-разному стилизовать изображение в <figure> в зависимости от того, есть ли внутри <figcaption> или нет.⠀
🔹️ Условное выражение when/else
Оно подходит для условий в CSS и является аналогом операторам if/else в других языках программирования. Помогает создавать сложные медиа-запросы с более правильной логикой.⠀
🔹️ Свойство accent-color
Легко и быстро обозначает цвета бренда для полей ввода данных в формах и позволяет сохранить вид элементов форм браузера по умолчанию, но с применением соответствующей цветовой гаммы сайта.⠀
🔹️ Псевдокласс :focus. Используется для стилизации элементов, которые получили фокус. Создаёт более интерактивный и доступный пользовательский интерфейс, с помощью подсвечивания активных или выбранных элементов.
🔹️ Список селекторов.
Сокращает количество кода, необходимого для применения общих стилей к разным элементам.⠀
🔹️ Селектор type.
Его используют для выбора HTML-элементов, которые соответствуют определённому имени тега.⠀
🔹️ Смежный селектор +
Выбирает элемент, который является соседом другого элемента на одном и том же уровне иерархии DOM.⠀
Если было полезно, очень ждём твой лайк и репост 👍
#советы_от_methed
