HTML and CSS Reference
In-Depth Information
Given these constraints, you need to do the following to make a CSS drop-down menu accessible:
•
Link to real pages in the top-level menu. Although using dummy links as the trigger
for submenus works better on Android, it makes the menu inaccessible to keyboard
navigation.
•
In the landing page from each top-level link, create a secondary navigation menu—such
as the vertical navigation bar in Chapter 10—that replicates the links in the submenu.
It seems we'll have to wait a little longer before CSS drop-down menus become truly accessible.
Masking an Absolutely Positioned Element
The
clip
property creates a mask through which part of an element is displayed. It works only with absolutely
positioned elements, and the only shape you can use is a rectangle.
You define the area you want to display by supplying four offsets in clockwise order from the top. All the
offsets are calculated from the top left of the element you want to mask, and each must be defined as a length.
You can't use percentages. Figure
11-21
shows how the offsets were measured for the masked image in clip.html.
60px
135px
290px
210px
Figure 11-21.
The offsets are calculated from the top left of the element you want to mask
The image is masked using the following styles:
#clipped {
position: absolute;
clip: rect(60px, 290px, 135px, 210px);
/* Other styles omitted */
}
As a result only the water tower is displayed, as shown in Figure
11-22
.
