Progressive Enhancement and Graceful Degradation in CSS

1. Welcome and Icebreaker:

• Icebreaker: “Have you ever visited a website that didn’t work on your device? What happened?”

2. Outline the Session:

• Agenda:
  • What is progressive enhancement?
  • What is graceful degradation?
  • Strategies for modern and older browsers
• Learning Outcomes:
  • Build designs that adapt to browser capabilities
  • Ensure basic functionality on all devices
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

Progressive enhancement means building a basic, functional site for all browsers, then adding advanced features for capable browsers. Graceful degradation means starting with a full-featured site and ensuring it still works if features are missing.

4. Live Coding Demonstration:

Example of progressive enhancement and graceful degradation:

<style>
.box {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  /* Modern browsers */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
@supports (backdrop-filter: blur(5px)) {
  .box {
    backdrop-filter: blur(5px);
  }
}
</style>
<div class="box">This box looks better in modern browsers!</div>

• Step-by-step:
  • Use @supports for feature detection.
  • Provide fallbacks for older browsers.
• Best Practice: Test with and without advanced features.
• Common Pitfall: Relying only on modern CSS without fallbacks.

5. Tasks:

• Exercise:
  • Create a styled box with a fallback background and a modern effect using @supports.
  • Test your page in different browsers.