Использование переменных в CSS
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. —main-color: black; ) и доступны через функцию var() (например. color: var(—main-color); ) .
Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.
CSS переменные подчиняются каскаду и наследуют значения от своих родителей.
Основное использование
element --main-bg-color: brown; >
element background-color: var(--main-bg-color); >
Примечание: В более ранней спецификации префикс для переменных был var- , но позже был изменён на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)
Первый шаг с CSS Переменными
Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:
.one color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; > .two color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three color: white; background-color: brown; margin: 10px; width: 75px; > .four color: white; background-color: brown; margin: 10px; width: 100px; > .five background-color: brown; >
Мы применим его к этому HTML:
div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three" /> textarea class="four">Lorem Ipsumtextarea> div>
что приводит нас к этому:
Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.
:root --main-bg-color: brown; > .one color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; > .two color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; > .four color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; > .five background-color: var(--main-bg-color); >
div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three" /> textarea class="four">Lorem Ipsumtextarea> div>
Это приводит к тому же результату, что и предыдущий пример, но позволяет объявить желаемое свойство только один раз.
Наследование переменных в CSS и возвращаемые значения
Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:
div class="one"> div class="two"> div class="three">div> div class="four">div> div> div>
со следующим CSS:
.two --test: 10px; > .three --test: 2em; >
В результате var(—test) будет:
- для элемента с классом class=»two» : 10px
- для элемента с классом class=»three» : 2em
- для элемента с классом class=»four» : 10px (унаследовано от родителя)
- для элемента с классом class=»one» : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.
Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.
Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:
.two color: var(--my-var, red); /* red если --my-var не определена */ > .three background-color: var( --my-var, var(--my-background, pink) ); /* pink если --my-var и --my-background не определены */ > .three background-color: var( --my-var, --my-background, pink ); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */ >
Примечание: В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)
Примечание: Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
Обоснованность и полезность
Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.
К сожалению, эти значения могут использоваться через функциональную запись var() , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции валидности во время исполнения.
Совместимость с браузерами
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 8 нояб. 2023 г. by MDN contributors.
Your blueprint for a better internet.
CSS: Переменные
Современный сайт содержит тысячи строк стилей. Стили для блоков, текста, небольших областей — всё это часто лежит в одном месте. Представьте ситуацию: есть определённый оттенок красного цвета, который мы используем во множестве различных блоков.
Насколько удобно будет изменить все значения, если захочется изменить базовый цвет? Правильно — придётся находить все значения внутри файла и заменять их на новые.
Долгое время это было одной из главных проблем CSS. С появлением стандарта CSS3 эта проблема ушла благодаря переменным.
Переменные в программировании — небольшой участок памяти, в котором мы храним нужное значение. К этому значению всегда можно обратиться из любого доступного места.
Как и в программировании, в CSS можно указать переменные, которые будут доступны в течении всего процесса разработки сайта. Если используются переменные, то можно быстро заменить одни значения на другие, вместо того, чтобы заменять значения свойств вручную.
Переменная создаётся с помощью конструкции —имя-переменной . Имя переменной вы можете выбрать сами. Для примера создадим переменную —main-color , которая будет содержать базовый цвет страниц. Пускай он будет чёрным:
--main-color: #000000; За такой простотой скрывается то, что переменные имеют разные «области видимости» — участки файла, откуда ими можно воспользоваться. Это большая тема, поэтому разберём только «глобальную область видимости». Это даст возможность использовать переменную в любом участке CSS файла.
Для создания глобальной переменной её нужно указать в специальной конструкции :root . Обычно это делается в самом начале CSS файла:
:root
Теперь можно использовать переменную в любой части нашего CSS-кода. Это делается с помощью специальной конструкции var(—имя-переменной) .
:root < --main-color: #000000; >.news-block < background-color: var(--main-color); >.left-sidebar
Если мы хотим установить другой оттенок чёрного цвета, достаточно изменить только значение переменной —main-color , и все изменения автоматически применятся к блокам с классами .news-block и .left-sidebar
Задание
Создайте переменную —main-blue и установите, в качестве значения, голубой цвет #00bfff . Переменную укажите в :root . Стили запишите в теге
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
CSS-переменные
CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными просто, они способны принести разработчику немалую пользу. Правда, часто фронтенд-программисты применяют CSS-переменные неправильно или не понимают особенностей работы с ними.
Я написал эту статью для того чтобы собрать в ней всё, что я знаю о CSS-переменных. В ходе работы над ней я надеялся узнать о них что-то новое и упорядочить то, что мне уже известно. Вы найдёте в этом материале всё, что нужно знать о CSS-переменных. Здесь имеется множество практических примеров и описаний сценариев использования CSS-переменных.
Готовы? Если так — приступим.
Введение
CSS-переменные — это значения, которые объявляют в CSS, преследуя две цели. Первая — это многократное использование таких значений. Вторая — это сокращение объёмов CSS-кода. Рассмотрим простой пример.
Стилизация элементов страницы
.section < border: 2px solid #235ad1; >.section-title < color: #235ad1; >.section-title::before
В этом примере CSS-кода значение #235ad1 используется три раза. Представьте себе, что это — часть большого проекта. В нём подобные стили разбросаны по множеству CSS-файлов. Вас попросили поменять цвет #235ad1 . В такой ситуации лучшее, что можно сделать, заключается в том, чтобы прибегнуть к возможностям редакторов кода по поиску и замене строковых значений.
Но при использовании CSS-переменных подобные задачи решаются гораздо проще. Давайте поговорим о том, как объявлять CSS-переменные. Перед именем переменной должно идти два дефиса. Объявим переменную в стиле для псевдокласса :root элемента :
:root < --color-primary: #235ad1; >.section < border: 2px solid var(--color-primary); >.section-title < color: var(--color-primary); >.section-title::before < /* Другие стили */ background-color: var(--color-primary); >По-моему, этот фрагмент кода выглядит гораздо чище, чем предыдущий. Переменная —color-primary является глобальной, так как объявлена она в стиле для псевдокласса :root . Но CSS-переменные можно объявлять и на уровне отдельных элементов, ограничивая область их видимости в документе.
Именование переменных
Правила именования CSS-переменных не особенно сильно отличаются от правил, принятых в различных языках программирования. А именно, правильное имя CSS-переменной может включать в себя алфавитно-цифровые символы, знаки подчёркивания и дефисы. Кроме того, стоит обратить внимание на то, что имена этих переменных чувствительны к регистру.
/* Правильные имена */ :root < --primary-color: #222; --_primary-color: #222; --12-primary-color: #222; --primay-color-12: #222; >/* Неправильные имена */ :root < --primary color: #222; /* Пробелы использовать нельзя */ --primary$%#%$# >Область видимости переменных
CSS-переменные имеют одну полезную особенность, которая заключается в том, что область их видимости можно ограничивать. В основе этой идеи лежат те же принципы, которые применяются в различных языках программирования. Например — в JavaScript:
let element = "cool"; function cool()
В этом примере переменная element является глобальной, она доступна в функции cool() . Но к переменной otherElement можно обратиться только из тела функции cool() . Рассмотрим эту идею в применении к CSS-переменным.
:root < --primary-color: #235ad1; >.section-title
Переменная —primary-color является глобальной, обратиться к ней можно из любого элемента документа. Если переопределить её в блоке .section-title , это приведёт к тому, что её новым значением можно будет пользоваться только в этом блоке.
Вот схема, разъясняющая эту идею.
Область видимости CSS-переменных
Тут показана переменная —primary-color , используемая для настройки цвета заголовков разделов. Нам нужно настроить цвет заголовков разделов со сведениями об избранных авторах и о свежих статьях. Поэтому в стилях этих разделов мы переопределяем данную переменную. То же самое происходит и с переменной —unit . Вот стили, на которых основана предыдущая схема.
/* Глобальные переменные */ :root < --primary-color: #235ad1; --unit: 1rem; >/* Для цвета и отступа применяются глобальные значения */ .section-title < color: var(--primary-color); margin-bottom: var(--unit); >/* Переопределение переменной, управляющей цветом */ .featured-authors .section-title < --primary-color: #d16823; >/* Переопределение переменных, управляющими цветом и отступом */ .latest-articles .section-title
Использование резервных значений
Обычно «резервные значения» используются для обеспечения работоспособности сайтов в браузерах, которые не поддерживают некие современные CSS-механизмы. Но здесь речь пойдёт не об этом, а о том, как задавать значения, используемые в том случае, если нужные CSS-переменные оказываются недоступными. Рассмотрим следующий пример:
.section-title
Обратите внимание на то, что функции var() передано несколько значений. Второе из них, #222 , будет использовано только в том случае, если переменная —primary-color не будет определена. При указании резервных значений можно использовать и вложенные конструкции var() :
.section-title
Этот подход к работе с переменными может оказаться полезным в том случае, если значение переменной зависит от некоего действия. Если может случиться так, что в переменной не будет значения, важно предусмотреть использование резервного значения.
Примеры и сценарии использования CSS-переменных
▍Управление размером компонентов
Компоненты разных размеров
В дизайн-системах часто имеются, например, кнопки разных размеров. Как правило, речь идёт о трёх вариантах размеров (маленький, обычный, большой). С использованием CSS-переменных можно очень легко описывать такие кнопки и другие подобные элементы.
.button < --unit: 1rem; padding: var(--unit); >.button--small < --unit: 0.5rem; >.button--large
Меняя значение переменной —unit в области видимости, соответствующей компоненту кнопки, мы создаём разные варианты кнопки.
▍CSS-переменные и HSL-цвета
HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота) — это цветовая модель, в которой компонент H определяет цвет, а компоненты S и L определяют параметры насыщенности и светлоты цвета.
Цвета элементов, задаваемые с использованием HSL
:root < --primary-h: 221; --primary-s: 71%; --primary-b: 48%; >.button < background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b)); transition: background-color 0.3s ease-out; >/* Затемнение фона */ .button:hover
Обратите внимание на то, как я сделал цвет кнопки темнее, уменьшив значение переменной —primary-b .
Если вас интересует тема использования цветов в CSS — вот моя статья об этом.
▍Изменение размеров элементов с сохранением пропорций
Если вы работали в какой-нибудь дизайнерской программе, вроде Photoshop, Sketch, Figma или Adobe XD, то вы можете знать об использовании клавиши Shift при изменении размеров объектов. Благодаря этому приёму можно избежать искажения пропорций элементов.
В CSS нет стандартного механизма изменения размеров элементов с сохранением пропорций. Но это ограничение можно обойти, воспользовавшись, как несложно догадаться, CSS-переменными.
Настройка размеров элемента с помощью CSS-переменных
Предположим, что у нас имеется значок, ширина и высота которого должны быть одинаковыми. Для того чтобы этого добиться, я определил CSS-переменную —size , использовав её для настройки ширины и высоты элемента.
.icon
В результате оказывается, что этот приём имитирует использование клавиши Shift при изменении размеров объектов. Тут достаточно изменить значение одной переменной —size . Подробнее эта тема освещена здесь.
▍Макеты, основанные на CSS Grid
CSS-переменные могут оказаться чрезвычайно полезными при проектировании макетов страниц, основанных на CSS Grid. Представьте, что вам нужно сделать так, чтобы Grid-контейнер выводил бы дочерние элементы, основываясь на заранее заданной ширине элементов. Вместо того чтобы создавать класс для каждого варианта представления элементов, что приведёт к необходимости дублирования CSS-кода, эту задачу можно решить, воспользовавшись CSS-переменными.
Настройка размеров Grid-элементов с использованием CSS-переменной
.wrapper < --item-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-gap: 1rem; >.wrapper-2
Благодаря такому подходу можно создать гибкий Grid-макет, подходящий для использования в различных проектах, который легко поддерживать. Ту же идею можно применить и для настройки свойства grid-gap .
.wrapper < --item-width: 300px; --gap: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); >.wrapper.gap-1
Использование переменной —gap для настройки свойства grid-gap
Хранение в переменных значений со сложной структурой
▍CSS-градиенты
Под «значениями со сложной структурой» я понимаю, например, нечто вроде градиентов. Если в проекте есть градиент или фон, используемые во многих местах этого проекта, то их описания имеет смысл хранить в CSS-переменных.
:root < --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8); >.element
В подобных ситуациях в переменных можно хранить и отдельные элементы «сложных» значений. Это, например, может быть угол градиента:
.element < --angle: 150deg; background-image: linear-gradient(var(--angle), #235ad1, #23d1a8); >.element.inverted
Разные варианты градиента, созданные путём изменения переменной —angle
▍Позиция фона
Как уже было сказано, CSS-переменные могут хранить значения со сложной структурой. Это может оказаться полезным в том случае, если имеется элемент, который, в зависимости от происходящего, может понадобиться размещать в разных местах страницы.
Управление позицией элемента с помощью переменной —pos
.table
Переключение между тёмной и светлой темами
Сейчас сайты, почти в обязательном порядке, оснащают тёмной и светлой темой. Для решения этой задачи можно воспользоваться CSS-переменными, храня в них сведения о цветах и переключаясь между ними после анализа системных параметров или настроек, выполненных пользователем.
Светлая и тёмная темы
:root < --text-color: #434343; --border-color: #d2d2d2; --main-bg-color: #fff; --action-bg-color: #f9f7f7; >/* Класс, добавленный к элементу */ .dark-mode
Вот видеодемонстрация вышеозвученной идеи.
Установка значений, применяемых по умолчанию
В некоторых ситуациях нужно задавать CSS-переменные с использованием JavaScript. Представим, что нам нужно установить значение свойства height элемента, размеры которого могут меняться. Я узнал о данном приёме из этой статьи.
Переменная —details-height-open изначально пуста. Её планируется использовать в описании стиля некоего элемента. Она должна содержать высоту элемента в пикселях. Если из JavaScript установить значение этой переменной по какой-то причине не удастся, важно предусмотреть применение вместо неё некоего резервного значения, используемого по умолчанию.
.section.is-active
В этом примере роль значения, используемого по умолчанию, играет auto . Оно будет применено в том случае, если из JavaScript не удастся задать значение переменной —details-height-open .
Регулирование ширины элемента-контейнера
Управление шириной элемента-контейнера
Элементы-контейнеры, используемые на веб-страницах, могут, в разных ситуациях, иметь разные размеры. Возможно, на одной странице может понадобиться небольшой контейнер, а на другой — контейнер побольше. В подобных случаях CSS-переменные могут с успехом использоваться для управления размерами контейнеров.
.wrapper < --size: 1140px; max-width: var(--size); >.wrapper--small
Встроенные стили
Использование CSS-переменных во встроенных стилях может открыть перед фронтенд-разработчиком массу новых возможностей, о которых он раньше и не подозревал. На самом деле, я написал об этом целую статью, но тут я, всё же, расскажу о самых интересных способах использования переменных во встроенных стилях.
Возможно, в продакшне этими методами лучше не пользоваться. Они очень хорошо подходят для прототипирования и для исследования различных дизайнерских идей.
▍Динамические Grid-элементы
Например, для настройки ширины элемента можно воспользоваться переменной —item-width , объявленной прямо в атрибуте элемента style . Такой подход может оказаться полезным при прототипировании Grid-макетов.
Вот HTML-код элемента:
Вот стиль, применяемый к этому элементу:
.wrapper
Здесь можно поэкспериментировать с примером к этому разделу.
▍Аватары пользователей
Аватары разных размеров
Ещё один интересный вариант использования CSS-переменных во встроенных стилях представлен созданием элементов разных размеров. Предположим, нам, в разных ситуациях, нужно выводить аватар пользователя различных размеров. При этом мы хотим управлять его размером с использованием единственной CSS-переменной.
.c-avatar
Проанализируем эти стили:
- У нас имеется конструкция var(—size, 1) . В ней предусмотрено значение, применяемое по умолчанию. Оно используется в том случае, если значение переменной —size не задано с использованием атрибута style стилизуемого элемента.
- Минимальный размер элемента устанавливается равным 30px*30px .
Медиазапросы
Совместное использование CSS-переменных и медиазапросов может принести немалую пользу в деле настройки значений переменных, используемых на всех страницах веб-сайтов. Самый простой пример использования этой техники, который приходит мне в голову, заключается в настройке расстояния между элементами:
:root < --gutter: 8px; >@media (min-width: 800px) < :root < --gutter: 16px; >> В результате свойства любого элемент, в котором используется переменная —gutter , будут зависеть от ширины области просмотра браузера. Как по мне, так это — просто замечательная возможность.
Наследование
CSS-переменные поддерживают наследование. Если в пределах родительского элемента объявлена CSS-переменная, то элементы-потомки наследуют эту переменную. Рассмотрим пример.
.parent < --size: 20px; >.child
Элемент .child наследует переменную —size , объявленную в стиле элемента .parent . У элемента .child есть доступ к этой переменной. Полагаю, это — очень интересно. Возможно, вы сейчас задаётесь вопросом о том, какая нам от этого польза. Полагаю, ответить на этот вопрос поможет следующий пример из жизни.
Наследование CSS-переменных
Тут имеется группа кнопок, к которым предъявляются следующие требования:
- Возможность изменения размера всех элементов путём установки значения единственной переменной.
- Расстояние между элементами должно динамически меняться в зависимости от их размера. При увеличении элементов расстояние между ними увеличивается, а при уменьшении — уменьшается.
.actions < --size: 50px; display: flex; gap: calc(var(--size) / 5); >.actions--m < --size: 70px; >.actions__item
Обратите внимание на то, как я использовал переменную —size при настройке свойства gap Flexbox-элементов. Это позволяет, основываясь на переменной —size , динамически менять расстояние между элементами
Ещё один пример использования механизма наследования CSS-переменных представлен настройкой CSS-анимаций. Этот пример я взял отсюда.
@keyframes breath < from < transform: scale(var(--scaleStart)); >to < transform: scale(var(--scaleEnd)); >> .walk < --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; >.run
При таком подходе нам не нужно дважды объявлять @keyframes . В стилях .walk и .run переопределяются значения унаследованных переменных.
Валидация CSS-переменных
Если оказывается, что с CSS-переменной, переданной функции var() , что-то не так, браузер заменит значение этой переменной на исходное (унаследованное) значение соответствующего свойства.
:root < --main-color: 16px; >.section-title
Здесь в переменную —main-color , используемую для настройки свойства color , записано значение 16px . А это — совершенно неправильно. Свойство color наследуется. Браузер в этой ситуации работает по следующему алгоритму:
- Является ли свойство наследуемым?
Схема работы браузера при обнаружении некорректного значения CSS-переменной
▍Концепция недопустимого значения, появляющегося во время вычислений
То, о чём шла речь выше, с технической точки зрения, называется «недопустимым значением, появляющимся во время вычислений» (Invalid At Computed-Value Time). Ситуация, в которой появляются такие значения, возникает, когда функции var() передаётся корректная CSS-переменная, значение которой не подходит для записи в настраиваемое с её помощью свойство.
Рассмотрим следующий пример, который я взял из этой статьи:
.section-title
Если браузер не поддерживает функцию clamp() — воспользуется ли он, в качестве резервного, значением, заданным в конструкции top: 10px ? Если кратко ответить на этот вопрос, то нет — не воспользуется. Причина этого заключается в том, что к тому моменту, когда браузер обнаружит некорректное значение, которое пытаются записать в свойство, он уже отбросит, в соответствии с порядком каскадного применения стилей, другие значения. То есть — он просто проигнорирует конструкцию top: 10px .
Вот что говорится об этом в спецификации CSS:
Концепция появления недопустимого значения во время вычислений существует из-за того, что ошибки, связанные с переменными, не проявляются, в отличие от других синтаксических ошибок, на ранних стадиях работы системы. Поэтому оказывается, что когда пользовательский агент обнаружит, что значение переменной некорректно, он уже отбросит, в соответствии с порядком каскадного применения стилей, другие значения.
В результате оказывается, что если нужно применять возможности CSS, не пользующиеся широкой поддержкой браузеров, при реализации которых используются CSS-переменные, нужно применять директиву @supports . Вот как это сделано в вышеупомянутой статье:
@supports (top: max(1em, 1px)) < #toc < top: max(0em, 11rem - var(--scrolltop) * 1px); >> Интересные находки
▍Хранение URL в переменных
Возможно, некоторые ресурсы, используемые на ваших веб-страницах, нужно загружать из внешних источников. В подобных ситуациях можно хранить URL этих ресурсов в CSS-переменных.
:root < --main-bg: url("https://example.com/cool-image.jpg"); >.section
Тут может возникнуть вопрос о том, можно ли обрабатывать конструкции вида var(—main-bg) с помощью CSS-функции url() . Рассмотрим следующий пример:
:root < --main-bg: "https://example.com/cool-image.jpg"; >.section
Так поступить не получится, так как функция url() воспринимает всю конструкцию var(—main-bg) в виде URL, а это неправильно. К тому моменту, когда браузер вычислит значение, оно уже будет некорректным, рассмотренная конструкция не будет работать так, как ожидается.
▍Хранение нескольких значений
В CSS-переменных можно хранить несколько значений. Если это — значения, выглядящие так, как они должны выглядеть в том месте, где планируется использовать переменную, то такая конструкция окажется работоспособной. Рассмотрим пример.
Значение переменной выглядит так, как ожидается
:root < --main-color: 35, 90, 209; >.section-title
Здесь имеется функция rgba() и RGB-значения, разделённые запятой и записанные в CSS-переменную. Эти значения используются при задании цвета. При таком подходе к использованию функции rgba() у разработчика появляется возможность воздействовать на значение, соответствующее альфа-каналу цвета, настраивая цвет различных элементов.
Единственный минус такого подхода заключается в том, что цвет, задаваемый функцией rgba() , нельзя будет настраивать, пользуясь инструментами разработчика браузера. Если при работе над вашим проектом эта возможность важна — вам, вероятно, не подойдёт вышеописанный способ использования функции rgba() .
Вот пример использования CSS-переменной для настройки свойства background :
:root < --bg: linear-gradient(#000, #000) center/50px; >.section < background: var(--bg); >.section--unique
Здесь показана стилизация двух разделов сайта. Фон одного из них не должен повторяться по осям x и y .
▍Изменение значений CSS-переменных в теле правила @keyframes
Если вы читали спецификацию, посвящённую CSS-переменным, то вы могли столкнуться там с термином «animation-tainted». С его помощью описывают тот факт, что значения CSS-переменных не поддаются плавному изменению в правиле @keyframes . Рассмотрим пример.
.box < width: 50px; height: 50px; background: #222; --offset: 0; transform: translateX(var(--offset)); animation: moveBox 1s infinite alternate; >@keyframes moveBox < 0% < --offset: 0; >50% < --offset: 50px; >100% < --offset: 100px; >> Анимация в этом случае не будет плавной. Переменная примет лишь три значения: 0 , 50px и 100px . В спецификации CSS говорится, что любое пользовательское свойство, использованное в правиле @keyframes , становится animation-tainted-свойством, что влияет на то, как оно обрабатывается посредством функции var() при анимировании элементов.
Если нам нужно обеспечить в предыдущем примере плавную анимацию, то делать это надо так, как делалось раньше. То есть — надо заменить переменную на те CSS-свойства элемента, которые нужно анимировать.
@keyframes moveBox < 0% < transform: translateX(0); >50% < transform: translateX(50px); >100% < transform: translateX(100px); >> Хочу отметить, что после публикации этой статьи мне сообщили о том, что анимировать CSS-переменные в @keyframes , всё же, можно. Но для этого переменные надо регистрировать с использованием правила @property . Пока эта возможность поддерживается лишь браузерами, основанными на Chromium.
@property --offset < syntax: ""; inherits: true; initial-value: 0px; > Здесь можно поэкспериментировать с примером применения этой возможности.
▍Вычисления
Возможно, вы не знаете о том, что CSS-переменные можно использовать в вычислениях. Взглянем на пример, который мы уже рассматривали, говоря об аватарах:
.c-avatar
Размеры аватара зависят от значения переменной —size . Значением, используемым по умолчанию, является 1 . Это значит, что стандартным размером аватара является 30px*30px . Обратите внимание на следующие стили и на то, что изменение этой переменной приводит к изменению размера аватара.
.c-avatar--small < --size: 2; >.c-avatar--medium < --size: 3; >.c-avatar--large
Инструменты разработчика различных браузеров и CSS-переменные
При использовании инструментов разработчика различных браузеров можно применять некоторые полезные приёмы, которые упрощают работу с CSS-переменными. Поговорим о них.
▍Просмотр цветов, задаваемых с помощью переменных
Я считаю полезной возможность видеть цвет, описываемый CSS-переменной. Эта возможность доступна в браузерах Chrome и Edge.
Просмотр цвета, задаваемого CSS-переменной
▍Вычисляемые значения
Для того чтобы взглянуть на вычисляемое значение CSS-переменной нужно, в зависимости от браузера, навести на переменную указатель мыши или щёлкнуть мышью по специальной кнопке.
Просмотр вычисляемых значений
Во всех браузерах кроме Safari вычисляемые значения можно увидеть, просто наведя указатель мыши на переменную. В Safari для этого нужно щёлкнуть по кнопке с парой полосок.
▍Автозавершение ввода
При работе над большими проектами сложно запомнить имена всех используемых в них CSS-переменных. Но благодаря возможностям по автозавершению ввода, доступных в браузерах Chrome, Firefox и Edge, это — не проблема.
Автозавершение ввода имени переменной
Для того чтобы этот механизм заработал — достаточно начать вводить имя переменной.
▍Отключение CSS-переменных
Если CSS-переменную нужно отключить от всех элементов, которые её используют, для этого достаточно снять флажок, находящийся напротив переменной в том элементе, где она объявлена.
Флажки для отключения CSS-переменных
Итоги
Я рассказал довольно много всего о CSS-переменных. Надеюсь, вам пригодится то, что вы сегодня узнали.
Пользуетесь ли вы CSS-переменными в своих проектах?
Изучите CSS-переменные за 5 минут
Пользовательские свойства CSS (CSS Custom Properties), также известные как переменные — большая победа для разработчиков интерфейсов. Они приносят силу переменных в CSS, что приводит к уменьшению дублирования, повышению читабельности и большей гибкости.
Кроме того, в отличие от переменных в препроцессорах CSS, нативные переменные CSS фактически являются частью DOM, что даёт много преимуществ. Поэтому они по существу похожи на переменные SASS и LESS на стероидах. В этой статье я проведу ускоренный курс о том, как работает эта новая технология.
Я также создал бесплатный интерактивный курс из 8 частей по CSS-переменным, поэтому ознакомьтесь с ним, если вы хотите стать экспертом по этой теме.
Зачем изучать переменные CSS?
Есть много причин использовать переменные в CSS. Одна из наиболее убедительных из них — уменьшение дублирования в вашей таблице стилей.
В приведённом выше примере гораздо лучше создать переменную для цвета #ffeead , чем дублировать значение, что мы и делаем:
Это не только упрощает чтение кода, но и даёт больше гибкости, если нужно изменить цвет.
Сейчас в течение многих лет подобное на самом деле уже возможно делать, используя SASS- и LESS-переменные. Тем не менее, есть несколько преимуществ в случае CSS-переменных:
- Они не требуют никаких инструментов для работы, поскольку они поддерживаются самим браузером. Таким образом, вам не нужна дополнительная настройка, как начать с ними работу, в отличие от SASS и LESS.
- Они находятся в DOM, что открывает массу возможностей, о которых я расскажу в этой статье и в своём предстоящем курсе.
Теперь давайте начнём изучение CSS-переменных!
Объявление первой переменной CSS
Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root , который соответствует корневому элементу в дереве документов (обычно это тег ).
Поскольку переменные наследуются, следующий ниже код делает вашу переменную доступной во всём вашем приложении, так как все ваши DOM-элементы являются потомками тега .
:root --main-color: #ff6f69;
>
Как вы можете видеть, вы объявляете переменную точно так же, как вы бы установили любое свойство CSS. Однако переменная должна начинаться с двух дефисов ( — ).
Для получения доступа к переменной, вам нужно использовать функцию var() и передать имя переменной в качестве первого параметра.
#title color: var(--main-color);
>
И это назначит вашему заголовку цвет #ff6f69 :
Функция var поддерживает второй параметр, фолбэк, то есть значение (или также CSS-переменная), которое будет использоваться, если переменная, переданная первым параметром, не определена, например:
#title color: var(--main-color, black);
>
Если переменная main-color недоступна, то будет использоваться черный цвет ( black ).
Объявление локальной переменной
Вы также можете создавать переменные с локальной областью видимости, который будут доступны только для того элемента, в котором они были объявлены, включая его дочерние элементы. Это имеет смысл делать, если вы знаете, что переменная будет использоваться только в определённой части (или частях) вашего приложения.
Например, у вас может быть окно с предупреждением, в котором используется определённый цвет, который не используется в других частях приложения. В этом случае скорее всего нецелесообразно определять этот цвет в глобальной области:
.alert --alert-color: #ff6f69;
>
Теперь эта переменная может использоваться в дочерних элементах:
.alert p color: var(--alert-color);
border: 1px solid var(--alert-color);
>
Если вы попытаетесь использовать переменную alert-color в другой части приложения, например, в навигационной панели, это не сработает: браузер просто проигнорирует такую строку CSS (за исключением, если не был предоставлен фолбэк вторым параметром).
Лёгкость реализации адаптивности с переменными
Большое преимущество CSS-переменных заключается в том, что они имеют доступ к DOM. Чего нельзя сказать о LESS или SASS, поскольку их переменные вставляются в обычный CSS.
На практике это означает, что вы можете, например, изменить переменные в зависимости от ширины экрана:
:root --main-font-size: 16px;
>
media all and (max-width: 600px) :root --main-font-size: 12px;
>
>
Всего четыре строки кода и вы изменили базовый размер шрифта при просмотре вашего приложения на маленьком экране. Довольно элегантно, не так ли?
Как получить доступ к переменным из JavaScript?
Доступ к CSS-переменным с помощью JavaScript — это ещё одно из преимуществ того, что CSS-переменные являются частью DOM. Вы можете обновлять их значения, что может пригодится, если вы хотите дать возможность вашим пользователям изменять внешний вид сайта (например, изменить размер шрифта).
Давайте продолжим на примере в начале этой статьи. Получение значение CSS-переменной через JavaScript занимает три строки кода:
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); // '#ffeead'
Для обновления переменной CSS, просто вызовите метод setProperty на элементе, в котором была объявлена переменная, и передайте имя переменной в качестве первого параметра и новое значение — вторым.
root.style.setProperty('--main-color', '#88d8b0');
Изменение основного цвета повлияет на весь внешний вид приложения, что идеально подходит для случаев, когда пользователи могут выбрать тему на вашем сайте.
Поддержка браузеров
В данный момент 77 процентов от глобального трафика сайтов поддерживают переменные CSS, причём почти 90 процентов в США. Мы уже используем CSS-переменные на Scrimba.com некоторое время, поскольку наша аудитория технически подкована и в основном использует современные браузеры.
Хорошо, на этом всё. Надеюсь, вы узнали что-то новое для себя.
Если вы хотите изучить его правильно, обязательно посмотрите мой бесплатный курс по CSS-переменным.