Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

A Bulletproof Approach

To ensure that your page's text is still readable, even in the absence of images, the bulletproof fix is rather simple. Remember to always provide background color equivalents for any background images that you may use.

For instance, looking back at our unreadable example, if I had simply added background color to content areas of the page, my helpful reader would still be able to view the text without any problems.

Since the content portion of the page sits on top of a white background, I need to add that color to the containing <div id="content"> that wraps that column:

#content {
background: #fff;
}

Similarly, since the sidebar's text sits on top the light-gray background portion of the tiled image, I just need to declare that color for the <div id="sidebar"> that wraps the right column:

#sidebar {
background: #eee;
}

Figure 6.6 shows the results of adding those two simple rules to the style sheetwith images still turned off. You'll notice that while the tiled image is gone, each text column has a background color sitting behind it, masking the dark gray default of the entire page.