What is graceful degradation in CSS ?
Last Updated :
23 Feb, 2023
In this article, we will know about Graceful Degradation, along with understanding why it matters for websites to solve capability issues of old browsers and knowing the various benefits. Also, we will see examples of graceful degradation to understand the concept properly.
Graceful Degradation: Graceful means attractive and Degradation means falling down. This means graceful degradation provides an average level of user experience across browsers, but when it comes to older browsers like Internet explorer, there is a lower level of usability, which means that it gracefully degrades the user experience, and most of the times, the developers will need to provide fixes or patches to make the browser work on those old browsers.
Graceful degradation is the concept that allows the creation of a website that is both feature-rich and still compatible with all browsers that are old versions or not compatible. Graceful degradation helps to create beautiful websites that are accessible to all possible visitors as without sacrificing quality. Web accessibility is a core aspect of web development, influencing the user’s experience as they navigate the site. As a result, accessibility should always be a key factor for your design and development efforts.
Purpose of Graceful degradation: If we want to provide functionality, usability, and accessibility to the user in the case of browser support issues or javascript disabled, then developers need to fix this issue by using graceful degradation. If users can not interact with websites then users disconnect the connection with the site.
Why Use Graceful Degradation?
As we know that nowadays technology makes advances and improves day by day, but it does not proportion to each other. That means all software will not improve with other technologies. An example of this issue, the most programming languages are compatible with most browsers. However, all browsers are not supporting the same features. To solve this problem, Graceful Degradation is come into the picture, in order to ensure accessibility to the user is a task of designers and developers. The reason for using this is that we cannot assume all users will be equally proactive. If you design the application then you will only consider the high level of proactive approach.
Now, with the help of the following example, we will understand how actually Graceful Degradation concept is implemented.
For instance, we want to print the pages and we have a button to print. But the browser does not support the print option or the JavaScript is not enabled. Let’s see what we do using Graceful degradation.
<form>
<input type="button"
value="Print"
id="print"
onclick="javascript:window.print()">
</form>
The option will run if JavaScript is available and enabled, also the browser compatible with the print option. However, if JavaScript is not available then the print will not work by clicking on it, will do nothing at all. This may lead to poor functionality.
To solve this issue, we can go for the graceful degradation approach, i.e., by using <noscript></noscript> element which tell the user that the print option is not compatible or enabled.
<form>
<input type="button"
value="Print"
id="print"
onclick="javascript:window.print()">
</form>
<noscript>
<p class="scriptwarning">
JavaScript is not enabled on your browser.
Please enable JavaScript .
</p>
</noscript>
Example 1: In this example, a browser doesn’t support the <video> format, & it renders the content inside the video element and to continue the execution of the rest of the HTML without any problem. Instead of video, we can try transcripts and images together.
<video>
You can put that the your browser
doesn’t supports video element.
</video>
This gives us accessibility to users with less capable browsers.
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
|
Output:
- Video supported by the browser
Video supported by the browser
- Video element doesn’t support by the browser.
Video element doesn’t support by the browser
Example 2: This is another example that illustrate the graceful degradation in CSS. Here, if any browser doesn’t support bootstrap CSS or external CSS , then the browser will display the only the text of that div in proper order.
div {
display: flex;
}
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: green;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1 style="color:green">Geeksforgeeks</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
|
Output:
- When the browser supports display: flex;
Output with display flex
- When the browser doesn’t support display:flex;
Output without display: flex
Rules for graceful degradation:
- Write standard & semantic HTML.
- Use external stylesheets for layouts and design.
- Use externally linked scripts for functionality.
- Build websites that are accessible to older browsers even without CSS and Javascript.
Advantages of Graceful degradation:
- Less work to patch/fix.
- No time, budget, or ability to switch existing products to PE.
- The website or app is an Edge case.
Disadvantages of Graceful degradation:
- It is a costly method because of maintenance.
- If the website goes under maintenance then the user cannot use it. If it happens over and over then it leads to inaccessibility.
- User may be frustrated because websites goes under maintenance and websites may be lost user.
Share your thoughts in the comments
Please Login to comment...