Новые CSS-фичи, появившиеся к началу 2026 года / Хабр

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

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

Этот год не стал исключением. Я составил список понравившихся новинок в CSS, которые появились к началу 2026 года. Сразу скажу, что это совсем новые фишки. Их браузерная поддержка ограничена в основном только браузером Google Chrome.

Давайте посмотрим, что я вам подготовил.

Правило @function

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

По этой причине разработчики не могут отказаться от препроцесоров, хотя CSS уже давно позволяет это сделать. Авторы стандартно продолжают движение в эту сторону. Теперь у нас есть возможность создавать собственные функции с помощью правила @function.

Всё как у языков программирования. Нам нужно объявить название функции, передать аргументы и получить результат. Давайте сразу перейдём к примеру.

В нём я объявлю функцию --awesome-template, которая будет принимать один параметр --count-columns. С помощью него мы будем определять нужное количество колонок в сетке. Также они будут одинаковой ширины.

<body>
  <div class="awesome-container">
    <span class="awesome-box">1</span>
    <span class="awesome-box">2</span>
    <span class="awesome-box">3</span>
    <span class="awesome-box">4</span>
    <span class="awesome-box">5</span>
  </div>
</body>

@function --awesome-template(--count-columns) {
  result: repeat(var(--count-columns), 1fr);
}

.awesome-container {
  display: grid;
  grid-template-columns: --awesome-template(3); /* хочу чтобы была сетка из 3 колонок */
}

Мне кажется, что так не очень понятно, в чём же прелесть правила @function. Давайте добавим ещё медиа-запросы.

@function --awesome-template(--count-columns) {
  result: repeat(var(--count-columns), 1fr);
}

.awesome-container {
  display: grid;
}

@media (width > 640px) {
	
  .awesome-container {
    grid-template-columns: --awesome-template(2);
  }
}

@media (width > 1200px) {
	
  .awesome-container {
    grid-template-columns: --awesome-template(3);
  }
}

Этот код является прямым аналогом подхода с обычным объявлением свойства grid-template-columns в медиа-запросах.

.awesome-container {
  display: grid;
}

@media (width > 640px) {
	
  .awesome-container {
    grid-template-columns: repeat(2, 1fr);
	}
}

@media (width > 1200px) {
	
  .awesome-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Лично мне кажется, что первый вариант с правилом @function выглядит более читаемым. Конечно, это субъективная оценка. Но кто-то согласится со мной. Так что у нас появилась новая возможность упростить читаемость кода.

Браузерная поддержка: Google Chrome, Edge, Opera и Android Google Chrome.

Функция if()

Теперь в CSS есть условия и функция if(). Для доказательства я объявлю свойство background, которое будет менять своё значение в зависимости от ширины вьюпорта. И да, это всё будет работать без классической конструкции медиа-запроса.

body {
  background-color: if(
    media(width < 600px): green; else: yellow
  );
}

Чтобы увидеть, как меняется фон, используйте браузер Google Chrome. В нём сделайте ширину вьюпорта меньше 600 пикселей, а потом обратно больше 600.

Сама по себе функция if() бесполезна без функций media(), style() и supports(). С помощью них разработчик расскажет браузеру о типе условия. Тогда они уже смогут с ними работать.

С функцией media() мы уже познакомились. Она позволяется работать с медиа-типами и медиа-функциями. Даже доступны логические операторы.

body {
  background-color: if(
    media((width < 700px) or (width > 1000px)): green; else: yellow
  );
}

С помощью функции style() мы можем объявить условия, основываясь на значении другого свойства. Например, я напишу условие, которое будет реагировать на изменение значения свойства color.

body {
  background-color: if(
    style(--color: white): green; else: yellow;
  );
  --color: black;
}

@media (width < 1000px) {
  body {
    --color: white;
  }
}

И последний вид условий — это проверка поддержки определённой возможности в браузере. Для примера я напишу условие, которое будет реагировать на поддержку в браузере свойства margin-inline.

Если свойство поддерживается, то будет использовано значение green. Если нет, то yellow.

body {
  background-color: if(
    supports(margin-inline: 1rem): green; else: yellow;
  );
}

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

Браузерная поддержка: Google Chrome, Edge, Opera и Android Google Chrome.

Функция sibling-index()

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

В прошлом году в CSS появилась замечательная функция sibling-index(). Она возвращает номер элемента в группе. В рамках статьи я не буду создавать анимацию с помощью неё. Мы просто увеличим размер текста!

У каждого элемента будем увеличивать значение свойства font-size на свой номер в группе элементов. Второй увеличим на двойку, третий на тройку и т. д.

<body>
  <span class="awesome-block">1</span>
  <span class="awesome-block">2</span>
  <span class="awesome-block">3</span>
  <span class="awesome-block">4</span>
</body>

.awesome-block:nth-child(2) {
  font-size: calc(sibling-index() * 1rem);
}

.awesome-block:nth-child(3) {
  font-size: calc(sibling-index() * 1rem);
}

.awesome-block:nth-child(4) {
  font-size: calc(sibling-index() * 1rem);
}

Лично мне всегда не хватало такого элемента при создании анимации. Проще стало с пользовательскими CSS-свойствами. С помощью них можно было передать значение. Но некоторым разработчикам такой подход не нравился.

Хорошо, что скоро и эти костыли уйдут в прошлое. Ура!

Браузерная поддержка: Google Chrome, Edge, Opera, Safari, Android Google Chrome и iOS Safari.

Свойство interest-delay

Раньше у меня был загон стараться реализовать всё с помощью CSS. Я прям упарывался. Одним из основных ограничений было мгновенное срабатывание псевдо-классов. Например, если использовать псевдо-класс :hover, то он сработает сразу же после наведения на элемент.

Это огромная проблема, если реализовывать выпадающие элементы. Меню, селекты и т. д. Она заключается в том, что пользователь не может мгновенно перевести курсор на выпадающий список. В итоге он играл в игру «Попади на список, пока он не исчез».

Все эти года такая проблема решается с помощью JavaScript. Задаётся задержка, чтобы человек смог комфортно навести на элемент списка.

Я понимаю, что без примера сложно понять, о чём я говорю. Извиняюсь за это. Всё выше сказанное было к тому, что в CSS появился способ задать такую задержку. Это свойство interest-delay.

Вот теперь переходите на интерактивную демонстрацию с сайта MDN. В ней есть чекбокс, который позволит заметить разницу. Сначала посмотрите, как появляется элемент «Hover tooltip«» без установленного чекбокса, а потом с ним. Главное делайте это в браузере Google Chrome.

Для тех кто, не захочет переходить, расскажу, как объявить свойство. Всё также, как у свойств, у которых устанавливаем время.

.delay {
  interest-delay: 1s 2s;
}

В демонстрации этот класс добавляется к элементу button. После чего начинается вся магия. Всё же посмотрите!

Браузерная поддержка: Google Chrome, Edge и Android Google Chrome.

Свойство field-sizing

При вёрстке форм бывает, что требуется сделать размеры элементов адаптирующимися под введённый контент. Такую штуку всегда делали с помощью JavaScript. Но два года назад появилось свойство field-sizing, которое позволяет сделать тоже самое только с помощью CSS.

Нам достаточно объявить значение content. Для демонстрации я сделаю это для элемента input. И у него по умолчанию будет введён уже текст «Стас».

<body>
  <form>
    <label for="name">Имя</label>
    <input id="name" type="text" value="Стас">
  </form>
</body>

input {
  display: block;
  field-sizing: content;
}

А теперь добавим мою фамилию «Мельников».

Как я уже сказал, свойство field-sizing существует уже несколько лет. Но в конце 2025 года оно стало поддерживаться в браузере Safari. Это уже позволяет использовать его в гораздо большем количестве проектов. Также надеюсь, что в этом году подтянется браузер Firefox.

Браузерная поддержка: Google Chrome, Edge, Opera, Safari, Android Google Chrome и iOS Safari.

Заключение

Подведём итог. На январь 2026 года в браузерах появились новые следующие новые возможности:

адаптировать элемент формы под введённый контент с помощью свойстваfield-sizing;
создавать свои нестандартные функции с помощью правила @function;
объявлять значения в зависимости от условия, используя функцию if();
установить задержку свойством interest-delay перед появлением и исчезновением элемента при использовании псевдо-класса :hover;
определять номер элемента в группе и использовать его для стилизации благодаря функции sibling-index().

Это мой личный топ. Конечно, новинок больше. Есть и обновлённая функция attr(), новые свойства для анимации (view-timeline, animation-timeline и view-timeline) и многое другое.

В общем я вам дал свою рекомендацию. Теперь буду ждать вашу. Напишите, пожалуйста, в комментариях, какие появившиеся новинки в CSS к январю 2026 года вам понравились. Буду ждать их.

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

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

Новые CSS-фичи, появившиеся к началу 2026 года