Вот пять современных функций CSS на 2024 год, а также примеры кода для каждой:

1. :has() Селектор:
   • Это позволяет вам стилизовать родительский элемент на основе его дочерних элементов.

Стилизовать родительский элемент div, если он содержит дочерний элемент .active

div:has(.active) {
       background-color: lightgreen;
   }

1. Запросы контейнера:
   • Они обеспечивают адаптивный дизайн в зависимости от размера контейнера.

Измените макет карточки в зависимости от размера ее контейнера

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. Вложенные селекторы:
   • CSS теперь поддерживает правила вложения для более чистого кода.

Вложенные стили для кнопки на карточке

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

1. Свойство text-wrap: Это свойство помогает равномерно распределить текст по строкам.

Используйте перенос текста, чтобы сбалансировать текст в абзаце

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1. :focus-visible Псевдокласс:
   • Это улучшает доступность за счет стилизации элементов, управляемых с помощью клавиатуры.

Выделение полей ввода при фокусировке с клавиатуры

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

Эти примеры иллюстрируют, как реализовать каждую функцию в вашем CSS, повышая скорость реагирования и доступность вашего веб-дизайна.