Color and Opacity 119
Because the first h2 has a color value of black, the color of the border-
bottom property of the abbr element is also black. Because the second h2 has
a color value of white, the border-bottom property of the abbr element has the
same color. These values have taken on the color property of their parent
elements.
The currentColor keyword means I don’t have to specify the color of the
border for every instance of the abbr element. In this example, I don’t have
to use an extra rule—without it, I have to use something like this:
h2 abbr { border-bottom: 6px double black; }
.ccolor abbr { border-bottom-color: white; }
Although this may not seem like a big savings, the addition of
currentColor means I can update the parent element color and not have
to worry about setting the color on any relevant children. On a large site
with many different color combinations, you can see that currentColor
would be extremely handy.
Summary
The introduction of the opacity property and the Alpha channel to CSS3
may seem minor, but transparency unlocks some significant changes to
page designs; overlapping colors have long been a staple of print design,
but this style never made serious inroads into web design because of how
difficult it was to implement.
And although the HSL color model doesn’t impact how visitors experi-
ence your website, it allows you as an author to experiment with color more
easily during the design process.
In the next chapter, I’ll complete the quartet of chapters on element
decoration with a look at the gradient background.
Border and Box Effects: Browser Support
Chrome firefox safari ie
opacity Yes Yes Yes Yes
RGBA values Yes Yes Yes Yes
HSL values Yes Yes Yes Yes
HSLA values Yes Yes Yes Yes
currentColor value Yes Yes Yes Yes
