The Future of CSS 251
property is used as the value of the property that refers to it by using the
unique identifier as an argument in the var() function. For example, to call
this value on a border-color and color, you write the following:
E {
border-color: var(--fooColor);
color: var(--fooColor);
}
Here, the value of the custom property --fooColor (namely #f00) will be
used as the value of the border-color and color properties of E. Of course,
the value of the custom property must be valid when applied to the prop-
erty that refers to it: there would be no point in using a color value for the
width property. If you do use an invalid custom property in a rule, the rule
will be ignored.
Now, let’s return to in the code shown earlier. This line sets the scope
of the variable. In my example, the scope is the :root selector, which means
the variable has global scope that can be applied to any element, regardless
of its position in the DOM. If you prefer the custom property only be valid
when applied to a subset of elements, you can limit this scope. For the cus-
tom property to be valid only when applied to h1 elements, for example, you
set its scope like this:
h1 { --fooColor: #f00; }
Having restricted the scope in this way, a reference to the custom prop-
erty from any h1 selector displays it with the color value #f00:
h1 { color: var(--fooColor); }
But if you refer to the custom property from an element outside the
scope, like an h2, the custom property is unknown, so the following rule will
be ignored:
h2 { color: var(--fooColor); }
As of this writing, custom properties are available in Firefox 31 and
above and are implemented in Chrome behind a flag, but they may not be
enabled as there are certain performance concerns. As such, custom prop-
erties face an uncertain future.
Feature Queries
Media queries, introduced in Chapter 2, have transformed our ability to
make sites work responsively across many different screen sizes and resolu-
tions. Their power is partly due to their logical simplicity: If the conditions
of the query are met, the rules defined within the query’s declaration block
are applied. This idea is developed further in the CSS Conditional Rules
