HTML and CSS Reference
In-Depth Information
auto
Words may be hyphenated either as determined by hyphenation characters or
the browser's language-appropriate hyphenation resource.
For the browser to know which hyphenation resource to use, you need to add the
lang
attribute with the
appropriate language code in the opening tag of the element, or in the opening
<html>
tag for the whole page. For
example, to indicate that the text is in English, add
lang=
"en"
.
Firefox, Safari, and IE
10
have started supporting hyphenation on an experimental basis with
browser-specific prefixes.
3D Transforms
All mainstream browsers except Opera have begun supporting three-dimensional transforms with
browser-specific prefixes. These are similar to the 2D transforms described in Chapter
20
,
but they add a
third axis to create a 3D illusion.
3D transforms rely on new properties that control perspective and whether the reverse side of the element
is shown when facing the user. There are dedicated 3D transform functions for rotating, scaling, and translating
elements, and for setting the perspective.
I haven't covered 3D transforms in this topic because they're still fairly experimental. To learn more, study
CSS Variables
Often you find yourself using the same value repeatedly in different parts of your style sheets, especially when
defining colors. Not only are color values difficult to remember, but it's a major pain to have to update them all if
the color scheme changes. So, web designers have long been demanding the ability to use variables that need to
be defined only once for their values to be available throughout a style sheet.
The CSS Variables module (
http://dev.w3.org/csswg/css-variables/
) proposes doing just that. However, just
as this topic was going to press, the module's editors decided to change an important part of the original proposals.
The proposed method of defining a variable property remains the same. You create a name prefixed by
var-
and assign it a value. For example, let's say you want to define the primary color for use throughout the site,
you could create the following style rule using the
:root
pseudo-class:
:root {
var-primary: #008B8B; /* dark cyan */
}
To apply the primary color to headings, it was originally proposed using
$
followed by the variable name—in
this case,
$primary
. However, that idea has been dropped—at least for the time being. Instead, you access the
value using the
var()
function like this:
h1, h2, h3 {
color: var(primary);
}
This applies the color defined as
var-primary
to the top three levels of headings. If you change the value of
var-primary
, the new color is automatically applied to the headings, as well as to any other elements that use the
same variable.
Optionally, you can add a second argument to
var()
to define the value of the variable if it hasn't already
been defined.
Once finally implemented, this should make a major difference to working with large style sheets.
