Привет, Хабр!
Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.
Я составил список новинок, которые кажутся мне особенно интересными и важными. Они всё ещё экспериментальные. Браузеры только в последние месяцы начали поддерживать их. Так что это суперсвежие штуки.
Давайте посмотрим, что я вам подготовил.
Свойство border-shape
Я очень люблю свойство clip-path. Недавно даже написал статью, как его использую в анимации лоадеров. Если не видели, посмотрите.
В общем всё у него хорошо, только оно обрезает большинство декоративных свойств. Для демонстрации этого поведения добавим свойство box-shadow к элементу с объявленным свойством clip-path.
<body>
<div class="awesome-block"></div>
</body>.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
clip-path: circle(50%);
box-shadow: 0 0 10px #222;
}
Нет тени. Вот поэтому многие используют свойство filter со значением drop-shadow в таких ситуациях. Но это лютый хак, влияющий на производительность отрисовки веб-страницы.
Коллеги, скоро можно будет его не делать! У нас появляется свойство border-shape, которое также позволяет визуально изменять форму элемента, как свойство clip-path, но при этом сохраняется возможность применять декоративные свойства.
Давайте посмотрим, как браузер Google Chrome отобразит элемент из предыдущего примера. Только заменим свойство clip-path на свойство border-shape.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: circle(50%);
box-shadow: 0 0 10px #222;
}
Вот она — магия! Тень теперь отображена по всему кругу и хорошо заметна. Давайте рассмотрим, что позволяет делать свойство border-shape.
В целом оно даёт такие же возможности, как свойство clip-path. У нас есть несколько функций, которыми мы можем оперировать. Рассмотрим каждую.
Функция inset() «обрезает» элемент по форме четырёхугольника. Значение устанавливается с помощью четырёх координат, по которым браузеры «вырезают» форму. Его можно объявить несколькими способами, по аналогии со свойствами margin, padding и т. д.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: inset(10px 20px 5px 15px);
box-shadow: 0 0 10px #222;
}Второе значение — это функция circle(). С помощью неё браузеры отобразят окружность. Объявленное нами значение определяет её радиус.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: circle(50%);
box-shadow: 0 0 10px #222;
}Функция ellipse() похожа на функцию circle(), только вместо окружности мы увидим эллипс. Ещё одно отличие между функциями заключается в том, что мы устанавливаем два радиуса.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: ellipse(30px 50px);
box-shadow: 0 0 10px #222;
}Форму многоугольника мы можем получить с помощью функции polygon(). В качестве значения нужно установить координаты точек, по которым будет происходить «обрезка» элемента.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
box-shadow: 0 0 10px #222;
}Также браузеры могут «вырезать» любую форму, используя функцию path(). Если вы работали с атрибутом path у элемента svg, то для вас не будет ничего нового. Принцип такой же.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");
box-shadow: 0 0 10px #222;
}Последняя функция — это новинка CSS. У нас появилась функция shape(), которая также позволяет получить любую форму. Только теперь авторы подготовили для нас новый синтаксис, состоящий из разных ключевых слов.
.awesome-block {
width: 200px;
height: 200px;
background-color: tomato;
border-shape: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);
box-shadow: 0 0 10px #222;
}Честно признаюсь, что для меня функция shape() — это тёмный лес. Как только разберусь с ней, то сразу напишу статью. А пока что мне сказать нечего.
Если говорить о поддержке в браузерах, то свойство border-shape уже работает в браузере Google Chrome, Edge и Andorid Google Chrome. Но мне кажется, что к концу года оно появится везде. Так что готовьтесь. Если вы работаете в креативных проектах, свойство border-shape станет очень востребованным.
Функция contrast-color
Контраст цвета текста и фона — очень частая проблема у пользователей. Так сложилось, что меня окружают слабовидящие люди. Моя мама специально встаёт с дивана, чтобы прочитать бледный текст на красивой картинке в приложении по просмотру текста. Подруга щурится и приближает текст, когда не может что-то прочитать. А были ещё коллеги.
В общем я видел много случаев, когда контраст цвета текста вызывает сложности. Конечно, этот вопрос больше лежит в области дизайна, но теперь и фронтендеры могут кое-что сделать. В CSS появилась функция contrast-color.
Она принимает значение цвета, а возвращает тоже значение цвета, только оно хорошо контрастирует с первым. Давайте посмотрим на примере, как это работает.
У нас будет пользовательское свойство --background-color, хранящее цвет фона элемента. Его мы добавим для свойства background-color. Далее мы объявим функцию contrast-color для свойств color и box-shadow, и в качестве её параметра тоже будем использовать пользовательское свойство --background-color.
<body>
<div class="awesome-block">
<span>Этот текст для примера</span>
</div>
</body>:root {
--background-color: #f88a0d;
}
.awesome-block {
background-color: var(--background-color);
color: contrast-color(var(--background-color));
box-shadow: 0 0 10px contrast-color(var(--background-color));
}
А теперь поменяем цвет фона. Будем использовать значение #660066.
:root {
--background-color: #660066;
}
.awesome-block {
background-color: var(--background-color);
color: contrast-color(var(--background-color));
box-shadow: 0 0 10px contrast-color(var(--background-color));
}
Цвет текста адаптировался под новый фон! Но не спешим радоваться...
Когда я изучал функцию contrast-color, у меня зародилось множество надежд. К сожалению, пока они не могут сбыться. Есть цвета, при которых функция подберёт пару, которая будет плохо контрастировать. Например, это значение #2277d3.
:root {
--background-color: #2277d3;
}
.awesome-block {
background-color: var(--background-color);
color: contrast-color(var(--background-color));
box-shadow: 0 0 10px contrast-color(var(--background-color));
}
Ещё отдельной проблемой является то, что браузеры подбирают абсолютно белый и чёрный цвета. Давайте во вкладке «Computed» посмотрим, какое значение цвета браузеры применили. Для этого вернём значение #660066.
Мы видим значение rgb(255, 255, 255), что соответствует абсолютному белому цвету. Именно он мучает пользователей со светобоязнью. По этой причине я не рекомендую использовать такие цвета.
Но если в вашем проекте палитра цветов и аудитория позволят использовать функцию contrast-color, то не вижу причин избегать её. Сегодня она работает в браузерах Google Chrome, Edge, Firefox, Safari, Opera, iOS Safari и Android Google Chrome.
Но для проектов с широкой аудиторией пока рано. Функция contrast-color слишком сырая.
Свойство caret-shape
Достаточно давно в CSS есть свойство caret-color, задающее цвет текстовой каретки при вводе данных в полях формы. Теперь у нас есть возможность также изменить её форму благодаря свойству caret-shape.
Авторы стандарта определили три формы курсора, которые можно получить с помощью значений bar, block и underscore. Рассмотрим каждое.
Первое значение bar отображает текстовую каретку в виде тонкой вертикальной линии, которую вы видите постоянно в текстовых полях форм веб-интерфейсов.
.awesome-field {
caret-shape: bar;
}
Вторая форма текстовой каретки напоминает терминальные интерфейсы. Линия такая же вертикальная, но сильно шире. Она создаётся с помощью значения block.
.awesome-field {
caret-shape: block;
}
Третье значение — это underscore. С помощью него браузеры отобразят горизонтальное подчёркивание, которое вы могли встретить в консольных интерфейсах.
.awesome-field {
caret-shape: underscore;
}
Учитывая, что создание антуражных интерфейсов не является частой задачей, поддержка свойства caret-shape неплохая. Оно уже работает в браузерах Google Chrome, Edge, Opera и Andorid Google Chrome.
Заключение
Подведём итог. В браузерах на лето 2026 года появились новые возможности CSS, а именно:
альтернатива свойству
clip-path— свойствоborder-shapeдля создания различных форм с сохранением отображения декоративных свойствbox-shadow,borderoutlineи т. д;функция
contrast-colorдля подбора контрастного цвета, которую можно использовать для свойств, принимающих цвет;функция
contrast-colorсс некоторыми недостатками, которые мешают использовать её в проектах с широкой аудиторией;свойство
caret-shape, позволяющее создавать более атмосферные формы текстовой каретки.
Что думаете по поводу новинок в CSS? Уже хотите что-то использовать? Делитесь своим мнением в комментариях. Буду ждать фидбек от вас.
На этом всё. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.
© 2026 ООО «МТ ФИНАНС»