What is Graceful Degradation in CSS?

What is Graceful Degradation?

If you’re an experienced web developer, you may have heard of “graceful degradation” before. Before learning about graceful degradation in web development, let’s break down the term. “Graceful” means graceful or beautiful, while “degraded” means to decline or collapse. Therefore, the overall meaning of the term “graceful degradation” is to make functionality more graceful while breaking down functionality.

Developers use the term “graceful degradation” in web development. It provides various techniques to ensure that any website or application works properly in less-capable browsers.

For example, modern browsers support advanced CSS and JavaScript features, but older browsers or browser versions may not support them. In these cases, developers need to ensure that users can access their website and experience good performance in older browsers.

Different Techniques for Graceful Degradation

In the previous section, we learned what graceful degradation is and why developers should ensure it. Now, we’ll learn different graceful degradation techniques through examples.

Progressive Enhancement

In this technique, developers need to break down their code into different bundles and load each bundle one by one. Therefore, the page’s HTML is successfully loaded first. Then, the standard CSS, which every browser supports, is loaded. Finally, advanced CSS features are loaded and applied to HTML elements if the browser supports them. Otherwise, the page’s HTML content remains accessible. Therefore, even if a modern browser doesn’t support certain features, it can still render the HTML content correctly.

Feature Detection

In this method, we check whether the browser supports a specific JavaScript feature. If so, we allow the website user to use that feature to style the HTML content as needed. Otherwise, we can display an error message or apply different styles to the HTML content.

Let’s understand this with the following example.

Example

In the example below, we create a div element with the ID “element.” Furthermore, we define the class “container” in CSS and include some CSS attributes within it.

In JavaScript, whenever the browser loads, we access the div element by ID and check if it contains the “classList” attribute. If so, we add the “container” class name to the array. Otherwise, we simply concatenate the class name into the class name string.

So, here we’ve detected whether the div element supports class lists and used different techniques to add the class name to the div element based on that.

<html> 
<head> 
<style> 
.container { 
width: 300px; 
height: 300px; 
background-color: red; 
border: 3px solid green; 
border-radius: 12px; 
} 
#output { 
font-size: 20px; 
font-weight: bold; 
color: blue; 
} 
</style> 
</head> 
<body> <h3>Using Feature Detection Techniques for Graceful Degradation in Web Development</h3>
<div id = "element"> </div>
<div id = "output"> </div>
<script>
var myDiv = document.getElementById('element');
let output = document.getElementById('output');
if ('classList' in myDiv) {
myDiv.classList.add('container');
output.innerHTML = 'classList is supported';
} else {
myDiv.className += ' container';
output.innerHTML = 'classList is not supported';
}
</script>
</body>
</html>

Adding Fallback Options

Another technique for graceful degradation is adding fallback options. In this technique, we use alternative CSS to perfectly display HTML content in web browsers if the browser doesn’t support any CSS.

Through the following example, let’s understand how to add fallbacks to a web page.

Example (Adding Fallbacks for CSS Gradients)

In the following example, we create a card div element and set a background gradient using the line-gradient() CSS function. Furthermore, we write fallback CSS to use if the browser doesn’t support the linear-gradient() CSS function.

In the output, users can observe that it displays a gradient or background color.

<html> 
<head> 
<style> 
.card { 
width: 400px; 
height: auto; 
font-size: 2rem; 
background-color: orange; 
background-image: linear-gradient(to right, #14f71f, #d46a06); 
color: white; 
text-align: center; 
} 
/* Fallback styles */ 
@media screen and (-ms-high-contrast: active), 
(-ms-high-contrast: none) { 
.card { 
background-image: none; 
background-color: orange; 
} 
} 
</style> 
</head> 
<body> 
<h3>Using Fallback Options for Graceful Degradation in Web Development</h3> 
<div class = "card"> This is a card element </div>

</body>

</html>

Example (Adding a Fallback Option for CSS Animations)

In the following example, we add a fallback option for CSS animations. Here, we create three div elements and add the “bounce” animation to all of them. The “bounce” animation moves the div up from its position and sets it back to its initial position.

In JavaScript, we create a new div element and check if its style includes the “animation” attribute. If so, the animation is automatically applied. Otherwise, we use JavaScript to add the “no_animation” class to each div element, which sets “animation: none.”

<html> 
<head> 
<style> 
.square{ 
background-color: blue; 
color: white; 
width: 100px; 
font-size: 1.5rem; 
padding: 20px; 
margin-bottom: 20px; 
position: relative; 
animation: bounce 2s ease-in-out infinite; 
animation-direction: alternate; 
animation-delay: 0.1s; 
animation-fill-mode: both; 
animation-play-state: running; 
} 
@keyframes bounce { 
0% {transform: translateY(0);} 
100% {transform: translateY(-30px);} 
} 
/* Fallback styles */ 
.no-animation .square{
top: 0;
animation: none;
}
</style>
</head>
<body>
<h3>How to use fallback options for graceful degradation in web development</h3>
<div class = "square"> div1 </div>
<div class = "square"> div2 </div>
<div class = "square"> div3 </div>
<script>
window.onload = function () {
var squares = document.querySelectorAll('.square');
if (!('animation' in document.createElement('div').style)) {
for (var i = 0; i < squares.length; i++) {
squares[i].classList.add('no-animation');
}
}
};
</script> 
</body> 
</html>

This tutorial introduces various graceful degradation techniques. All of these techniques can make the HTML content of a web page look attractive even when certain features are not supported by certain browsers.

The best graceful degradation technique is to set fallback options. Developers should use only standard HTML and CSS properties to ensure graceful degradation in older browsers.

However, graceful degradation is costly to maintain because developers need to add fallback options for multiple features. Nevertheless, it can still provide a smooth web experience for all visitors from any browser.

What is graceful degradation in CSS?

What is Graceful Degradation in CSS?