Зачем нужны кастомные свойства и как они работают? — спрашивает наш зритель Андрей. Они пришли, чтобы навсегда изменить CSS. Давайте разберёмся.

В языках программирования есть переменные: вы что-нибудь один раз объявляете, присваиваете значение, а потом снова и снова используете. Если значение переменной меняется, то меняется везде. Похоже на местоимения в языке: из предложения или абзаца всегда понятно, кто «мы» или что за «оно», мы их как будто объявили раньше и наверняка переопределим потом.

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

Как вообще работают препроцессоры? Вы пишете на каком-то языке, который внешне напоминает CSS, а иногда вообще не напоминает.

@mixin sass
  @if &
    &:hover
      color: tomato
  @else
    a
      color: plum

Потом это компилируется в настоящие стили. Переменные там — это такая сложная автозамена переменных на их значения. Sass, Less, Stylus, PostCSS-плагины — все они работают только так. Эти переменные существуют только в разработке, в браузере их уже нет.

.scss {
  $variable: value;
  color: $variable;
}

Если сравнить такое поведение с JavaScript, то становится очень обидно за CSS. В JS переменные живут прямо в браузере, их можно создавать и менять на лету. Тем не менее такие переменные и другие элементы программирования в CSS-препроцессорах получили огромную популярность. Уже почти не бывает больших проектов без препроцессоров.

К счастью, нашлись люди, недовольные такими куцыми переменными. После ряда черновиков и вариаций синтаксиса, Таб Аткинс написал спецификацию полноценных CSS-переменных, точнее, кастомных свойств. Эти переменные поддерживаются уже в 70% браузеров по миру и сильно меняют принцип написания стилей.

Кастомные кто? Объясняю. Помните, я говорил, что CSS не очень-то готов к переменным? Чтобы сохранить синтаксическую совместимость со старыми браузерами и не противоречить модели языка, было решено сделать не просто переменные с долларом в начале, а механизм создания собственных свойств для нужд разработчика. Ещё их переводят как «пользовательские» свойства, но с этим возникает путаница: кто здесь пользователь, а кто здесь разработчик? Сразу скажу, синтаксис у них немножко странный, но вы поймёте почему.

Например, у нас сейчас есть свойство box-shadow, чтобы отбрасывать тень. А раньше его не было, оно появилось первым в браузере Safari в 2008 году. Но появилось не просто так, а как -webkit-box-shadow, с префиксом, начинающимся с дефиса. То есть разработчики движка WebKit придумали своё свойство. Только потом, когда оно стало частью стандарта и появилось в других браузерах, префикс убрали.

.shady {
  -webkit-box-shadow:
    0 0 0 4px tomato;
  box-shadow:
    0 0 0 4px tomato;
}

Теперь вы тоже можете создавать собственные свойства, только не нужно указывать между дефисами название движка: дефис, дефис, название свойства. Давайте создадим свойство --box-shadow-color и зададим ему значение tomato. Чтобы использовать это значение в коде, нужно передать его в функцию var().

.shady {
  --box-shadow-color:
    tomato;
  box-shadow:
    0 0 0 5px
    var(--box-shadow-color);
}

Мы сейчас объявили новое свойство, которое потом можно повторно использовать снова и снова. А ещё свойства box-shadow-color никогда не было в природе и чтобы менять тени, например, по наведению, приходилось переписывать box-shadow целиком. А теперь по ховеру можно просто поменять значение переменной. Круто?

.shady {
  --box-shadow-color:
    tomato;
}
.shady:hover {
  --box-shadow-color:
    plum;
}

Если вы используете кастомное свойство, которое почему-то не было объявлено, то можно указать его значение по умолчанию, которое будет использовано в таком случае. Ваш компонент тогда можно будет настроить, но без настройки он не сломается.

.shady {
  font-size:
    var(
      --font-size,
      12px
    );
}

Из-за того, что это кастомные свойства, а не просто доллары с автозаменой, они ведут себя как обычные свойства: наследуются вглубь для всех детей элемента и не видны между элементами-соседями. Чтобы переменную точно было видно во всём документе, её нужно задать самому корневому элементу html, но лучше даже :root, на случай если это корневой элемент svg.

:root {
  --font-size: 12px;
  --theme-color:
    tomato;
}

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

@media (min-width: 320px) {
  .shady {
    --font-size: 48px;
  }
}

Кастомные свойства можно использовать даже внутри функции calc(), которая посчитает результат выражения внутри. Уже не очень похоже на привычный CSS, правда? Стоит ли говорить, что все препроцессоры уже умерли от зависти, глядя на такое.

.shady {
  font-size:
    calc(
      var(--font-size)
      * 2
    );
}

Ещё кастомные свойства становятся идеальным транспортом для данных между скриптами и стилями. Например, вы можете динамически считать координаты мыши в JS и пробрасывать их в кастомные свойства через setProperty в нужный элемент.

element
  .style
  .setProperty(
    '--pointer-left',
    event.clientX
  );

Дальше в стилях уже можно решить: использовать их в top и left или transform: translate(). И наоборот: значение свойства можно получить в JS с помощью getPropertyValue.

И это я только кастомные свойства лапкой потрогал, дальше ещё куча интересного, что кардинально меняет работу со стилями. Читайте и смотрите дальше сами: статьи, видео и слайды в описании.

Кастомные свойства — это не border-radius, который либо делает красиво, либо нет. Бросаться всё переделывать на них пока рано, вёрстка может сильно поломаться в браузерах, которые их не поддерживают. Но уже пришло время пробовать и уметь.



«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как работает ::first-line — оформление первой строки текста в CSS

Как работает ::first-line — оформление первой строки текста в CSS

Псевдоэлемент ::first-line позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.

Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29

Как использовать: first-line

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Псевдоэлемент добавляется к селектору через ::, и внутри блока задаются стили, которые применятся только к первой строке, как она отображается в браузере:

p::first-line {
  font-weight: bold;
  color: red;
}

Этот стиль сделает только первую строку текста в каждом абзаце <p> красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.

Какие свойства работают

Псевдоэлемент ::first-line не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:

Поддерживаются:

  • color
  • font и его производные (font-size, font-weight, font-style, font-variant)
  • letter-spacing, word-spacing
  • line-height
  • text-decoration
  • text-transform
  • vertical-align
  • background
  • margin-left и margin-right
  • padding-left и padding-right
  • border-left и border-right

Не поддерживаются:

  • display, position, transform, width, height и другие «структурные» свойства.

Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.

Пример с цитатой

<blockquote>
  Когда вы начнёте, главное — не останавливаться.
</blockquote>
blockquote::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.

Советы по использованию

  • Используйте ::first-line для декоративных акцентов: начало статьи, цитаты, описание карточки.
  • Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
  • Не используйте псевдоэлемент для логических операций — он только визуальный.
  • Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.

Поддержка

Псевдоэлемент ::first-line поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block, inline-block, inline).

Заключение

::first-line — это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

CSS
  • 27 июля 2025
Как работает :not() в CSS — исключаем элементы из стилей правильно

Как работает :not() в CSS — исключаем элементы из стилей правильно

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

Псевдокласс :not() позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.

Читать дальше
CSS
  • 20 июля 2025
Выбор цветов в CSS через hsl() и hsla()

Выбор цветов в CSS через hsl() и hsla()

CSS-функции hsl() и hsla() позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.

Читать дальше
CSS
  • 18 июля 2025
Как перекрыть один элемент другим. CSS-свойство z-index

Как перекрыть один элемент другим. CSS-свойство z-index

Свойство z-index в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index, тем ближе к пользователю расположен элемент.

Читать дальше
CSS
  • 16 июля 2025
Единица измерения cap в CSS

Единица измерения cap в CSS

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.

Читать дальше
CSS
  • 8 июля 2025
10 свойств в CSS о которых вы, вероятно, не знали

10 свойств в CSS о которых вы, вероятно, не знали

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

Читать дальше
CSS
  • 22 июня 2025
Округление в CSS с функцией round()

Округление в CSS с функцией round()

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

Читать дальше
CSS
  • 22 июня 2025
focus-visible

focus-visible

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

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

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

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

Читать дальше
CSS
  • 21 июня 2025
CSS font-palette: управление цветами шрифтов

CSS font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Цветной шрифтАльтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

Читать дальше
CSS
  • 18 июня 2025
Как анимировать CSS Grids без JavaScript

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

Читать дальше
CSS
  • 1 июня 2025