В своё время в разработку сайтов я залез крайне рано, примерно в 2019 году. Тогда, как советовали почти все в роликах, большинство CSS‑фич я пропускал и переходил сразу к JS или его фреймворкам. CSS был освоен буквально на уровне базы, которой хватало для закрытия 90% всех задач, что мне попадались.

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

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

Синтаксис

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

Вложенность стилей (CSS Nesting)

Для меня стало открытием, что в CSS теперь можно использовать вложенность стилей.

.card {  
  padding: 16px;  
  border-radius: 12px;  
  
  .card__title {    
    font-size: 24px;    
    font-weight: bold;  
  }  
  
  .card__text {    
    color: #555;  
  }
}

Причём стоит учесть, что вкладывать можно не только внутренние блоки элемента, но и media‑условия.

.card {  
  padding: 24px;  
  
  @media (width <= 768px) {    
    padding: 16px;  
  }
}

На фоне того, как раньше ради этого обычно тянули препроцессор, это ощущается очень приятно.

@layer

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

Предположим, есть вёрстка, и мы хотим сделать фон жёлтым.

<button class="button i_am_very_spec_seelcor" id="i_am_too_seecltor">Привет мир</button>

.content .article .article__body .text {  
  background: red;
}

1. Взять селектор и приписать ему наш добавленный класс

.button.i_am_very_spec_seelcor[id='i_am_too_seecltor'] {
  background: red
}

# работать не будет, если в разметке просто добавить класс
.button.yellow {
  background: yellow;
}

# уже будет работать
.button.i_am_very_spec_seelcor[id='i_am_too_seecltor'].yellow {
  background: yellow
}

.content .article.article--custom .article__body .text {  
  background: yellow;
}

Проблема напрашивается сама собой. Остаётся разве что молиться, чтобы селектор не был ещё более огромным и, не дай бог, не поменялся, потому что дебажить такое потом — удовольствие сомнительное.

2. Указать !important

.text {  
  background: yellow !important;
}

В целом это не самый плохой вариант, но не для случаев, когда можно предположить, что стиль ещё будет меняться. Потому что потом просто начинается наложение !important‑свойств друг на друга.

3. Указать @layer

@layer позволяет в какой‑то мере обойти специфичность стилей и переписать их без указания !important или более специфичного селектора. В @layer указывается порядок, в котором слои будут применены, и те, что объявлены позже, будут иметь более высокий приоритет.

@layer ui, my-own;

@layer ui {
  .i_am_very_spec_seelcor[id='i_am_too_seecltor'] {
    background: red
  }
}

@layer my-own {
  .button {
    background: yellow
  }
}

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

Селекторы и логика без JS

3 кота, 3 хвоста

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

where() и:is()

Считаю, что их надо рассматривать вместе, так как они говорят примерно про одно и то же. Рассмотрим на надуманном примере.

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

<section class="news">  
  <h2 class="title">Новости</h2>  
  <p class="text">Текст</p>
</section>

<section class="article">  
  <h2 class="title">Статья</h2>  
  <p class="text">Текст</p>
</section>

<section class="blog">  
  <h2 class="title">Блог</h2>  
  <p class="text">Текст</p>
</section>

Сейчас можно написать так:

:is(.article, .article-2) :is(h1, h2, h3) {
  color: red,
}

# или

:where(.article, .article-2) :where(h1, h2, h3) {
  color: red,
}

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

Разница между :is() и :where() заключается только в специфичности.

То есть :where() особенно хорош там, где хочется написать удобную группировку, но не повышать вес селектора.

has()

Неимоверно классный селектор, который позволяет, исходя из состояния потомка, дать стили родителю. Самым наглядным примером считаю такой вариант:

<label>  Имя  <input type="text" required></label>

То есть если у label есть потомок input, который обязательно должен быть заполнен, то label можно добавить звёздочку.

Либо можно уйти в формы.

<form class="form">  
  <input type="text" class="input error">  
  <button type="submit">Отправить</button>
</form>

.form:has(.error) button {
  display: none;
}

То есть если у формы есть элемент с ошибкой, пускай какой‑нибудь input, то кнопку подтверждения формы можно скрыть.

Раньше такие вещи обычно означали, что без JS уже не обойтись. Сейчас часть подобной логики спокойно уезжает в CSS.

Адаптивность

Размер по контейнеру (Container Query)

Невероятно крутая фича, которая была добавлена в CSS, — возможность смотреть размер не только по размеру экрана, но и по размеру контейнера. То есть теперь UI‑компоненты в целом можно адаптировать под любое местонахождение компонента.

.posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;

  container-type: inline-size;
  container-name: posts;
}

.card {
  border: 1px solid #ccc;
  padding: 10px;

  img {
    width: 200px;
  }
}

@container posts (width < 500px) {
  .posts {
    grid-template-columns: 1fr;
  }

  .card img {
    width: 100%;
  }
}

Теперь, куда бы ни был встроен компонент posts, он будет адаптивен и независим не только от всего сайта, но и от конкретного размера экрана как единственной точки опоры.

Новые размеры (dvh, lvh, svh)

В CSS также были добавлены новые единицы измерения размеров. Думаю, все знают, что vh — не самая приятная вещь на мобилках, так как есть панель браузера на айфоне и другие элементы интерфейса, которые могут влиять на реальную высоту отображаемой области. Из‑за этого часто приходилось писать такие костыли:

const setViewportHeight = () => {  
  document.documentElement.style.setProperty(    
    '--vh',    
    `${window.innerHeight * 0.01}px`  );
};

setViewportHeight();

window.addEventListener('resize', setViewportHeight);

.fullscreen-block { 
  height: calc(var(--vh) * 100);
}

То есть буквально костылить динамический размер экрана через JS, что было крайне неудобно.

Поэтому были добавлены dvh, lvh и svh.

.hero {  
  min-height: 100dvh;
}

Они позволяют, в зависимости от текущего состояния интерфейса браузера, получить более актуальный размер экрана, не прибегая к JS. Для меня это одна из самых удобных вещей, которая реально используется на постоянной основе.

aspect‑ratio

Все ведь ругались на картинки, пока пытались настроить их нормальное отображение. Особенно когда в макете заказчика одна и та же картинка должна использоваться и для ПК, и для мобильной версии сайта. Если скажете, что нет, то не поверю.

Не так давно по моим меркам в CSS было добавлено свойство aspect-ratio, которое позволяет управлять соотношением сторон блоков. Причём это работает и на картинках.

Допустим, у нас есть обычная картинка котика, и мы хотим, чтобы он был шире.

<img class="cat cat--wide" src="cat.jpg" alt="Котик">

.cat {  
  width: 300px;  
  object-fit: cover;
}

.cat--wide { 
  aspect-ratio: 16 / 9;
}

Мы получаем котика в 16/9.

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

.cat--square {  
  width: 300px;  
  aspect-ratio: 1 / 1;
}

И вот у нас уже квадратный котик.

Нужно фото на паспорт 3 на 4? Тоже без проблем:

.cat--passport { 
  width: 300px;  
  aspect-ratio: 3 / 4;  
}

На фоне старых подходов это ощущается очень приятно. А если учесть, что оно работает и на canvas, и на div, то работать с этим просто лучшее, что случалось со мной в последнее время

Цвета

В CSS появилось довольно много новых возможностей для работы с цветами — вроде color-mix() или новых цветовых пространств, например oklch. Однако на практике такие вещи используются не так уж часто: в типичных задачах они большинству просто не нужны.

Зато задача тёмной темы встречается постоянно. Раньше её обычно реализовывали через классы вроде .light и .dark, вручную переопределяя цвета. Часто это сопровождалось дублированием стилей и не самым аккуратным кодом.

Полностью отказаться от классов сейчас нельзя, если на сайте предусмотрен ручной переключатель темы. Но можно использовать более современный гибридный подход — сочетание классов и light-dark().

:root { 
  color-scheme: light dark;  
  
  --bg: light-dark(#fff, #121212);  
  --text: light-dark(#111, #eee);
}
body {  
  background: var(--bg);  
  color: var(--text);
}

.light { 
  color-scheme: light;
}

.dark {  
  color-scheme: dark;
}

В таком подходе:

• light-dark() автоматически выбирает нужный цвет в зависимости от текущей схемы

• color-scheme управляет этой схемой

• класс на body или html (.light / .dark) выступает как ручной переключатель

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

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

Заключение

На самом деле было добавлено и обновлено невероятно много вещей, которые в рамках одной статьи охватить просто невозможно. Чего стоит один лишь position-anchor, который я здесь не затрагивал просто потому, что это уже отдельная большая тема.

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