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

Список всех 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 🐇

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

• Зачем нужно свойство display в CSS
• Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration
• Когда в вёрстке нужна высота. CSS-свойство height