Привет, Хабр.
Каждый год я смотрю, какие новые фишки в 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 ООО «МТ ФИНАНС»
Комментарии (27)
Endorphin13
27.01.2026 14:47Интересно, конечно, но поддержки последними версиями браузеров, как правило, недостаточно, обычно, на проекте несколько последних версий поддерживается.
Juicy8293
27.01.2026 14:47Лично у меня мозг сопротивляется фичам @scope @layer. Прям читаю и превращаюсь в чувака из мема "парень с венами на лбу". Переопределение каскада, выделение областей для переопределения... это же противоречит природе CSS - каскаду и специфичности. Могу представить кейсы, например жуткий легаси, где бардак и там концы с концами не сходятся, здесь да, ок, меньшей кровью, так сказать. Но на данном этапе только больше путаницы
PS: еще про!importзабыл. Каскад, спецефичность,!import,@scope,@layer. Вообще не запутаешься...
dom1n1k
27.01.2026 14:47Ну scope вроде нормально в голову укладывается, а вот layer - да. Вроде бы и хорошая задумка, но в реальности хочется избегать. Предполагаю, что причина тут как с container - трудно смешивать старое и новое. Ты либо полностью переходишь на новую парадигму, либо нет. А если смешивать - получается каша. Но я всё-таки думаю, что container со временем приживется. А вот с layer не уверен.
Juicy8293
27.01.2026 14:47Вот да. Казалось бы, все эти новые фичи призваны облегчить жизнь разработчику, но из-за того что все сливается в кашу по итогу, когнитивная нагрузка только возрастает. Конечно, уже скорее всего мой мозг закостенел и не поспевает за всем, но, а с другой стороны, я сомневаюсь что средний фроненд разраб (а это реакт разраб), даже молодой, тоже за этим поспевает. Хорошо если вообще в *.css файлы заглядывает, а не атомными классами разметку бомбит.
Ну и вообще, столько всего завезли за последнее время, что воспринимается как переусложнение. Круто, конечно, но интерес как-то подутихает. Но это я про себя.
Для какого-нить css-энтузиаста сейчас, возможно, золотой век.
ILaeeeee
27.01.2026 14:47Конечно, уже скорее всего мой мозг закостенел и не поспевает за всем
Не, объективно всего стало в разы больше. Вот я нейросетку попытал, какой прогресс за 20 лет (когда только я в веб пришёл).
Ну и для кучи зоопарк и эволюция сборщиков, препроцессоров, фреймворков и библиотек, фичи IDE и dev tools, системы контроля версий и т.д.
Порог полноценного вхождения просто в разы поднялся.
Я, лично, особо не парюсь на счёт нового. Ввожу в работу только через лет 5-10, когда настоится и количество девайсов на старых браузерах уменьшиться. А то сделаешь на новых фичах, а потом заказчик тебе тычет, что в половине офиса на относительно старых айпадах или макбуках сайт криво показыется. Конечно, есть фичи, которые мега удобные и полифилл какой-нибудь лучше использовать (например, когда IE был, какой то там, непомню, флексбоксы не поддерживал, а надо было порядок менять элементов).dom1n1k
27.01.2026 14:47Порог полноценного вхождения просто в разы поднялся.
Ну это спорный вопрос. Хотя точка зрения очень популярная. Особенно в обсуждениях найма часто можно видеть - столько всего появилось, столько всего требуют, раньше было легче. Но мне, заставшему "те" времена, это вообще неочевидно.
Да, количество ключевых слов в резюме сильно возросло, тут спорить не о чем.
Но во-первых, изменились требования к глубине. Раньше с тебя спрашивали условно PHP и MySQL, но ожидали, что ты уже ими владеешь, понимаешь, умеешь применять на уровне как минимум нынешнего джуниор+ (если не мидла). Сейчас - список из 10 технологий, но для старта достаточно поверхностного ознакомления.
А во-вторых, доступность информации. Да, раньше CSS был в несколько раз меньше. Но в нагрузку к нему шел огромный пласт неявных знаний о нюансах, багах, хаках, воркэраундах - и собирать их приходилось по крупицам. Сейчас - ну читай доку и делай как там сказано, в 99% случаев будет работать как написано.
Lippiece
27.01.2026 14:47Вы штампуете эти нейростатьи каждый день в 12 и 4 по МСК. Почему, мистер Андерсен, что вы делаете, во имя чего? Так как я не могу фильтровать ленту, единственное, что остается это написать об этом. Хотелось бы больше качественных статей на хабре. Вместо этого у нас 80% это 4800 (посмотрите сами у них в профиле) статей рувдс и пары других таких же компаний.
melnik909 Автор
27.01.2026 14:47Мой кумир! Я прям горд собой
Lippiece
27.01.2026 14:47Если вы имеете в виду, что я уже писал комменты под одним из ваших многочисленных постов, то меня вряд ли можно из-за этого назвать вашим кумиром, не стоит себе льстить. Этот поток статей трудно игнорировать, и далеко не почтением.
melnik909 Автор
27.01.2026 14:47вряд ли можно из-за этого назвать вашим кумиром
Кумир - человек, вызывающие восторг, слепую привязанность и преклонение.
Я вас своим кумиром назвал
melnik909 Автор
27.01.2026 14:47Этот поток статей трудно игнорировать, и далеко не почтением.
Если есть конкретные замечания, то можно их написать. Я всегда рад критике
melnik909 Автор
27.01.2026 14:47что вы делаете, во имя чего?
Занимаюсь тем, что нравится
Хочу надоесть всем темой CSS, чтобы уже CSS перестал быть "магией"
Зарабатываю на этом
melnik909 Автор
27.01.2026 14:47Хотелось бы больше качественных статей на хабре.
Уточните, пожалуйста, что для вас качественная статья?
Lippiece
27.01.2026 14:47Согласен, значение слова кумир я неправильно вспомнил. Да, причины и мотивы этого конвеера очевидны, это риторический вопрос. Качественная статья -- написанная своими силами, об оригинальном вопросе и с оригинальным исследованием (пусть даже это будет простая тема вроде введения в новые фичи CSS). Которую нельзя заменить прочтением аналогичной на developer.mozilla.org. В которой предлагаются новый взгляд или идеи. Я вижу поверхностное обсуждение (вполне структурированная статья, которую LLM отдают на большинство сообщений, даже "почему небо голубое"), недавний всплеск доказанно или очевидно сгенерированных статей, автоматизацию "12:01, 16:01, 12:01, 16:01...". В отдельности эти тейки могут восприниматься как придирки. Насколько я понимаю, вы подразумеваете, что эту вы (или кто-то еще другую в этой компании) писали самостоятельно, но для меня как для читателя этот поток не воспринимается иначе, чем pulp fiction или одна из банок кетчупа в супермаркете. И я вижу эти шесть пальцев, и у меня это не вызывает ничего, кроме сарказма про Матрицу.
Я не обманываю себя, что этими комментариями внезапно контент улучшится (в конце концов, "постите сами смешное"), раз эта схема работает, и, видимо, hacker news навсегда. Но было бы здорово найти русскоязычную площадку вроде этой, где не надо было автоматически задумываться о том, что контент написал человек, видеть нейрокартинки без повода или хотя бы иметь возможность фильтровать ленту.
melnik909 Автор
27.01.2026 14:47Я спросил вас, что конкретно не так. Вместо списка моих ошибок, вы снова сводите свою мысль, что статья сгенерена.
Для меня это комплимент. Я так генерю уже 10 лет. Значит делаю все правильно. Единственное, что я создаю с помощью ИИ, это превьюхи. Ну я их специально и делаю такими, потому что для меня это прикол.
Lippiece
27.01.2026 14:47Еще раз, я узнаю что-то новое, если после прочтения developer.mozilla.org об этих фичах прочту эту статью? Статья сделана с помощью ИИ (да, картинка тоже, она, в конце концов, первое, что я вижу)? Был ли какой-то иной мотив для создания статьи, кроме заработка? Есть ли хоть одна новая идея в этой статье? На эти вопросы полностью или частично ответ "нет", вот что конкретно "не так".
И, снова, я признаю (=верю на слово), что ваша статья это полностью ваше творчество, и это хорошо. Проблема не конкретно в ней.
normal
27.01.2026 14:47половина примочек и "методологий" CSS - это попытки отключить приколы каскада)) может в самой консерватории (w3c) чего-то поправить?)
eungenue
27.01.2026 14:47А эти фичи все - это рюшечки ради рюшечек? Т.е. «показалось так будет лучше» - взяли да добавили? Или есть стандарт, над которым долго думали и все красиво спроектировали? Перефразирую. Т.е. веб - это такая модная тачка в стиле индийского тюнинга? Здесь добавил, тут подкрасил, там подвесил? А если это стандарт, то почему в предыдущих версиях браузеров это не было поддержано сразу и везде? Проблема в процессах разработки? Сразу во всех браузерах? Или стандарт - не такой уж и стандарт? Или таки web is broken by design? Или, быть может, во всем этом не видят проблемы? Тогда что это - некомпетенция или таки саботаж?
ILaeeeee
Кто нибудь отказался уже от БЭМ и препроцессоров? Миксины, функции, переменные, вложенность селекторов, циклы - уже не нужны?
monochromer
От препроцессоров - да, от БЭМ очень сложно отказаться
ILaeeeee
Что заместо миксинов и функций?
monochromer
композиция классов
popuguytheparrot
нативные функции в цсс и утилитарные классы
kspshnik
Что только не придумают, чтобы не разбираться в БЭМ :)