CHAPTER 1 ■ CSS3 FundAmEnTAlS
Design Principles: Progressive Enhancement
and Graceful Degradation
One of the design methodologies common to both CSS and JavaScript is graceful degradation, also known as
progressive enhancement. Put simply, the idea is to use CSS to enhance a website, not for the site to be utterly
dependent on it.
This becomes especially important when you start to animate content. Because CSS3 is only supported in
certain browsers, when applying advanced technologies, you should always ask, “If the browser doesn’t show
what I am trying to achieve, can the site still be used?”
This is problematic for some people, especially clients, who insist that a site should look and perform “exactly
the same in every browser.” In the age of the iPhone and responsive web design, however, this is no longer a realistic
expectation. Instead, you need to treat the addition of advanced CSS to a site as a series of what-if scenarios:
• If you use CSS3 to create an image slideshow on a web page (as shown in Chapter 6), and
the browser doesn’t support it, what happens? If the user sees a static placeholder image
in place of the slideshow, is that alright? Or do you need to use JavaScript as a fallback?• If you use CSS3 to enhance a site’s navigation bar with animation, is it okay that some
users won’t see the animation? Can they still use the navigation bar without it?The various examples and tutorials throughout this book will demonstrate different solutions to achieve
backward compatibility, as there is no one practice or technique that is applicable in all cases. At the same time,
I’ll also be emphasizing accessibility; that is, enabling users with different needs and abilities (such as the blind,
or site visitors who use a keyboard without a mouse) to access your work.
Why CSS3 Rather Than JavaScript or Flash?
You can find a comprehensive list of advantages and disadvantages of using CSS3 rather than JavaScript or Flash
in Table 1-2.