HTML and CSS Reference
In-Depth Information
image replacement techniques have been around for years and they've long been trusty tools in the CSS
designer's kit. You can find a helpful roundup of different image replacement methods at CSS Tricks (
css-
tricks.com/examples/ImageReplacement/
).
The particular technique we'll use for our search button was first popularized by designer Mike Rundle way
back in the mid-2000s and it's still one of the most common CSS tricks in the topic. This method of image
replacement uses the
text-indent
property with a negative value to push an element's contents aside
and out of view, leaving the background image visible in its stead.
Listing 10-14 shows the updated style rule for our search button. We're adding a huge negative indentation
to push the button's text far off to the left, well out of view on even the largest screens. We've assigned a
width and height, and hidden the overflowing content to prevent possible crawl bars. You could use any
unit of measure you like, but we're using ems in this example, and we're using 999 because it's the highest
number with only three digits; an extra digit would be one more byte we don't really need. Any high
number would work just as well, but 999 has a nice ring.
Listing 10-14.
Using
text-indent
to replace a button's text with a background image
#site-search button {
float: left;
width: 15%;
height: 26px;
padding: 2px;
border: 2px solid #fc0;
text-indent: -999em;
overflow: hidden;
background: #fff4a5 url(../images/icon-search.png) 50% 50% no-repeat;
}
#site-search label {
position: absolute;
left: -999em;
}
We've also hidden the field's accompanying
label
element with a somewhat similar method, absolutely
positioning the entire element far off to the left. The element is still there in the markup where screen
readers can access it, but graphical browsers won't display anything at all.
Why not hide the search field label with
display:none
? The
display:none
declaration
completely removes an element from the document flow, as if it didn't exist at all. Most
screen reading software will honor a
display:none
declaration by not reading the text
of the hidden element, assuming the author intended to remove the element entirely.
Positioning an element outside the window allows its text to be read by screen readers,
but still hides it out of view of graphical browsers that may not need the extra hint.
With some additional styling added to the search field, giving it some color and a matching border, you can
see our finished search form in Figure 10-7. This image replacement technique works well but isn't
completely foolproof. It can prove troublesome in right-to-left languages in some browsers, and for any
