CSS root var почему можно отказаться от использования переменных


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

CSS переменные — практические советы по работе

Содержание

Вступление

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

Типы CSS-аргументов

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

Первичные пользовательские свойства

Это свойство, которое вы можете изменять в разных селекторах, в медиа-запросах или с помощью псевдо-селекторов :hover или :focus или, например, с помощью JavaScript. Обычно она содержит одно значение:

Вторичные пользовательские свойства

Это аргументы, которые вычисляются из других. Например, в коде ниже размер ячейки сетки(grid) —rowHeight — вычисляется из нескольких первичных. Результат вычисления применяется к свойству, но никогда не обновляется вручную — только пересчитывается в результате изменения первичных CSS переменных.

Может быть полезно добавлять префикс вторичным аргументам, как в этом примере, чтобы вы и другие люди, работающие с вашим кодом, знали, что их нельзя менять вручную:

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

Область видимости

Во моих примерах я объявляю CSS переменные в :root , который представляет собой элемент :

Однако, в этом нет строгой необходимости, и более того, это не очень хорошая практика.

Большинство причин, по которым не рекомендуется задавать CSS переменные в глобальной области видимости в Javascript также применимы к CSS. Если бы вы при этом захотели использовать пользовательское свойство для фона-цвета -bgColor в разных компонентах, то столкнулись бы со всеми проблемами, связанными с областью видимости. Лучше всего объявлять их в селекторе, например, если вы работаете в компонентах:

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

Установка величин по умолчанию

С помощью CSS переменных вы можете установить величину(или несколько величин) по умолчанию. Это означает, что в некоторых ситуациях вам нужно только объявить свои переменные в той точке, в которой они должны измениться. В коде ниже CSS переменная -bgColor для поля объявляется только при достижении ширины в 40em — до этого она принимает значение по умолчанию(red):

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

Использование пользовательских свойств с препроцессорными

Один из недостатков CSS-аргументов — они не работают в медиа-запросах или псевдоклассах, например :nth-child(var(-n)) не будет работать. Поэтому, скорее всего, вы все равно захотите использовать препроцессорные аргументы.

Я бы предостерег от смешивания этих двух типов пользовательских свойств, если вы не полностью понимаете их отличия. Аргументы Sass скомпилируются до того, как ваш код попадает в браузер, тогда как в CSS они не получат вычисленное значение, пока не попадут в браузер. Это означает, что в приведенном ниже коде величина ширины для .box1 будет работать, но .box2 выдает ошибку, потому что величина для -halfWidth передается браузеру в виде строки:

Однако вы можете использовать calc() , как в предыдущих примерах. Смотрите результат в ниже:

Если вы проинспектируете элемент в консоли Chrome и перейдете на вкладку «Вычисляемые стили»(Computed Styles), вы увидите, что значение ширины для .box2 не вычисляется. В нашей компании мы используем много функций Sass, например, для вычисления rem из пикселей при определении размера. Я обнаружил, что это оказалось проблемой, когда я попытался передать функцию Sass в аргумент CSS, например, —width: rem (600px) . Есть плагин PostCSS, который может преобразовывать пиксели в rem чтобы достичь желаемого результата, но мне нужно будет немного поэкспериментировать с ними, прежде чем я буду уверенно рекомендовать их использовать с CSS переменными.

Тем не менее, существуют сценарии, в которых использование препроцессорных и CSS переменных в одном блоке кода вместе имеет смысл, например, в медиа-запросах, как упоминалось ранее.

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

Css переменные : описание и примеры использования.

Здравствуйте друзья, на связи Шевченко Вячеслав, и сегодня у меня не большой, но интересный пост. Вы когда нибудь сталкивались с проблемой разрастания проекта, и организацией css кода? Думаю ответ однозначно ДА, если НЕТ, то у вас все впереди.

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

Знающие и бывалые верстальщики, могут возразить и сказать «Переменные уже давно в SASS и LESS!!». Да, я не спорю, но это препроцессоры и они нуждаются в компиляции перед использованием, а нативные переменные CSS работают прямо в браузере! Разве это не круто?

Видео урок

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

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

Как переменная ROOT может действовать в файле Router ,если она определенна в файле index.php

Реализовал проект по правилам MVC паттерна,по этому видеоуроку
https://www.youtube.com/watch?v=ba3M. pG2zRXbkgkO3zQ

В файле index.php на 20 строке есть определение константы—в которой храниться путь к коренной папке проекта

Есть файл Router.php в котором переменная ROOT используется

И вот что не понимаю как переменная ROOT может действовать в файле Router если она определенна в файле index.php

Архив проекта прикрепляю

Вложения

mvc.rar (2.9 Кб, 2 просмотров)
31.05.2020, 21:12

Дана форма в файле php.index, в нем есть функция, как сделать так чтобы она срабатывала на форме?
вопрос я думаю понятен без особых пояснений. Добавлено через 1 минуту имеется в виду файл.

Не могу настроить часовой пояс в файле index.php
Этот index.php лежит в корне сайта и содержит в себе различные функции и т.п. Я не могу настроить.

31.05.2020, 21:16 2 01.06.2020, 21:41 [ТС] 3

Я вот к примеру определил например в одном файле

потом подключил второй файл с помощью include
и попробовал там вывести константу

Однако не сработало.

Файлы и видео прикрепляю

Вложения

ВАР_видео.rar (870.9 Кб, 1 просмотров)
вар.rar (319 байт, 1 просмотров)
01.06.2020, 21:47 4

01.06.2020, 21:47
01.06.2020, 21:50 5
01.06.2020, 21:50 [ТС] 6
01.06.2020, 22:05 7

P.S. И это константа, а не переменная – т.е. область видимости еще больше, хотя и переменные видны в др. файлах, но только не внутри функций и т.п.

Добавлено через 2 минуты

В каком примере? Нормально код выложите. Там нечего особо в аттаче выкладывать.

Добавлено через 6 минут

Такое ощущение, что некоторым доступ к документации разрешен только по талонам.

01.06.2020, 22:45 8
02.06.2020, 10:07 [ТС] 9

myvar не выводится в i3.php. Почему?

Добавлено через 53 секунды
Jewbacabra, благодарю,однако по картинке мне ничего не понятно.Лучше словами обьяснить.

02.06.2020, 10:53 10

TVPNERO, тут порядок важен, это вам не ф-ции.

Добавлено через 37 минуты
. Сначала define, а потом подключаем файл, где должно быть доступно определение. Логично, не правда ли? А то, что вы предлагаете, нелогично, хотя кое-где работает, но не в пыхе.

Кстати, если не ошибаюсь, постфактум ф-ции можно определять только в пределах тек. файла, иначе тоже порядок важен.

03.06.2020, 12:36 [ТС] 11

Благодарю,однако все равно не сработало даже если сначала написать Дефайн ,а потом подключить.
Тогда не понимаю почему в видеоуроке у него все получилось хотя там тож сначала дефайн, а потом подключение.

03.06.2020, 12:50 12
03.06.2020, 14:26 [ТС] 13

Сделал с полными дескрипторами однако все так же. Не помогло.

03.06.2020, 14:31 14
03.06.2020, 14:44 [ТС] 15

Jewbacabra, на картинке мне не все понятно.

Наверное у вас установлен Линукс.

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

буду искать в чем проблема.

03.06.2020, 14:50 16
03.06.2020, 14:57 17
03.06.2020, 15:52 18

Может быть проблема просто в том, что вы вызываете константу в том файле, в котором она просто не известна?
В i2.php вы подключили i3.php и задали константу. Но вот только i3.php ничего не известно о файле i2.php и соответственно никакого вызова случиться не может.

Объявите константу в i3.php и попробуйте вызвать ее в i2.php и проблема будет решена

03.06.2020, 16:31 19
03.06.2020, 17:17 20
03.06.2020, 17:17
03.06.2020, 17:17

Как перезаписать значения переменых в php файле если их очень много?
Добрый день! Прошу совета у форумчан, потому что сама не смогла разобраться с такой задачей: .

Блок Given-Find переменная не определенна
Задана система из 6 уравнений с 6-ю неизвестными. При попытке расчета функция Find выдает ошибку.

CSS root var: почему можно отказаться от использования переменных

Весь этот шум вокруг CSS-гридов в последнее время заставил меня задуматься: какие ещё потрясающие CSS-фичи доступны нам сегодня?

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

Еще раз вкратце о CSS-переменных

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

Я впервые увлёкся CSS-переменными ещё в 2014, и с тех пор они не выходят у меня из головы. И только сейчас я внедряю их в свои реальные проекты, и покажу вам, как легко их использовать.

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

Объявить кастомное свойство просто: нужно создать нужное свойство с двумя дефисами в начале. Их можно объявлять где угодно, но добавлять их к :root сегодня считается хорошим подходом.

Доступ к переменной

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

Просто и восхитительно, правда?

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

Следует рассматривать подходящие применения и стратегии работы с ними, и именно на это стоит обратить пристальное внимание.

Интересный способ использования: отзывчивые модули

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


Пример с Sass

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

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

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

CSS-переменные спешат на выручку

CSS-переменные не нужно объявлять заранее, они динамические. Это полезно в различных случаях. Их можно изменять по условию из любого места и в определённых контекстах, к примеру в медиавыражениях.

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

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

В чём разница между CSS- и Sass-переменными?

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

Sass-переменные можно лучше организовать

Из-за популярности и программисткой природы Sass более глубокие организационные паттерны эволюционировали со временем. Особенно симпатичны Sass maps и обьединение однотипных переменных в maps. Цвета, размеры и пути к файлам кажутся достойным выбором для включения в maps.

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

CSS-переменные изменяются динамически

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

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

CSS-переменные — это стандартная браузерная фича

Я считаю, что чем больше можно удалить из Webpack, Gulp и какой-там-новый-фреймворк-сейчас-в-моде, тем лучше. Благодаря интересным браузерным фичам не придётся полагаться на компиляцию и JavaScript-фреймворки, в том, что важно для разработчиков. Смею полагать, что бОльшая часть фронтенд-разработчиков используют переменные в CSS так или иначе, поэтому, если все начнут использовать эту встроенную фичу, это будет выглядеть разумно. А значит, этап сборки (и так уже слишком необъятный, с чем, думаю, никто не поспорит) станет на одну частичку меньше, и в интернете будет больше порядка.

А что с поддержкой браузерами?

Поддержка выглядит замечательно с одним вопиющим исключением: IE 11. Большинство современных браузеров поддерживают CSS-переменные, только в Edge есть некоторые баги.

78.11% — выше чем у CSS-гридов (на момент написания этой статьи), но из-за отсутствия поддержки в IE11 могут быть проблемы.

Ну что, можно уже использовать CSS-переменные?

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

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

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

Использование переменных в CSS

На этой странице

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

CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации ( например. —main-color: black; ) и доступны через функцию var() ( например. color: var(—main-color); ) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

Основное использование

Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)

Первый шаг с CSS Переменными

Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

Мы применим его к этому HTML:

что приводит нас к этому:

Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдо-классе :root, автор CSS может избежать ненужных повторений, используя эту переменную.

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

Наследование переменных в CSS и возвращаемые значения

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

со следующим CSS:

В результате var(—test) будет:

  • для элемента с классом : 10px
  • для элемента с классом : 2em
  • для элемента с классом : 10px (унаследовано от родителя)
  • для элемента с классом : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

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

В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)

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

Обоснованность и полезность

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

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


Совместимость с браузерами

Особенность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да) -webkit
33.0
Нет 34.0 [2]
49.0
(Да) 29 (29) [3]
31 (31)
Нет 36.0 9.1
Особенность Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет 49.0 (Да) 29 (29) ? ? 9.1 49.0

[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var() function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags , later renamed to Enable experimental Web Platform features.

[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.

CSS псевдокласс :root

Значение и применение

Псевдокласс :root выбирает корневой элемент в документе, в HTML корневым элементом всегда является элемент .

Псевдокласс :root, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью. Другими словами, если вы установите для псевдокласса :root цвет заднего фона чёрный, а для htmlбелый, то браузер отдаст приоритет псевдоклассу и установит цвет заднего фона чёрный.

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

Селектор Chrome

Firefox Opera Safari IExplorer Edge
:root 4.0 3.5 9.6 3.2 9.0 12.0

CSS синтаксис:

Версия CSS

Пример использования

В этом примере с использованием селектора :root мы установили для корневого элемента цвет заднего фона — чёрный. Обратите внимание, что был применён именно чёрный цвет по той причине, что псевдокласс :root имеет более высокую специфичность чем селектор типа html.

Результат нашего примера:

Пример использования псевдокласса :root. CSS селекторы

CSS root var: почему можно отказаться от использования переменных

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

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

Для обращения к переменной —my-font используется запись var(—my-font) , которую можно вставлять в качестве значения свойства. При этом область видимости переменной ограничена указанным селектором ( aside в данном случае) и применение var(—my-font) в другом селекторе не даст результата. Для создания глобальных переменных их следует описать внутри селектора :root.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Пример

В данном примере вводятся две переменные: —primary-color и —info-color . Переменная —white не определена, поэтому подставляется указанное значение по умолчанию. Для селектора p.info значение переменной —primary-color переопределяется.

Спецификация ?

Спецификация Статус
CSS Custom Properties for Cascading Variables Module Level 1 Редакторский черновик

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

15 49 36 9.1 31

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

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

Как запретить CSS переписывать предыдущее значение при использовании переменных

Итак, я пытаюсь создать таблицу стилей, которая предоставит нам быстрые и простые параметры настройки (некоторые члены команды имеют ограниченное понимание CSS, и было бы безопаснее построить «лист тем», который можно легко редактировать)

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

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

Моим возможным решением было закомментировать все переменные, кроме тех, которые используются. Это позволило мне указать значение по умолчанию во втором поле для var(), которое всегда будет по умолчанию, если только переменная не существует. Это не совсем то, к чему я стремился, но я считаю его единственным решением в рамках базового css.

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

Примечание. Недействительная концепция времени с вычисленным значением существует, потому что переменные can not «fail early», как и другие синтаксические ошибки, могут, поэтому к тому времени, когда пользовательский агент реализует значение свойства, он недействителен, его уже выбрасывают другие каскадные значения.

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

Псевдокласс :root и в чем его отличие от селектора html.

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

Основная цель его использования, это получить доступ к корневому элементу документа.

А что является корневым элементом для HTML-страницы?

Это элемент . Получается, что с помощью псевдокласса :root мы будем получать доступ к нему.

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

И успешно получить доступ к элементу ?

Но, не стоит забывать, что CSS – это технология, которая используется не только для html-документов, ее также можно применять и к XML-страницам и SVG-файлам, и.т.д.

Используя такую запись:

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

Вот пример документа, где это можно использовать на практике.

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

Топ-пост этого месяца:  AMP-страницы получат поддержку кода JavaScript
Добавить комментарий