Hiding Extraneous Elements

Sometimes the easiest way to get rid of a problem element on your Web page that just doesn't look right on the small screen is to hide it all together.

Tips

For more details about the display property, consult Displaying and Hiding Elements on page 190.
I have found the display property to be well supported by the handheld browsers that support CSS at all. I did have one problem with a browser that didn't like contextual selectors: H1 {display: none} worked fine, #header h1 {display:none} did not.
Note that just because you hide an element doesn't mean that the handheld browser won't download it. So, while you may indeed be improving what the page looks like, you might not necessarily be making it faster or cheaper. The only way to guarantee that a handheld browser won't download big images, scripts, or extra text is to serve it specialized pages without those elements.
If you create special items for your hand-held pages, you may need to hide these on your regular screen style sheets.
The display property is often used to create interactive effects (see Chapter 12, Dynamic Effects with Styles).

Hiding Extraneous Elements

Figure 13.8. If people care enough about our site to come here on a telephone or PDA, we'll spare them reading through the description. We'll also hide the photo bar on the bottom of the page.

Figure 13.9. Now after the navigation bar we go directly to the first article.

Figure 13.10. Here is the bottom of the Web page, with the mini photos duly hidden.