The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

118 Chapter 10

HSLA

If you’ve decided that HSL is the color method for you, then you’ll also be

able to utilize the Alpha channel for transparency with the hsla() color

value function. Like its counterpart rgba(), hsla() simply extends the color

scheme with an extra argument in the function:

E { color: hsl(hue,saturation,lightness,alpha); }

So, for example, if you want an element with a color value of red and

50 percent opacity, you use this rule:

E { color: hsl(0,100%,50%,0.5); }

The Color Variable: currentColor

In addition to the new color methods I’ve just described, CSS3 also intro-

duces a new color value keyword: currentColor. This keyword acts as a vari-

able for the current color: the value of currentColor for an element is the

value of its own color property. So when an element has a color value of, say,

red, the value of currentColor is also red. You can then use that to set a color

value on a different property without having to specify red again.

The following example should clarify the usefulness of currentColor.

First, I take the following markup:

<h2>The Central Intelligence Agency (<abbr>CIA</abbr>).</h2>

<h2 class="ccolor">The Federal Bureau of Investigation (<abbr>FBI</abbr>)</h2>

and I apply this CSS to it:

h2 { color: black; }

.ccolor {

background-color: black;

color: white;

}

h2 abbr { border-bottom: 6px double currentColor; }

One h2 displays in black (black) text on the default (white) back-

ground, and the other in white text on a black background. Next, I use

the currentColor keyword as a value for the border-bottom property on the

abbr elements. You can see the result in Figure 10-5.

Figure 10-5: A demonstration of the currentColor color value keyword