26.05.2026 09:02
melnik909 4 14000 Источник

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

Мне всегда нравилось следить за тем, как развивается 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, border outline и т. д;

  • функция contrast-color для подбора контрастного цвета, которую можно использовать для свойств, принимающих цвет;

  • функция contrast-colorсс некоторыми недостатками, которые мешают использовать её в проектах с широкой аудиторией;

  • свойство caret-shape, позволяющее создавать более атмосферные формы текстовой каретки.

Что думаете по поводу новинок в CSS? Уже хотите что-то использовать? Делитесь своим мнением в комментариях. Буду ждать фидбек от вас.

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

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

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

Комментарии (4)


  1. Metotron0
    26.05.2026 09:26
    #30020484

    к концу года оно появится везде. Так что готовьтесь.

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

    Но даже при таком условии иногда приходят жалобы от владельцев каких-ниьбудь старых Safari на iphone.


    1. JerryI
      26.05.2026 09:26
      #30021080

      Иногда хочется сказать Chrome Dev Team: "Горшочек не вари"


    1. alexnozer
      26.05.2026 09:26
      #30023788

      Инициатива Baseline отводит 30 месяцев (2.5 года) с момента появления фичи во всех основных браузерах (Chrome, Edge, Firefox, Safari и их мобильных версиях). Спустя это время фича получает статус Baseline Widely Available, то есть по исследованиям группы WebDX этого времени достаточно для широкого распространения. Так что ваш подход и временной диапазон близок к статусам Baseline.


  1. ImagineTables
    26.05.2026 09:26
    #30026400

    А лет через триста браузеры научатся сами строить border-shape по альфа-каналу, как Фотошоп для слоевых стилей (но это неточно).