ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
Listing 4-8. Creating a Separate Effect for Visited Links
nav a:visited:hover {
background: #f00;
background: rgba(255, 0, 0, 0.7);
}
The transition effect will still be applied to visited links, but they will fade to red, not black. This will produce
a menu as shown in Figure 4-1.
Figure 4-1. A navigation bar with an animated hover effect
Adding CSS3 in this way is entirely backwards-compatible with older browsers. If the browser does not support
transitions, users will simply see a partially transparent background behind the currently hovered-over link.
■ Tip the easiest way to envision the behavior of older browsers that only support CSS 2.1 is to bear in
mind that they impose a duration of 0 on any transition. this, by the way, is the reason the default values of
transition-duration and transition property are 0 and all, respectively.
If you want to ensure even greater cross-browser compatibility, you can add a fallback flat black (#000)
background for the hovered links, before the rgba section of the declaration. Browsers that understand rgba
will follow the last rule; those that don’t will follow the hexadecimal color. The fade-in will still work and appear
correctly in browsers that support it.
Highlighting the Current Page in Navigation
Highlighting the user’s current page in the navigation bar is problematic. CSS is not aware of the internal state of
an application—it does not know where it is. You can avoid this issue by creating a class, data attribute, or id for
the self-referential link on each page with another on the body tag, allowing CSS to match the selectors, as shown
in Figure 4-2.
Figure 4-2. A navigation bar with the current location highlighted