Какие CSS-свойства нам принёс 2022

  • 9 января 2023

CSS

Николай Шабалин

Список всех CSS-свойств, типов, директив, которые были добавлены в браузеры в 2022.

Выражения от контейнера

Входим в новую эпоху управления интерфейсом

@container: применяет условие к контейнеру, которое должно быть выполнено, чтобы свойство применилось к элементу

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

container-name: позволяет задать имя контейнеру, чтобы можно было обращаться к нему внутри @container

container-type: позволяет задать тип контейнеру, чтобы можно было обращаться к нему внутри @container

container: позволяет задать имя и тип контейнеру, чтобы можно было обращаться к нему внутри @container

.container {
  container-type: inline-size;
  container-name: sidebar;
}

Временные шкалы прокрутки

Позволяют создавать анимации, которые зависят от прокрутки страницы:

  • scroll-timeline-axis позволяет задать направление прокрутки.
  • scroll-timeline-name позволяет задать имя временной шкале прокрутки.
  • scroll-timeline позволяет задать имя и направление временной шкале прокрутки.
.element {
  scroll-timeline-name: squareTimeline;
  scroll-timeline-axis: horizontal;
}

Цветные шрифты

@font-palette-values позволяет задать палитру цветов для цветных шрифтов:

@font-palette-values --identifier {
  font-family: Bixa;
}

.my-class {
  font-palette: --identifier;
}

font-palette позволяет задать палитру цветов для цветных шрифтов:

font-palette: normal || light || dark;

Псевдоклассы состояний ресурсов

Псевдоклассы, которые позволяют узнать состояние ресурсов:

  • buffering: который в данный момент буферизируется.
  • muted: который в данный момент звук отключен.
  • paused: который в данный момент на паузе.
  • playing: который в данный момент воспроизводится.
  • seeking: который в данный момент перематывается.
  • stalled: который в данный момент остановлен.
  • volume-locked: который в данный момент заблокирован для изменения громкости.
video:playing {
  background-color: green;
}

video:paused {
  background-color: red;
}

video:seeking {
  background-color: yellow;
}

video:stalled {
  background-color: orange;
}

video:buffering {
  background-color: blue;
}

video:muted {
  background-color: gray;
}

video:volume-locked {
  background-color: purple;
}

Типы математических выражений

Типы математических выражений, которые можно использовать в CSS:

  • abs: модуль числа
  • acos: арккосинус
  • asin: арксинус
  • atan: арктангенс
  • atan: арктангенс
  • calc-constant: константа
  • cos: косинус
  • exp: экспонента
  • hypot: гипотенуза
  • sqrt: квадратный корень
  • log: логарифм
  • mod: остаток от деления
  • pow: возведение в степень
  • rem: остаток от деления
  • round: округление
  • sign: знак числа
  • sin: синус
  • tan: тангенс
.element {
  width: abs(20% - 100px);
  transform: rotate(acos(-0.2));
  width: calc(100px * cos(45deg));
  width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36px */
  width: calc(100px * log(7.389)); /* 200px */
  width: round(var(--width), 50px);
  width: hypot(2em);
  top: sign(--value);
  width: calc(100px * sqrt(9));   /*  300px */
  width: calc(100px * tan(pi / 3));
}

Ключевые кадры

  • animation-composition: позволяет задать режим смешивания для анимации
  • animation-timeline: позволяет задать временную шкалу для анимации
.element {
  animation-composition: replace;
  animation-timeline: squareTimeline;
}

Управление синтезированным шрифтом

font-synthesis-small-caps позволяет задать синтезирование маленьких прописных букв.

font-synthesis-style позволяет задать синтезирование начертания шрифта.

font-synthesis-weight позволяет задать синтезирование жирности шрифта.

font-synthesis позволяет задать, какие свойства шрифта должны быть синтезированы, если они не определены в шрифте.

.element {
  font-synthesis-small-caps: none;
  font-synthesis-style: none;
  font-synthesis-weight: none;
  font-synthesis: none;
}

Самодостаточные

modal: позволяет задать, что элемент является модальным:

.element {
  modal: true;
}

has() позволяет задать, что элемент содержит другой элемент:

.element {
  has(.child) {
    color: red;
  }
}

@layer позволяет задать слой для стилей:

@layer base {
  .element {
    color: red;
  }
}

object-view-box позволяет задать область просмотра для объекта:

.element {
  object-view-box: 0 0 100px 100px;
}

То ли ещё будет в 2023 🐇

Больше статей

Полезные статьи — по почте

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

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники