HTML and CSS Reference
In-Depth Information
One way to deal with the focus rectangle is to use
outline-color
to make it blend better with your design. If
you adopt this approach, it's important to make sure the rectangle is still perceptible.
The other approach is to remove the focus rectangle on links, but to use the
:focus
pseudo-class to apply the
same style as
:hover
like this:
a {
outline: none;
}
a:hover, a:active, a:focus {
color: #8E2800;
text-decoration: underline;
}
This removes the focus rectangle, but ensures that when someone tabs to the link, it's styled the same way as
on hover. It's a win-win situation. You preserve the unity of your design, but someone using keyboard navigation
still gets a strong visual clue as to which link currently has focus.
Summary
CSS has a large number of options for creating borders. Older browsers support only plain borders, but most
modern browsers offer a much wider choice, allowing you to create rounded corners, drop shadows, and
decorative borders using images. Although older browsers don't get the benefit of the shiny new features in CSS3,
the sky won't fall in if they see only straight corners without shadows. The main point to remember about creating
borders is that the default border style is
none
. If you forget to specify a style, no border is created.
The syntax for border images can be confusing at first because
border-image-width
sets the width of the
slices, not of the border box where the slices are displayed. Remember to create a basic border the same width
as the image slices. In modern browsers, the border image overrides the basic border, which acts as a fallback for
older browsers. Although Chrome is the only browser that currently implements all aspects of border images, the
main parts are supported by all other browsers in widespread use except Internet Explorer.
In the next chapter, we'll take an in-depth look at styling lists. Although there's a draft CSS3 Lists module, the
W3C describes it as being at the exploratory stage. However, the CSS2.1 features are stable and well implemented
in all browsers.
