This case study will explore one way to give FAQs a facelift. With
progressive enhancement in mind, you??™ll create a baseline, or low-fi, experience using just
markup. Then you??™ll add a layer of interaction that relies solely on Cascading Style Sheets
(CSS) for a hi-fi experience. Finally, you??™ll add a layer of interaction with JavaScript to kick it
all into hi-def, or at least give it a little of that oh-so-popular Web 2.0 feel.
nNote Jonathan introduced the concept of progressive enhancement in Chapter 7.
Your guinea pig will be the FAQ page for Firebug (http://getfirebug.com), the popular
debugging extension for Firefox. You can find the files for this case study in /starting files/.
The HTML file you??™ll be enhancing is faq.html, but you??™ll spend the majority of your time
working in faq.js and firebug.css.
167
C H A P T E R 8
Figure 8-1. A typical FAQ page taken from http://ride4ever.org
Layer 1: Target Practice
A few years back, while experimenting with a definition list (dl) for marking up the
question/answer pairs in an FAQ, it dawned on me that the extra list of questions at the top of
FAQ pages wasn??™t needed. Using clever CSS, you can create the list effect by hiding the answers
and showing them only when the appropriate question??™s link is clicked. It requires the use of a
CSS3 pseudoclass selector (:target), but it is perfectly in keeping with the spirit of progressive
enhancement.
Pages:
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242