HTML and CSS Reference
In-Depth Information
N
OTE
A few CSS3 units that have been discussed online, such as grid units (
gr
or
gd
), fractions
(
fr
), and turns, are not presented in Table 6-4 either because there is a lack of documentation or
because there is a clear indication of instability of these values.
CSS3 also introduces a
calc()
function that can be used wherever length values are
allowed. The function is used to calculate a value using some basic mathematics. For example,
p {margin: calc(1rem-2px) calc(1.5rem-5px);}
would set the margins of the paragraph based upon the root element's font minus some
small pixel value. Browser support for this measurement is nonexistent, and it is interesting
to see that it is similar to Microsoft's CSS expressions, which have been maligned and later
disabled in the IE browser in some versions and settings due to performance considerations.
CSS3 Color Values
The CSS3 Color module defines the color units supported in CSS and documents a few
color properties, most notably
color
and
opacity
. The specification also introduces a few
new color units and keywords, as summarized in Table 6-5.
CSS3 Color
Feature
Description
Example(s)
Support
currentColor
keyword
Can be used as a macro for
whatever the current color
is. This is useful if you want
to dynamically change one
color and have other related
colors change.
#currTest {color: red;
border: 1px solid black;
border-color: currentColor;}
/* if supported, border red
not black */
Firefox 2+,
Chrome 1+,
Safari 3+,
Opera 9.5+
HSL Color
CSS3 introduces Hue
Saturation Lightness (HSL),
where color values are
specified as
hsl(
hue,
saturation,lightness
)
.
Hue is set as the degree on
the color wheel, where 0 or
360 if you wrap around is
red, 120 is green, and 240
is blue, with the various
other colors found between.
Saturation is a percentage
value, with 100% being
the fully saturated color.
Lightness is a percentage,
with 0% being dark and 100%
light with the average 50%
being the norm.
#red {
color: hsl(0,100%,50%);}
Firefox 2+,
Safari 3+,
Chrome 1+,
Opera 9.5+
#green {
color: hsl(120,100%,50%);}
#blue {
color: hsl(240,100%,50%);}
T
ABLE
6-5 New CSS3 Color Units
