Mohammadreza EmamyariIn the ever-evolving world of web development, ensuring that your website works for all users is crucial. Progressive enhancement is a strategy that helps you achieve this goal by creating a website that offers a solid baseline experience for everyone, while progressively adding enhanced features for users with more advanced browsers or devices. Let’s dive into what progressive enhancement is, why it’s important, and how to implement it with real examples.
What is Progressive Enhancement?
Progressive enhancement is a design philosophy that starts with a basic, functional version of your website and then adds layers of enhancements based on the capabilities of the user's browser or device. The goal is to make sure that the core functionality is accessible to everyone, while providing additional features for those who have modern browsers or devices.
Think of it like building a house. First, you build a sturdy foundation (the core functionality). Then, you add more features and decorations (enhancements) that make the house more comfortable and stylish, but these are not essential for the house to be functional.
Why Use Progressive Enhancement?
- Accessibility: Ensures that your website is usable by people with older browsers, slower internet connections, or disabilities.
- Performance: Helps your site perform well on all devices by loading only the necessary resources.
- Future-Proofing: Makes it easier to update and maintain your site as new technologies emerge.
The Three Layers of Progressive Enhancement
- Basic Content and Functionality: The essential elements that all users should see and interact with.
- Enhanced Experience: Additional features and styling for users with modern browsers or devices.
- Advanced Features: Cutting-edge features that leverage the latest technologies for users with the most capable browsers.
-Image from Wikipedia
Implementing Progressive Enhancement: Real Examples
Let's walk through a practical example to illustrate how to implement progressive enhancement on your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deferred CSS and JS Loading</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Loaded!");
// Create and load the CSS file
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "style.css";
// Event listener for when the CSS file is fully loaded
link.addEventListener("load", function() {
// CSS is loaded, now load the JavaScript file
var script = document.createElement("script");
script.src = "script.js";
script.defer = true;
document.body.appendChild(script);
});
document.head.appendChild(link);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
<p>This page loads CSS after HTML and JavaScript after CSS.</p>
</body>
</html>
I have tested this approach and it is miraculously **5 times** faster than linking CSS normally to you html! Like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Enhancement Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This page loads CSS and JavaScript in a progressive manner.</p>
<!-- Deferred JavaScript loading -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// Create and load the JavaScript file
var script = document.createElement("script");
script.src = "script.js"; // Path to your JavaScript file
script.defer = true; // Ensure the script is executed after the HTML is fully parsed
document.body.appendChild(script);
});
</script>
</body>
</html>
so the top block of code is 5 times slower that the first sample. and indeed , logically it takes more time to both load and parse HTML and CSS together than just rendering pure HTML first. And it is the CSS file used ⬇️⬇️⬇️
**CSS (style.css):**
/* Basic styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
main {
padding: 1em;
}
In this example, we provide a basic, functional layout and styling that will work in any browser. The main content is styled with simple, universally supported CSS rules.
Enhancing with Modern CSS Features
Once you have a solid foundation, you can enhance your site with modern CSS features that improve the user experience for those with modern browsers.
Enhanced CSS (styles.css):
/* Basic styling (same as before) */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
main {
padding: 1em;
}
/* Enhanced features */
@supports (display: grid) {
main {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
}
In this example, we use CSS Grid to enhance the layout for users with modern browsers that support this feature. The @supports rule checks if the browser supports CSS Grid before applying the grid layout. This ensures that users with older browsers will see the basic layout without grid enhancements.
Adding JavaScript Enhancements
Now let’s add JavaScript to enhance the functionality. We’ll start by providing basic functionality and then enhance it for users with JavaScript-enabled browsers.
JavaScript (script.js):
alert('Hello, world!');
In this case, we add a basic JavaScript file that shows an alert! This script will work in modern browsers and those with JavaScript enabled.
Best Practices for Progressive Enhancement
- Start with the Basics: Ensure that your website has a functional and accessible baseline experience.
- Enhance with Modern Features: Add advanced features and styling for users with modern browsers or devices.
- Test Across Devices: Test your site on different browsers and devices to ensure it works well for everyone.
-
Use Feature Detection: Implement feature detection (e.g.,
@supportsin CSS,Modernizrin JavaScript) to apply enhancements only if supported. - Prioritize Accessibility: Ensure that all users, including those with disabilities, have a good experience.
Conclusion
Progressive enhancement is a powerful approach to web design and development that ensures your website is functional and accessible to everyone, while providing enhanced experiences for users with more advanced technology. By starting with a solid, basic foundation and gradually adding features and improvements, you can create a website that works well across a wide range of devices and browsers.
By following these principles and examples, you’ll be well on your way to building websites that are both inclusive and modern.
🔗 link to the next article about Graceful Degradation
