Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 160

Styles Using Progressive Enhancement
Tammy suggests that you modify the style of the h2 headings to make the text appear as a
semi-transparent white against a green background. To create this effect, you can employ
the following style rule:

h2 {
background-color: rgb(0, 154, 0);
color: white;
color: rgba(255, 255, 255, 0.8);
}
Notice that this code doesn't remove the initial color property that set the text color
to white, but simply adds another color property to the style rule. This is an example of
a technique known as progressive enhancement , which places code conforming to older
standards before newer properties. Older browsers that do not support CSS3 will ignore
the RGBA color value and display the text in white, while newer browsers that do sup-
port CSS3 will apply the RGBA color value because that color value, being declared last,
has precedence. Thus, both older and newer browsers are served by this style rule.

Apply progressive
enhancement whenever
you use newer code that
would cause your page to
be unreadable under older
browsers.

To make the heading text semi-transparent:

◗

1. Return to the sa_styles.css file in your text editor.
◗

2. Within the style rule for the h2 selector, insert the following color property, as
shown in Figure 3-15:

color: rgba(255, 255, 255, 0.8);

Figure 3-15 Setting a semi-transparent color

white color with
80% opacity

older browsers
will display h2
text in white

◗

3. Save your changes and then reload the home.htm file in your Web browser. If
you're using a current browser that supports CSS3, the h2 heading text should
appear as light green (see Figure 3-16). Under older browsers, the text should
retain the white color shown earlier in Figure 3-13.

Figure 3-16 Heading text in semi-transparent white

green backgro u nd bleeds
through the semi-transparent
white text