250 Chapter 19
Figure 19-6: Text flows into the first box, overflows into the second box, and then over-
flows into the third.The elements F and G can be placed anywhere on the page; they do not
need to be contiguous (though you should, of course, make it easy for the
user to follow the visual flow of the content).
As of this writing CSS Regions is implemented in Safari 6.1 and above,
using the -webkit- prefix. CSS Regions is also in Internet Explorer 10 and
11, using the -ms- prefix and with the added proviso that the element from
which the content flows must be an iframe.Variables
Almost every programming language can define variables—symbolic names
to which you can assign values and that can be referenced or updated later.
Part of the reason for the wild popularity of CSS preprocessors such as Sass is
that they allow the use of variables in CSS. This popularity has led directly
to the creation of custom properties—a limited variable-like feature in the
native CSS language. These are introduced in the CSS Custom Properties
for Cascading Variables Module (http://www.w3.org/TR/css-variables-1/).
You define a custom property in three steps: by setting its scope (the
range of values to which it can be applied), creating a unique identifier,
and then assigning that identifier a value. Here’s how that looks in code: :root {
--fooColor: #f00;
}Leaving aside for now, look at , where I’ve defined the custom prop-
erty using the unique identifier --fooColor. (CSS variable names must be a
string of characters with no spaces and prefixed with a double hyphen to
avoid conflict with other defined values.) I’ve assigned the color value #f00
to the custom property, but any valid CSS property value is permitted.
Once the custom property has been defined and given a value, you can
use it as the value of any other property. The value assigned to the custom