Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is Graceful Degradation in CSS?
What is Graceful Degradation?
If you are an experienced web developer, you may have heard the graceful degradation word before. Before we learn about the graceful degradation in web development, let’s break down the word. The meaning of graceful is elegant or beautiful, and degradation is breaking or falling down. So, the overall meaning of the graceful degradation word is that it makes the feature elegant while it breaks.
Developers use the graceful degradation term in web development. It provides various techniques so that any website or application can work correctly in less capable browsers.
For example, modern browsers support advanced CSS and JavaScript features but are not supported by older browsers or older versions of the browsers. In such cases, developers need to ensure that users can access the website in older browsers with a good experience.
Different Techniques for the Graceful Degradation
In the above section, we learned what graceful degradation is and why developers should ensure it. Now, we will learn different techniques with examples for graceful degradation.
Progressive Enhancement
In this technique, developers require to break down the code into different packages and load each packet one by one. So, load the HTML of the web page successfully, and then load the normal CSS supported by every browser.
At last, load the advanced CSS features, and if the browser supports that feature, it will be applied to the HTML element. Otherwise, the HTML content of the web page remains accessible. So, in this way, even if a modern browser doesn’t support some features, it can still render the HTML content properly.
Feature Detection
In this approach, we check whether the browser supports particular JavaScript features. If yes, the website allows users to use that feature to style the HTML content accordingly. Otherwise, we can show some error messages or apply different styles to the HTML content.
Let’s understand it via the example below.
Example
In the example below, we have created the div element and given the ‘element’ id. Also, we have defined the ‘container’ class in the CSS and included some CS properties into that.
In JavaScript, whenever the browser loads, we access the div element by id and check if the div element contains the ‘classList’ property. If yes, we add the ‘container’ class name in the array. Otherwise, we simply concat the class name to the class name string.
So, here we have detected if the div element supports the class list, and according to that, we used a different technique to add a class name to the div element.
<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 the <i> feature detection technique </i> for the graceful degradation in the 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>
Add Fallback Options
Another technique for graceful degradation is adding fallback options. In this technique, if the browser doesn’t support any CSS, we use another CSS to show HTML content perfectly in the web browser.
Using the examples below, let’s understand adding the fallback options to the web page.
Example (Adding the fallback option for CSS gradients)
In the example below, we have created the card div element and used the line-gradient() CSS function to set the background gradient. Also, we have written the fallback CSS if the browser doesn’t support the linear-gradient() CSS function.
In the output, users can observe that either it shows the 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 the <i> fallback options for the gradient </i> for the graceful degradation in the web development</h3>
<div class = "card"> This is a card element </div>
</body>
</html>
Example (Adding the fallback option for CSS animation)
In the example below, we added the CSS animation's fallback option. Here, we have created three div elements and added the ‘bounce’ animation in all elements. The ‘bounce’ animation moves the div upside from its position and sets it back to its initial position.
In JavaScript, we create a new div element and check if its style contains the ‘animation’ property. If yes, the animation will apply automatically. Otherwise, we need to add a ‘no_animation’ class to every div element using JavaScript, 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>Using the <i> fallback options for the animation </i> for the graceful degradation in the 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>
Users learned about various graceful degradation techniques in this tutorial. All techniques make the HTML content of web pages attractive, even if browsers are not supporting some features.
The best technique for graceful degradation is to set up the fallback option. Developers should use only standard HTML and CSS properties to ensure graceful degradation in older browsers.
However, graceful degradation is costly to maintain as developers require to add fallback options for multiple features. Still, it gives a smooth web experience to visitors visiting from any web browser.
86 Views
To Continue Learning Please Login