CSS переменные

Содержание материала:

Переменные в CSS

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств. Но теперь эта возможность появилась и в чистом CSS без всяких там препроцессоров. Вот о ней я и хочу рассказать в этой статье.

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные свойства).

Определение переменных CSS надо начинать с префикса —, например, —my-var. Их можно определять для любого элемента. Например:

Здесь в примере CSS для элемента div определены 2 переменныx: —text-col и —text-siz.

С помощью специального выражения var() вы можете ссылаться на эти переменные в любой части кода:

В итоге 1-ый блок получит высоту шрифта из —text-siz, 2-ой блок получит цвет шрифта из —text-col, а третий блок получит оба этих компонента.

Ну а если вам потребуется изменить цвет текста, то достаточно будет изменить значение переменной.

Подобные переменные вы можете определить для любого элемента. При этом они будут наследоваться дочерними элементами. Так, в примере, вложенный элемент параграфа получает стили от родительского div.

А, что если бы параграф находился бы вне блока div:

Тогда бы значения из переменных к нему бы не применились:

В случае, если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их надо определить для элемента :root.

Резервные значения переменных

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

2-ой параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и значение другой переменной:

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

В завершении хочу сказать, что переменные в CSS поддерживаются уже большинством браузеров. Подробнее можно посмотреть на сайте caniuse.com.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

ez code

Просто о сложном.

Переменные в CSS

По мере роста проекта его CSS файлы разрастаются и засоряются. Справиться с этим помогут CSS переменные, они дают возможность повторно использовать повторяющиеся CSS свойства.
Раньше переменные можно было использовать только в Less или Sass, но это препроцессоры и требуют компиляции перед использованием. Теперь переменные доступны в чистом CSS.

Объявление и использование переменных в CSS

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

Для доступа к значению переменной надо использовать конструкцию var(…). Обратите внимание, что имена зависят о регистра, то есть —foo != —FOO.

Поддержка

На данный момент Firefox поддерживает переменные в CSS. В Google Chrome начиная с версии 49 это возможность включена, если вы используете версию 48 или более старую, то вы можете вручную включить поддержку, перейдя на страницу chrome://flags/ и включить Enable experimental Web Platform features.

Пример 1 — Цветовые схемы

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

Теперь, если заказчик захотел поменять цвет на странице, мы можем изменить весь стиль поменяв одну строку (строку объявления переменной). Без переменных нам пришлось бы менять все места, где используется этот цвет.

Пример 2 — Понятные названия для сложных свойств

Еще одна замечательная возможность, которую дают CSS переменные — спрятать сложное свойство за коротким понятным именем. Хороший пример — CSS свойства с несколькими параметрами, например: box-shadow, transform и font.

Объявив переменную с понятным именем мы сможем использовать её не тратя время на разбор сложного свойства.

Пример 3 — Динамические переменные

Когда переменная объявлена несколько раз, к ней применяются стандартные CSS правила наследования. Следующий пример демонстрирует как можно динамически управлять свойствами в зависимости от действий пользователя, при этом сохранить краткий и чистый код.

Наведите на зеленый и на синий блоки.

Заключение

Как видите переменные довольно просты в использовании и их определенно стоит попробовать. Рассмотрим еще пару вещей, на которые стоит обратить внимание:

  • Функция var() имеет второй параметр, который будет использован в качестве значения, если переменная вызовет ошибку:
  • При объявлении собственного правила так же можно использовать переменные:
  • Переменные можно использовать с еще одним нововведением в CSS — функцией calc(). Однако работает это пока только в Firefox:

На этом все! Попробуйте использовать CSS переменные, но пока избегайте их в серьезных проектах.

Frontender Magazine

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

Хаос в CSS

Обычная практика при разработке приложения — составить набор фирменных цветов, которые будут использоваться, чтобы поддержать единый стиль. Увы, многократное использование этих цветов в CSS не только является рутинной работой, но ещё и создаёт пространство для возникновения ошибок. Если в какой-то момент один из цветов нужно будет поменять, разработчик может неосторожно воспользоваться поиском и заменой по всему документу, что в большом проекте может быть довольно опасно.

В последнее время многие разработчики стали использовать CSS-препроцессоры типа SASS или LESS, которые решают эту проблему с помощью переменных. Хотя эти инструменты заметно увеличили продуктивность разработки, препроцессорные переменные имеют очень серьёзный недостаток: они статичны и не могут меняться на лету. Появление возможности динамически менять переменные не только позволит на лету менять темы сайта или приложения, но также означает значительное расширение возможностей отзывчивого дизайна и возможность создания полифилов для будущих свойств CSS. С выходом Chrome 49 переменные стали доступны в виде кастомных CSS-свойств.

Кастомные свойства в двух словах

Кастомные свойства расширяют наш CSS-инструментарий двумя новыми возможностями:

  • Автор кода может присваивать произвольные значения свойствам с придуманными им самим именами.
  • Функция var() позволяет затем использовать эти значения в других свойствах.

Краткий пример для демонстрации:

—main-color — это определённое автором кастомное свойство со значением #06c . Заметьте, что все кастомные свойства начинаются с двух дефисов.

Функция var() возвращает значение кастомного свойства и заменяется им, в результате чего получается color: #06c; . Если кастомное свойство где-то определено в таблице стилей, оно будет доступно функции var .

На первый взгляд синтаксис может показаться странным. Многие разработчики недоумевают: «Почему бы просто не использовать $foo в качестве имён переменных?» Это было сделано специально для повышения гибкости и возможности в перспективе создавать макросы для $foo . Более подробно об этом можно прочесть в статье одного из авторов спецификации, Таба Аткинса (Tab Atkins).

Синтаксис кастомных свойств

Синтаксис кастомных свойств довольно прост:

Обратите внимание, что кастомные свойства регистрозависимы, то есть —header-color и —Header-Color — это два разных свойства. Хотя синтаксис поначалу может показаться незамысловатым, на самом деле он позволяет сделать довольно много. К примеру, ниже — пример валидного кастомного свойства:

Хотя это выражение не будет работать в качестве переменной (а также не будет валидным значением любого обычного свойства), потенциально оно может быть прочитано и обработано на лету с помощью JavaScript. Это означает, что кастомные свойства могут открыть доступ ко всевозможным интересным техникам, недоступным с нынешними CSS-препроцессорами. Так что если вы, позёвывая, думаете что-то вроде «Какая разница, у меня есть SASS…», подумайте ещё раз! Это не те переменные, с которыми вы привыкли работать.

Каскад

Кастомные свойства следуют стандартным правилам каскада, так что вы можете определить одно и то же свойство на разных уровнях специфичности:

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

Необходимо отметить, что вышеприведённый приём невозможно повторить используя CSS-препроцессоры, потому что они неспособны переопределять переменные внутри медиавыражений. У этой возможности огромный потенциал!

Топ-пост этого месяца:  Топ плагинов jQuery. Адаптивное меню - плагин okayNav

Также есть возможность использовать кастомные свойства, получающие своё значение из других кастомных свойств. Это может быть крайне полезно для настройки тем:

Функция var()

Чтобы получить и использовать значение кастомного свойства, понадобится функция var() . Вот её синтаксис:

Здесь — имя определённого автором кастомного свойства, — фолбек, который будет использован, если упомянутое кастомное свойство не является валидным. Фолбек может быть списком, разделённым запятыми, он будет преобразован к единому значению. Например, var(—font-stack, «Roboto», «Helvetica»); определяет фолбек «Roboto», «Helvetica» . Обратите внимание, что краткая запись некоторых свойств (как в случае внешних и внутренних отступов) разделяется не запятыми, а пробелами, так что валидный фолбек для внутренних отступов будет выглядеть примерно так:

С такими фолбеками автор компоненты может написать для своего элемента пуленепробиваемые стили:

Этот метод особенно пригодится для стилизации веб-компонент, использующих Shadow DOM, поскольку кастомные свойства могут пересекать теневые границы. Автор веб-компоненты может создать начальный дизайн при помощи фолбеков, а потом настроить стили при помощи кастомных свойств:

При использовании var() нужно иметь в виду несколько нюансов. Например, переменные не могут быть именами свойств:

Это не является эквивалентом присваивания margin-top: 20px; . Более того, второе объявление не является валидным, и выбросит ошибку.

Аналогично, невозможно создать значение, часть которого берётся из переменной:

Это тоже не является эквивалентом margin-top: 20px; . Чтобы собрать значение, понадобится кое-что другое: функция calc() .

Создание значений с помощью calc()

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

Работа с кастомными свойствами в JavaScript

Чтобы получить значение кастомного свойства, используйте метод getPropertyValue() объекта CSSStyleDeclaration.

Аналогично, чтобы динамически менять значение кастомного свойства, используйте метод setProperty() объекта CSSStyleDeclaration .

Также при задании значения кастомного свойства на лету можно использовать ссылку на другое кастомное свойство, вставив функцию var() в вызов setProperty() .

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

Поддержка браузерами

На данный момент кастомные свойства поддерживаются в Chrome 49, Firefox 42, Safari 9.1, и iOS Safari 9.3.

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

Материалы для дальнейшего изучения

Если вы хотите узнать больше про кастомные свойства, Филип Уолтон (Philip Walton) из команды Google Analytics написал учебник для начинающих про то, почему он в восторге от кастомных свойств, а также за их появлением в других браузерах можно следить на chromestatus.com.

Если не указано обратного, всё содержимое этой страницы находится под лицензией Creative Commons Attribution 3.0 License, а фрагменты кода находятся под лицензией Apache 2.0 License. Подробнее см. Terms of Service.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Как правильно называть переменные в CSS?

Переменные в css (в препроцессорах в том числе) — это здорово, но как же всё-таки правильно их именовать? Предположим, нужно задать цвет фона страницы (будем использовать scss):

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

Теперь всё не так радужно: переменная осталась $white, но цвет-то ведь уже другой, и менять эту несчастную переменную по всем файлам, где она объявлена, как-то нерационально.
Значит, приходим к выводу о том, что необходимо называть переменные цветов как-то более универсально. $white становится $color-light. Но тут вдруг требуется этот светлый оттенок поменять на диаметрально противоположный — тёмный. Опять замкнутый круг. Ваши мысли по этому поводу.

  • Вопрос задан более года назад
  • 343 просмотра

2 блока переменных.
В первом сами цвета.

возможно и с названием цветов, например, зеленый и светло-зеленый: green и light-green (такое бывает, когда цветов в макете много)

Во втором блоке уже цвета по назначению

Может, вопрос соберёт больше интересных ответов, но сам пока пришёл к двум вариантам:
1. Не задавать переменные (в данном случае цвета) напрямую желаемому объекту, а делать такую цепочку:

В таком случае все настройки хранятся в одном месте и этот подход больше соответствует принципу модульности: если нужно поменять белый цвет только в конкретной части сайта, то сделать это очень просто.

Переменные CSS

Переменные CSS

Если вы использовали препроцессорные языки, то уже сталкивались с понятием переменная. Долгое время нативному CSS очень не хватало такой возможности, и любое свойство нужно было каждый раз писать в коде. Это делало CSS довольно громоздким, и даже группировка стилей не спасала. То ли дело в каком-нибудь LESS достаточно было один раз объявить переменную и использовать ее далее везде. Такой метод значительно проще, однако не будем забывать, что недостатком препроцессорных языков всегда была невозможность работы по умолчанию, необходимость компиляции. То есть как мы видим недостатки были и в том, и в другом случае.

Чтобы решить эту проблему и были придуманы переменные для стилей. Эта фишка появилась еще в 2012 году (именно тогда вышел первый рабочий черновик W3C), но тогда поддержка браузерами практически отсутствовала, что по сути делало ее бесполезной. Сейчас, по прошествии времени ситуация с кроссбраузерностью значительно улучшилась.Согласно сервису CanIUse, переменные (CSS vairiables или, как их еще называют custom properties — пользовательские свойства ) поддерживаются основными браузерами: Edge, Firefox, Chrome, поэтому их вполне можно использовать в реальных проектах. Давайте же рассмотрим поподробнее, что они из себя представляют и как их можно применить в стилях.

Что такое переменные CSS?

Само понятие переменной пришло к нам из языков программирования, и обозначает оно некоторые «ячейки», в которых хранятся определенные значения. В случае с CSS это будут значения каких-либо свойств, которые мы указали: цвета, фона, размера шрифта и размеров разных элементов. Поскольку «ячейка» постоянно хранит то, что для нее задали пока не будет переопределена, ее можно потом применять на протяжении всего файла CSS. Собственно, в этом и заключены основная цель и преимущество нативных переменных стилей. И благодаря этому мы можем добиться сокращения количества написанного кода.

Как использовать переменные?

Итак, мы разобрались, что из себя представляют CSS variables, осталось понять каким образом мы можем их вызывать и использовать в нашей таблице стилей, узнать какой же синтаксис надо использовать.

Оказывается, всё довольно просто. Переменные нужно объявлять внутри селекторов, при этом они выглядят практически как обычные свойства, за исключением двух дефисов перед именем. Именно так мы указываем, что речь идет о переменной, значение которой нужно запомнить. В примере ниже наша переменная bg принимает значение lightblue .

Если же мы хотим присвоить переменную какому-либо свойству, нужно просто вызвать ее внутри функции var() там, где нужно указать значение свойства (мы присвоили значение —bgd цвету фона в селекторе div , теперь фон всех дивов будет светло-голубой, а абзацу мы присвоили цвет фона —bgp и элементы p будут светло-зеленого цвета).

Начинаем работать с переменными CSS — часть 1

Краткое руководство для понимания что такое переменные в CSS и как они делают CSS более мощным и реактивным.

CSS-переменные, которые также называют пользовательскими свойствами (CSS Custom Properties) становятся довольно популярными на данный момент, благодаря своим широким возможностям и реактивному характеру. После прочтения этой заметки у вас появится понимание того, как их можно использовать в повседневной работе.

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.

Что такое переменные (или CSS переменные)?

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

Общий синтаксис для переменных CSS показан ниже:

Объявление переменной начинается с символов — — префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var . Например, переменная с именем “color” и значением “blue” может быть объявлена как —color: blue и может быть доступна как var(—color) .

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

Мы объявили 2 переменные с именами —color-dark и —color-bright . Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark . CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

  • Масштабируемый и читаемый код
    При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
  • Реактивные элементы
    Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
  • Ускорение рабочего процесса
    CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
  • Продвинутые математические расчеты
    Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc() . Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).
Топ-пост этого месяца:  Moguta.CMS — бесплатный и быстрый способ создания интернет-магазина (полностью ориентирован на

Общий синтаксис функции calc() : calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

Переменные CSS могут использоваться только в современных браузерах и если вы ведете разработку с учетом устаревших браузеров, вам следует отказаться от использования CSS-переменных.

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

Надеюсь, что теперь у вас есть общее понимание того, как работают CSS-переменные (пользовательские свойства) и это сделает ваш рабочий процесс масштабируемым и более продуктивным.

Как использовать переменные CSS для анимации

Когда мы упоминаем CSS в дискуссиях, мы часто говорим о нем как о неполноценном языке. Декларативный язык, лишенный логики и понимания; Но это не совсем настоящая реальность. В течение многих лет разработчики жаждали получить возможность использовать переменные в стандартном CSS, которые так долго были доступными с препроцессорами, такими как LESS и Sass. Мало того, что переменные CSS являются реальным и осязаемым для разработчиков, они также могут использоваться в сценариях анимации. Все еще настроены скептически? Следуйте дальше, чтобы узнать больше!

Основы переменных

Переменные CSS — это хранимые значения, предназначенные для повторного использования в таблице стилей. Они доступны с использованием пользовательской функции var() и задаются с использованием пользовательской нотации свойств.

Переменные, определенные в :root , являются глобальными, тогда как переменные, определенные в селекторе, являются специфическими для этого селектора.

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

Функция var() также может принимать значения возврата.

Это может быть полезно в ситуациях, когда переменная еще не определена или при работе с настраиваемыми элементами и Shadow DOM.

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

Переменные для анимации

Существует множество вариантов объединения переменных CSS с анимацией. Подумайте о таких контекстах, как аудиовизуализация, сценарии, управляемые событиями JavaScript, и даже события, связанные с CSS, такие как hover , focus и target . Теоретически, Apple Watch может быть подключен к API, используя анимацию биения с переменными параметрами CSS. Тогда у нас есть акселерометры, API-интерфейсы наклона устройства и даже API-интерфейсы геймпада, но почему мы должны рассматривать анимацию с помощью CSS-переменных вообще? Вот несколько причин:

  • Легко отлаживается.
  • Никаких чрезмерных манипуляций с DOM.
  • Независимый от узлов DOM.
  • Тематизация
  • Работает с SVG.

Операции в CSS действительно являются ключевой частью всей головоломки с анимацией. Функции CSS, такие как calc , могут принимать значение во время выполнения и выполнять такие операторы, как умножение, деление, сложение, вычитание, изменение значений. Это позволяет делать переменные CSS динамическими.

Переменные CSS в JavaScript

Теперь, когда мы знаем, как выглядят переменные CSS и что они могут делать, пришло время понять, как JavaScript подходит ко всему этому.

Методы, показанные выше, используются для установки, получения и удаления значений свойств. Они могут использоваться для наших типичных свойств CSS ( background-color , font-size и т.д.), Но они также могут использоваться и для переменных CSS. Эти параметры будут устанавливать новое значение для глобально определенного свойства, иначе известного как :root в CSS.

Они также являются настоящим открытием для анимации с помощью переменных CSS, потому что наши методы JS могут получать, устанавливать или удалять переменную во время выполнения динамически!

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

Демонстрация

Есть множество удивительных и чрезвычайно талантливых разработчиков, которые используют и экспериментируют с этими концепциями реактивной и тематической анимации, используя переменные CSS. Вот только несколько примеров, чтобы нырнуть в и узнать, что происходит под капотом.

Закат/восход

Этот пример показывает мощь анимации переменных CSS, используемых для создания темы. Как правило, понадобилось бы в два раза больше кода для выполнения этой демонстрации без использования переменных CSS и во много раз больше, если вы хотите использовать более двух тем.

Анимация переменными CSS

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

Каждый раз, когда вы перемещаете мышь, JavaScript обновляет объявленные переменные, позволяя кругу перемещать позицию относительно вашего курсора.

Алекс CSS Husky

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

Заметьте, что происходит, когда вы двигаете мышью? Довольно круто, да?

Анимация с помощью CSS-переменных

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

Двигайте ползунки в свободное время. Обратите внимание на прохладу, которая наступает? Просто, но просто волшебно, а это просто обновляются переменные для позиции преобразования при каждом изменении ползунков. Suuuuhhhweeet!

Single Div Accordion (анимированные с CSS-переменными)

Как насчет чего-то другого для музыкантов? Посмотрите на этот хип-аккордеон Дэна Уилсона.

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

Переменные CSS + Transform = Индивидуальные свойства (с входами)

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

Побочные эффекты CSS-переменных

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

Huh, кажется, изменение переменных CSS на элементе вызывает пересчет стиля для _all_ его дочерних элементов. Упс. pic.twitter.com/jvpDT5UB2h

Вот демо-версия Shaw, опубликованная в группе Animation at Work Slack, которая использовалась для тестирования: CSS-переменные Recalc Style Performance Test

Во время тестов (Chrome 58. Mac 10.12) было обнаружено, что когда кнопка Set CSS Var срабатывает до тех пор, пока браузер не закрасит фон, будет затрачено 52.84 мс времени на recalc и 51.8ms рендеринга. Переключение настроек в тесте CSS Property показывает совсем другой результат. С момента нажатия кнопки «Установить CSS-свойство» до тех пор, пока фон не будет окрашен, проходит примерно 0,43 мс recalc и 0,9 мс рендеринга.

Если вы переключаете background на color вы получите эквивалентные измерения, так как currentColor может или не может существовать у наследников (Дэвиду Харшиду). Любое свойство, которое наследуется, всегда будет вызывать recalc стиля для всех и всех дочерних элементов. Свойство background-color не наследуется, следовательно, существует огромная разница с CSS-переменными, которые всегда наследуются. Обычно свойства CSS, которые по умолчанию inherit в большинстве случаев вызывают большой recalc стилей. По-прежнему важно отметить, что простоянное изменение переменных CSS может быть дырой в производительности. Хорошей практикой избежать этого является оживить переменные CSS на самом определенном уровне (или самом глубоком уровне), чтобы предотвратить изменение множества дочерних элементов. Подробнее о сокращении объема и сложности вычислений стилей вы можете узнать на странице основных принципов Google.

Вывод

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

Особая благодарность банде в канале Animations At Work Slack за продолжающееся тестирование, отзывы и обсуждения (Дэвид Хоршид, Джони Корпи, Дэн Уилсон и Шоу).

Введение в CSS переменных

  • CSS — CSS3
  • HTML — HTML5
  • Flexbox CSS — уроки
  • JavaScript
  • Плагины и расширения
  • Шпаргалки по Битрикс
  • Продвижение сайтов
  • Web-ДИЗАЙНЕРУ
  • ЗАРАБОТОК в интернете
  • Виды интернет-сайтов
  • Разное

Дата публикации: 14.06.2015

Единственным качеством, которым должен обладать язык, чтобы претендовать на статус языка программирования, это переменные. Они считаются невероятно полезными, экономят разработчикам кучу часов и сил. Кроме того, переменные способны всестороннее улучшить процесс написания кода.

Это именно то, чего в CSS не хватало. Такие динозавры, как Sass и Less использовали переменные, но в стандартной CSS никогда не было переменных. До сегодняшнего дня.

Они долго маячили на горизонте, но лишь недавно переменные начали внедряться в CSS. Итак, как же они работают?

Поддержка браузеров

В настоящее время переменные CSS поддерживаются только Firefox Nightly. И в действительности мы не можем их использовать. Тем не менее, не смотря на то, что они ещё очень и очень сырые (в состоянии бета-тестивания) мы все с нетерпением ожидаем, что они появятся в нашей жизни в ближайшее время.

Для браузеров на движке Webkit уже есть путь для получения переменных. Кроме того, ещё они доступны для некоторых версий Chrome, которые активируются через flag в chrome://flags и с помощью префикса -webkit- .

Что касается IE, к сожалению, мы должны подождать. Посмотрим, что же готовит нам релиз грядущий.

Как использовать переменные CSS

Мы все прекрасно знаем, как работают переменные, поэтому только синтаксис претерпел некоторые изменения. Вот как мы будем объявим переменные в CSS:

Топ-пост этого месяца:  TypeScript tuple как применяется тип данных кортежи для хранения набора значений

Глобальные переменные

Как и в других языках программирования, можно также установить переменные в качестве глобальных. Например, так:

Я использую root псевдо элемент из-за того, что интерфейс верхнего уровня в DOM будет тот, который держит эти переменные. А они, в свою очередь, будут работать вниз по дереву тегов DOM для всех наших элементов.

Когда дело доходит до применения переменных, мы используем функцию var() для вызова переменной. Это можно сделать так:

После того, как мы объявили переменную в корне документа, теперь мы вправе использовать её в любом месте.

Контекстные переменные

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

В данном конкретном примере якорные теги унаследует новые значения, которые мы поставили в их родительском элементе. Тем не менее, ничего за пределами этого div не будет использовать значения, заданные в корневом элементе.

Вывод

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

CSS-переменные

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

Использование пользовательских свойств CSS (CSS Custom Properties) приводит к уменьшению дублирования, повышению читабельности и большей гибкости. Пользовательские свойства часто еще называют CSS-переменные. Они не требуют никаких инструментов для работы, поскольку поддерживаются самим браузером.

Объявление переменной CSS

Чтобы объявить переменную, сначала нужно решить, в какой области должна быть эта переменная. Если нужно, чтобы она была доступна глобально, надо определить её в псевдоклассе :root , который соответствует корневому элементу в дереве документов. Переменная должна начинаться с двух дефисов:

Для получения доступа к переменной, нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

Функция var() поддерживает второй параметр, который будет использоваться, если переменная, переданная первым параметром, не определена, например:

Если переменная main-color недоступна, то будет использован черный цвет ( #000000 ).

Объявление локальной переменной

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

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

Теперь эту переменную можно использовать в дочерних элементах:

Реализации адаптивности с использованием переменных

Большое преимущество CSS-переменных заключается в том, что они имеют доступ к DOM. Чего нельзя сказать о LESS или SASS, поскольку их переменные вставляются в обычный CSS. На практике это означает, что можно, например, изменить переменные в зависимости от ширины экрана:

Доступ к переменным из JavaScript

Доступ к CSS-переменным с помощью JavaScript — это ещё одно преимущество того, что CSS-переменные являются частью DOM.

Frontender Magazine

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

Хаос в CSS

Обычная практика при разработке приложения — составить набор фирменных цветов, которые будут использоваться, чтобы поддержать единый стиль. Увы, многократное использование этих цветов в CSS не только является рутинной работой, но ещё и создаёт пространство для возникновения ошибок. Если в какой-то момент один из цветов нужно будет поменять, разработчик может неосторожно воспользоваться поиском и заменой по всему документу, что в большом проекте может быть довольно опасно.

В последнее время многие разработчики стали использовать CSS-препроцессоры типа SASS или LESS, которые решают эту проблему с помощью переменных. Хотя эти инструменты заметно увеличили продуктивность разработки, препроцессорные переменные имеют очень серьёзный недостаток: они статичны и не могут меняться на лету. Появление возможности динамически менять переменные не только позволит на лету менять темы сайта или приложения, но также означает значительное расширение возможностей отзывчивого дизайна и возможность создания полифилов для будущих свойств CSS. С выходом Chrome 49 переменные стали доступны в виде кастомных CSS-свойств.

Кастомные свойства в двух словах

Кастомные свойства расширяют наш CSS-инструментарий двумя новыми возможностями:

  • Автор кода может присваивать произвольные значения свойствам с придуманными им самим именами.
  • Функция var() позволяет затем использовать эти значения в других свойствах.

Краткий пример для демонстрации:

—main-color — это определённое автором кастомное свойство со значением #06c . Заметьте, что все кастомные свойства начинаются с двух дефисов.

Функция var() возвращает значение кастомного свойства и заменяется им, в результате чего получается color: #06c; . Если кастомное свойство где-то определено в таблице стилей, оно будет доступно функции var .

На первый взгляд синтаксис может показаться странным. Многие разработчики недоумевают: «Почему бы просто не использовать $foo в качестве имён переменных?» Это было сделано специально для повышения гибкости и возможности в перспективе создавать макросы для $foo . Более подробно об этом можно прочесть в статье одного из авторов спецификации, Таба Аткинса (Tab Atkins).

Синтаксис кастомных свойств

Синтаксис кастомных свойств довольно прост:

Обратите внимание, что кастомные свойства регистрозависимы, то есть —header-color и —Header-Color — это два разных свойства. Хотя синтаксис поначалу может показаться незамысловатым, на самом деле он позволяет сделать довольно много. К примеру, ниже — пример валидного кастомного свойства:

Хотя это выражение не будет работать в качестве переменной (а также не будет валидным значением любого обычного свойства), потенциально оно может быть прочитано и обработано на лету с помощью JavaScript. Это означает, что кастомные свойства могут открыть доступ ко всевозможным интересным техникам, недоступным с нынешними CSS-препроцессорами. Так что если вы, позёвывая, думаете что-то вроде «Какая разница, у меня есть SASS…», подумайте ещё раз! Это не те переменные, с которыми вы привыкли работать.

Каскад

Кастомные свойства следуют стандартным правилам каскада, так что вы можете определить одно и то же свойство на разных уровнях специфичности:

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

Необходимо отметить, что вышеприведённый приём невозможно повторить используя CSS-препроцессоры, потому что они неспособны переопределять переменные внутри медиавыражений. У этой возможности огромный потенциал!

Также есть возможность использовать кастомные свойства, получающие своё значение из других кастомных свойств. Это может быть крайне полезно для настройки тем:

Функция var()

Чтобы получить и использовать значение кастомного свойства, понадобится функция var() . Вот её синтаксис:

Здесь — имя определённого автором кастомного свойства, — фолбек, который будет использован, если упомянутое кастомное свойство не является валидным. Фолбек может быть списком, разделённым запятыми, он будет преобразован к единому значению. Например, var(—font-stack, «Roboto», «Helvetica»); определяет фолбек «Roboto», «Helvetica» . Обратите внимание, что краткая запись некоторых свойств (как в случае внешних и внутренних отступов) разделяется не запятыми, а пробелами, так что валидный фолбек для внутренних отступов будет выглядеть примерно так:

С такими фолбеками автор компоненты может написать для своего элемента пуленепробиваемые стили:

Этот метод особенно пригодится для стилизации веб-компонент, использующих Shadow DOM, поскольку кастомные свойства могут пересекать теневые границы. Автор веб-компоненты может создать начальный дизайн при помощи фолбеков, а потом настроить стили при помощи кастомных свойств:

При использовании var() нужно иметь в виду несколько нюансов. Например, переменные не могут быть именами свойств:

Это не является эквивалентом присваивания margin-top: 20px; . Более того, второе объявление не является валидным, и выбросит ошибку.

Аналогично, невозможно создать значение, часть которого берётся из переменной:

Это тоже не является эквивалентом margin-top: 20px; . Чтобы собрать значение, понадобится кое-что другое: функция calc() .

Создание значений с помощью calc()

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

Работа с кастомными свойствами в JavaScript

Чтобы получить значение кастомного свойства, используйте метод getPropertyValue() объекта CSSStyleDeclaration.

Аналогично, чтобы динамически менять значение кастомного свойства, используйте метод setProperty() объекта CSSStyleDeclaration .

Также при задании значения кастомного свойства на лету можно использовать ссылку на другое кастомное свойство, вставив функцию var() в вызов setProperty() .

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

Поддержка браузерами

На данный момент кастомные свойства поддерживаются в Chrome 49, Firefox 42, Safari 9.1, и iOS Safari 9.3.

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

Материалы для дальнейшего изучения

Если вы хотите узнать больше про кастомные свойства, Филип Уолтон (Philip Walton) из команды Google Analytics написал учебник для начинающих про то, почему он в восторге от кастомных свойств, а также за их появлением в других браузерах можно следить на chromestatus.com.

Если не указано обратного, всё содержимое этой страницы находится под лицензией Creative Commons Attribution 3.0 License, а фрагменты кода находятся под лицензией Apache 2.0 License. Подробнее см. Terms of Service.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Добавить комментарий