Привет, Хабр.

Каждый год я смотрю, какие новые фишки в HTML и CSS стали поддерживаться современными браузерами. Таким образом понимаю, что уже можно использовать. Так как я люблю делиться всем с вами, то я подумал: «А почему бы не рассказать о новинках на Хабре?». Вот я и пришёл.

Сразу скажу, что эта статья — краткий обзор появившихся возможностей. Моя цель — уведомить вас. Я не буду закапываться в принцип работы и другие нюансы. По этой причине, пожалуйста, воспринимайте эту статью как список того, что можно изучить в 2026 году.

Моё главное правило для отбора фич заключается в том, чтобы она стала «зелёной» в 2025 году на сайте «Can I Use». Смотрю последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Chrome.

Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.

Правило @scope

Правило @scope — мощнейшая штука, которая может поменять принцип написания CSS. Лично я ставлю на это. Ведь очень многие разработчики плюются от того, как применяются стили.

Правило @scope может решить эту проблему. Его главная фишка заключается в том, что оно может ограничить область, в которой стили должны быть применены. Рассмотрим пример стилизации ссылок через селектор по элементу a.

<body>
  <div class="awesome-block _light">
	<a href="https://habr.com/">Хабр</a>
  </div>

  <div class="awesome-block _premium">
	<a href="https://habr.com/">Хабр</a>
  </div>
</body>
a {
  background-color: tomato;
  color: #fefefe
}

a {
  background-color: pink;
  text-decoration: none;
}

На данный момент к двум ссылкам применятся значения свойства color из первого правила и свойств background-color и text-decoration из второго правила. Но я хотел, чтобы свойства из первого правила применялись к первой ссылке, а из второго — ко второй. Знаете, как это сделать? Сейчас покажу.

Для этой задачи в разметке у меня есть специальные классы light и premium. Давайте сделаем так, чтобы они служили границей области применения правил. Это реализуемо правилом @scope.

@scope (._light) {
  a {
    background-color: tomato;
	color: #fefefe
  }
}

@scope (._premium) {
  a {
    background-color: pink;
	text-decoration: none;
  }
}

Д��я создания границ нам нужно передать родительский элемент, который будет главным в этой области. По сути мы создаём собственный корневой элемент, с которого стили начнут своё действие. Представьте, что вы как будто создали свой элемент html.

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

<body>
  <div class="awesome-block _light _premium">
	<a href="https://habr.com/">Хабр</a>
  </div>

  <div class="awesome-block _light _premium">
	<a href="https://habr.com/">Хабр</a>
  </div>
</body>

Правило @scope принимает любой селектор. Не обязательно использовать только класс. Например, я использую псевдо-класс :nth-child().

@scope (.awesome-block:nth-child(1)) {
  a {
    background-color: tomato;
    color: #fefefe
  }
}

@scope (.awesome-block:nth-child(2)) {
  a {
    background-color: pink;
    text-decoration: none;
  }
}

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

Для демонстрации я создам два класса: .start-scope и .end-scope. Первый будет создавать точку, где стили начнут применяться, а второй — где они перестанут действовать.

Стили напишу для ссылок с помощью селектора по элементу a. Обе будут вложены в элемент с классом .start-scope, но ко второй стили не применятся.

<body>
  <div class="start-scope">
    <a href="https://habr.com/">Хабр</a>

    <div class="end-scope">
      <a href="https://habr.com/">Хабр</a>
    </div>
  </div>
</body>
@scope (.start-scope) to (.end-scope) {
  a {
    background-color: pink;
    text-decoration: none;
  }
}

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

Оно действительно может решить много проблем. А если комбинировать его с CSS-слоями, то будет совсем бомба. Может, даже перестанете использовать Tailwind.

Атрибуты popover, popovertarget и popovertargetaction

Наконец-то мы можем создавать всплывающие элементы без использования JavaScript. Достаточно одного HTML. Понимаете? Теперь модалки, тултипы, менюшки и другие элементы можно делать только при помощи HTML!

Покажу всё на примере. Поскольку моя статья без видеовставок, я буду использовать демонстрацию из сайта Doka. Так вы сможете визуально посмотреть результат.

Для создания всплывающего элемента нам нужно использовать атрибуты popovertarget и popover. Первый мы должны добавить для интерактивного элемента, с помощью которого пользователь вызовет модальное окно.

Значение атрибута popovertarget мы должны добавить для атрибута id, объявленного у всплывающего окна. Это то же самое, как пара атрибутов for и id у элементов label и input.

Также к всплывающему окну нужно добавить атрибут popover.

<body>
  <button popovertarget="my-popover">Показать поповер</button>

  <div id="my-popover" popover>
    <p>Я — простой, но крутой поповер</p>
  </div>
</body>

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

По умолчанию элемент с атрибутом popovertarget открывает и закрывает всплывающий элемент. Это поведение можно изменить с помощью атрибута popovertargetaction и значений show, hide и toggle.

В нашем примере мы будем использовать первые два. Для первой кнопки мы добавим значение show, поскольку она открывает всплывающий элемент. Со второй будем использовать значение close. Мы же хотим, чтобы она закрывала. 

Пример всё также есть на сайте Doka.

<body>
  <button popovertarget="my-popover" popovertargetaction="show">
    Показать поповер
  </button>

  <div id="my-popover" popover>
    <button popovertarget="my-popover" popovertargetaction="hide">
      <span aria-hidden="true">❌</span>
      <span class="sr-only">Закрыть</span>
    </button>

    <p>Я — поповер, который нельзя закрыть той же кнопкой</p>
  </div>
</body>

Видите, как просто теперь создавать всплывающие элементы, используя атрибуты popover, popovertarget и popovertargetaction. Вам нужно только их добавить, а дальше браузеры сделают всю работу за вас. Прекрасно!

Свойство print-color-adjust

Есть определённые проекты, где требуется возможность распечатать веб-страницу. В CSS есть определённое количество свойств, позволяющих настраивать этот процесс. В 2025 году полностью стало поддерживаться ещё одно. Встречайте — свойство print-color-adjust.

С его помощью мы можем отключать цветную печать для определённых элементов или, наоборот, включать её. Например, по умолчанию браузер может оптимизировать цвет так, чтобы тратилось меньше чернил. За это отвечает значение economy.

Браузер оптимизировал нашу демонстрацию, удалив фон в режиме печати страницы. В итоге мы получим только текст элемента.

Если же мы хотим, чтобы элемент был напечатан без оптимизаций, нам нужно использовать значение exact.

Теперь свойство print-color-adjust со значением exact сохранило фон, установленный свойством background-color. Поэтому он будет напечатан!

Значение plaintext-only для атрибута contenteditable

В HTML есть атрибут contenteditable. С помощью него вы можете разрешить редактировать контент у любого элемента. Достаточно добавить атрибут со значением true. Я это сделаю для элемента div.

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

<body>
  <p>Это <span class="bold">текст</span> для <span class="accent">демонстрации</span>.</p>
  
  <div class="contenteditable" contenteditable="true"></div>
</body>
.contenteditable {
  border: 1px solid;
  margin-block: 1rem;
  min-height: 10rem;
}

.accent {
  color: tomato;
}

.bold {
  font-weight: bold;
}

Новое значение plaintext-only позволяет вставить такой текст без сохранения его стилизации. Мы получим просто чистый текст.

<body>
  <p>Это <span class="bold">текст</span> для <span class="accent">демонстрации</span>.</p>
  
  <div class="contenteditable" contenteditable="true"></div>

  <div class="contenteditable" contenteditable="plaintext-only"></div>
</body>

Мы видим, что при использовании значения true часть текста отображается жирным и красным цветом. А значение plaintext-only проигнорировало объявленные стили. Мы получили просто текст.

Математическая функция abs()

Если вы часто используете математические выражения в CSS, то, скорее всего, сталкивались с ситуацией, когда отрицательные значения нежелательны. Теперь есть функция abs(), которая поможет нам решить эту проблему.

Она возвращается абсолютное значение. Если вы не сильны в математике, как я, то абсолютное значение (модуль) — это его величина без учёта знака. Принимается один аргумент. Он может быть математическим выражением, значением с типом <number>, <dimension>, <percentage> или <calc-keyword>.

<body>
  <span class="awesome-block">1</span>
  <span class="awesome-block">2</span>
</body>
.awesome-block {
  display: block;
  width: abs(20px - 120px); 
  height: 100px;
  background-color: tomato;
  position: relative;
}

.awesome-block:nth-child(2) {
  background-color: lightblue;
  left: abs(-50px);
}

В результате в блочной модели мы видим, что браузеры вычислили положительное значение для свойств width и left.

Заключения

Давайте подведём итог. В этой статье мы рассмотрели:

  • правило @scoped для создания изолированных CSS-областей;

  • атрибуты popover, popovertarget и popovertargetaction для создания всплывающих элементов без применения JavaScript;

  • свойство print-color-adjust, настраивающее цвет при печати страницы;

  • значение plaintext-only, которое позволяет получить обычный текст при работе с атрибутом contenteditable;

  • математическую функцию abs(), возвращающее всегда абсолютное значение.

В этом году с новинками хуже, чем в прошлом. Мне больше всего понравилось правило @scoped и атрибуты popover, popovertarget и popovertargetaction. Конечно, ещё свойства view-transition-name и view-transition-class.

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

Остальные новинки мне пригодятся редко. А что думаете вы? Что вам понравилось — или, может, я что-то упустил? Делитесь в комментариях.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.

© 2026 ООО «МТ ФИНАНС»