Введение

CSS постоянно развивается, предлагая разработчикам новые инструменты для создания более динамичных, удобных и гибких пользовательских интерфейсов.

В этой статье я расскажу о пяти недооцененных свойствах CSS, которые могут значительно улучшить процесс разработки.

Эти функции уже поддерживаются всеми основными браузерами, поэтому их можно смело использовать в современных проектах.

1. 🎬 animation-composition — сочетание нескольких анимаций

Когда в CSS появились ключевые кадры @keyframes, это стало революцией: теперь можно было создавать сложные анимации без JavaScript.

Но что, если вам нужно одновременно применить несколько анимаций к одному элементу?

Ранее, если вы применяли две анимации к одному элементу, они могли конфликтовать, перезаписывая друг друга.

Теперь можно использовать свойство animation-composition, которое позволяет управлять тем, как анимации накладываются:

• replace (по умолчанию) — новая анимация заменяет предыдущую.
• add — эффекты анимаций суммируются.

Пример:

.box {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  animation: scale-up 2s linear infinite,
             rotate 2s linear infinite;
  animation-composition: add;
}

@keyframes scale-up {
  0% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

В этом примере анимации увеличения и вращения плавно комбинируются, а не конфликтуют.

Где это применимо?

• Анимация интерфейсов (кнопки, модальные окна).
• Параллакс-эффекты.
• Сложные микровзаимодействия.

animation-composition стало стандартным в 2023 году и теперь поддерживается всеми браузерами.

2. 🎭 :state() — стилизация кастомных элементов в зависимости от их состояния

Псевдокласс :state() — одно из самых интересных нововведений CSS, предназначенное специально для работы с кастомными элементами. Он позволяет применять стили в зависимости от их состояния.

Обычные псевдоклассы, такие как :hover, :focus и :checked, работают с встроенными HTML-элементами. А вот :state() расширяет эту функциональность на пользовательские веб-компоненты.

Теперь кастомные элементы могут сообщать о своих состояниях через объект CustomStateSet, а CSS сможет их динамически стилизовать.

Пример:

custom-element:state(custom-state) {
  /* стили для пользовательского состояния */
}

Создадим кастомный компонент <toggle-button>, который переключается между состояниями "on" и "off":

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
  }

  connectedCallback() {
    this.addEventListener("click", () => {
      this.state = this.state === "on" ? "off" : "on";
    });

    this.state = "off";
  }

  get state() {
    return this._internals.states.has("on") ? "on" : "off";
  }

  set state(value) {
    this._internals.states.clear();
    this._internals.states.add(value);
  }
}

customElements.define("toggle-button", ToggleButton);

Теперь в CSS мы можем применять стили на основе состояния:

toggle-button:state(on) {
  background-color: green;
}

toggle-button:state(off) {
  background-color: red;
}

Где это применимо?

• Кастомные чекбоксы, переключатели.
• Элементы с динамическими состояниями (аккордеоны, вкладки).

:state() стало стандартным в 2024 году и активно применяется в веб-компонентах.

3. 🎨 color-mix() — смешивание цветов прямо в CSS

Ранее, если нужно было получить промежуточный оттенок между двумя цветами, приходилось:

• Делать вычисления вручную.
• Использовать препроцессоры (SASS, LESS).

Теперь в CSS есть нативная функция color-mix()

.button {
  background-color: color-mix(in srgb, blue 50%, white 50%);
}

Функция color-mix() работает следующим образом:

• Первый параметр (in srgb) указывает цветовое пространство.
• Затем указываются два цвета и их пропорции.

Где это применимо?

• Генерация темных/светлых оттенков динамически.
• Адаптивные темы (темная/светлая).
• Градиенты и эффектные переходы.

color-mix() поддерживается с 2023 года во всех браузерах.

4. ✂ overflow: clip — полное отсечение контента без прокрутки

Свойство overflow: hidden скрывает контент, но он остается доступным для скролла и выделения.

Новый режим overflow: clip полностью обрезает контент, делая его невидимым и недоступным.

Пример:

.notification {
  width: 150px;
  height: 50px;
  overflow: clip;
}

Где это применимо?

• Уведомления и всплывающие сообщения.
• Жестко фиксированные элементы UI.

Поддерживается всеми браузерами.

5. 📏 clamp() — адаптивные размеры без медиа-запросов

clamp() — это удобный инструмент для адаптивной типографики и динамических значений.

Функция принимает три параметра:

.text {
  font-size: clamp(10px, 5vw, 32px);
}

Минимальное значение/размер: например, 10px (не будет меньше этого).

Оптимальное значение/размер: например, 5vw (5% от ширины экрана).

Максимальное значение/размер: например, 32px (не будет больше этого).

Это идеальное решение для адаптивных дизайнов, так как позволяет задать гибкие размеры элементов, сохраняя контроль над их предельными значениями.

Ранее для адаптивных размеров приходилось писать медиазапросы:

@media (max-width: 500px) { font-size: 12px; }
@media (min-width: 1200px) { font-size: 24px; }

Теперь можно просто использовать clamp()

Применение не ограничивается только шрифтами — clamp() можно использовать для размеров блоков и отступов:

.box {
  width: clamp(100px, 50%, 300px);
}

.section {
  padding: clamp(11px, 10vw, 25px);
}

Где это применимо?

• Адаптивные шрифты.
• Гибкие размеры контейнеров.
• Отступы, ширина и высота элементов.

clamp() поддерживается всеми современными браузерами.

Заключение

CSS продолжает развиваться, предлагая разработчикам мощные инструменты для более гибкого и удобного стилизования веб-страниц.

5 CSS-функций, которые мы рассмотрели, помогут писать более чистый, адаптивный и креативный код:

• animation-composition для комбинирования анимаций.
• :state() для динамической стилизации пользовательских элементов.
• color-mix() для создания цветовых градиентов без препроцессоров.
• overflow: clip для точного управления скрытым контентом.
• clamp() для адаптивных размеров и типографики.

Все эти свойства уже поддерживаются в основных браузерах, так что их можно безопасно применять в современных проектах!