И так. Ух! Как же я отстала, что не заметила новинки (или забытое старое), которые все активно используют. Ну, а кто как и я был долго в глубокой заморозеке, добро пожаловать.

Writing modes: vertical-text и text-orientation

.container-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

На MDN можно посмотреть все значения writing-mode. По этой ссылке описание и примеры. Суть этого свойства в расположении текста: вертикально или горизонтально.

Пример

Свойство text-orientation работает при отображении текста вертикально.

Свойство content-visibility

content-visibility: [value];

Ссылка на саму спеку. Чем интересно данное свойство: с помощью него можно скрыть содержимое элемента, которое не будет участвоваь в рендеринге. Пока не вижу, что это кто-то сильно поддерживает. Разве что Chrome.

Свойство accent-color

Свойство для установки цвета элементам контроля.

.checkbox {
  accent-color: #f79a5b;
}

Пример для группы

Поддерживают все браузеры.

Shapes & Graphics

Хорошо, посмотрим что у нас есть по работе с графикой.

Наложила сверху на картинку фильтр sepia через свойство backdrop-filter. Не знаю, как все это влияет на производительность. Ссылка на mdn. И тут вы сейчас воскликнете filter! А вот и главное отличие: эффекты filter примеменяются только к фону, а не к содержимому.

.backdrop-filter.__with:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  backdrop-filter: sepia(80%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Я использовала псевдоэлемент для наложения эффекта через backdrop-filter. И с его помощью получилось накрыть часть фотографии.

А это эффект, если вы используеть filter.

.img-filter {
  filter: sepia(80%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Если нужно наложить частичный эффект, то можно использовать backdrop-filter.

Из нового увидела View Transition API. Джек Арчибальд в статье подробно рассказывает почему это важно и нужно. Оно уже есть и поддерживается в Chrome, но это экспериментальная штука. Насколько я понимаю, комитет пытается понять нужно оно миру или нет. На сайте организации есть статус и еще больше описания.

color-scheme

Свойство позволяет указать цветовую схему элементу. Синтаксис

:root {
  color-scheme: light dark;
}

Хорошая статья со всеми подробностями на css-tricks. Внизу у автора приведена табличка с поддержкой по браузерам.

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