var()
. Пользовательские свойства, объявляющие переменные, должны именоваться начиная с var-
. Значения этих пользовательских свойств практически произвольны. Они могут принимать почти любую вереницу символов, при условии что она сбалансирована.
Например, автор может объявить какие-то общие значения в стилевых правилах для корневого элемента, таким образом они будут доступны для каждого элемента документа:
:root {
var-theme-colour-1: #009EE0;
var-theme-colour-2: #FFED00;
var-theme-colour-3: #E2007A;
var-spacing: 24px;
}
Обращаться к переменным можно в любом месте внутри значения другого свойства, включая остальные пользовательские свойства. Переменные из вышеуказанной таблицы стилей могут быть использованы, например, следующим образом:
h1, h2 {
color: var(theme-colour-1);
}
h1, h2, p {
margin-top: var(spacing);
}
em {
background-color: var(theme-colour-2);
}
blockquote {
margin: var(spacing) calc(var(spacing) * 2);
padding: calc(var(spacing) / 2) 0;
border-top: 2px solid var(theme-colour-3);
border-bottom: 1px dotted var(theme-colour-3);
font-style: italic;
}
Если их применить к этому документу:
<!DOCTYPE html>
<h1>The title of the document</h1>
<h2>A witty subtitle</h2>
<p><em>Please</em> consider the following quote:</p>
<blockquote>Text of the quote goes here.</blockquote>
результат будет выглядеть как-то так:
Переменные вычисляются на основании значения переменной того элемента к которому применяется свойство со ссылкой на переменную. Если элемент
h2
содержит атрибут style="var-theme-colour-1: black"
, тогда правило h2 { color: var(theme-colour-1); }
будет вычислено с использованием этого значения, а не того, что определено в правиле :root
Ссылки на переменные так же могут включать в себя запасные значения, которые используются в случае, если переменная не определена или недействительна (из-за участия в цикле обращений к переменной). Первое правило в таблице стилей с использованием переменных можно переписать в виде:
h1, h2 {
color: var(theme-colour-1, rgb(14, 14, 14));
}
что в результате приведет к установке темно-серого цвета, если переменная
theme-colour-1
не определена в одном из заголовочных элементов.Поскольку ссылки на переменные раскрываются используя значение переменной в конкретном элементе, этот процесс должен быть выполнен во время определения вычисленного значения свойства. Всякий раз, когда возникает ошибка в процессе подстановки переменной, свойство становиться «недопустимым во время вычисления значения» (“invalid at computed-value time”). Ошибки могут возникать из-за обращения к не объявленной переменной, не имеющей запасного значения, или потому, что подставляемое в свойство значение не было распарсено (например, если мы указали для переменной theme-colour-1
не цветовое значение и затем применили его для свойства color
). Если свойство недопустимо во время вычисления значения, само объявление этого свойства парсится успешно, и его можно увидеть, если изучить объект CSSStyleDeclaration в дереве DOM. Однако вычисленное значение этого свойства примет значение по умолчанию. Для наследуемых свойств, таких как color
, значением по умолчанию будет inherit
. Для не наследуемых свойств, initial
.
Реализация
Начальная реализация CSS переменных только что добавлена в Firefox Nightly, актуальной является 29 версия. Этот функционал пока не доступен в релизных сборках (таких как, Firefox Beta и релизная версия Firefox), так как прежде чем сделать его широкодоступным, мы ждем решения некоторых проблем в спецификации и для этого шагаем чуть дальше на ниве W3C Process. Однако все это и дальше будет доступно в Nightly, а после 3 февраля перейдет и в Firefox Aurora.
Единственная не реализованная на данный момент часть спецификации — это CSSVariableMap
, представляющая объект, который напоминает ECMAScript Map
с методами get
, set
и другими методами для получения значений переменных на основании CSSStyleDeclaration
. Однако, помните, что вы все еще можете добраться до них в DOM-дереве, используя методы getPropertyValue
и setProperty
, при условии, что вы используете полные названия свойств, как например var-theme-colour-1
.
Работа над этой функцией была выполнена в рамках решения бага 773296, и я благодарю Дэвида Барона за обзоры и Эммануэллу Басси, которая выполнила кое-какие стартовые работы по реализации. Если вы столкнетесь с какими-либо проблемами, используя эту функцию, пожалуйста, сообщите об ошибке!
Оригинал: CSS Variables in Firefox 29
This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.
Комментариев нет:
Отправить комментарий