什么是优雅降级？
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
在上面的部分中，我们了解了什么是优雅降级以及为什么开发人员应该确保它。现在，我们将通过示例学习不同的优雅降级技术。
Progressive Enhancement
在这种技术中，开发人员需要将代码分解成不同的包，并逐个加载每个包。因此，成功加载网页的HTML，然后加载每个浏览器都支持的普通CSS。
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
在这种方法中，我们检查浏览器是否支持特定的JavaScript功能。如果是，网站允许用户使用该功能来相应地样式化HTML内容。否则，我们可以显示一些错误消息或对HTML内容应用不同的样式。
让我们通过下面的示例来理解。
Example
在下面的示例中，我们创建了一个div元素并给了它一个'id'为'element'。同时，我们在CSS中定义了'class'为'container'的类，并将一些CSS属性包含在其中。
在JavaScript中，每当浏览器加载时，我们通过id访问div元素，并检查div元素是否包含'classList'属性。如果是，我们将'container'类名添加到数组中。否则，我们只是将类名连接到类名字符串中。
所以，我们在这里检测了div元素是否支持classList类，根据这一点，我们使用了不同的技术来向div元素添加类名。
<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 id="Using-the-i-feature-detection-technique-i-for-the-graceful-degradation-in-the-web-development">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>
添加备选选项
优雅降级的另一种技术是添加备用选项。在这种技术中，如果浏览器不支持任何CSS，我们使用另一种CSS来完美显示HTML内容在Web浏览器中。
使用下面的示例，让我们了解如何将回退选项添加到网页中。
示例（为CSS渐变添加回退选项）
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 id="Using-the-i-fallback-options-for-the-gradient-i-for-the-graceful-degradation-in-the-web-development">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 id="Using-the-i-fallback-options-for-the-animation-i-for-the-graceful-degradation-in-the-web-development">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.
优雅降级的最佳技术是设置备选方案。开发人员应仅使用标准的HTML和CSS属性，以确保在旧版浏览器中实现优雅降级。
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.
The above is the detailed content of What is Graceful Degradation in CSS?. For more information, please follow other related articles on the PHP Chinese website!
Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AMThis is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AMThis tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PMThe CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Working With GraphQL CachingMar 19, 2025 am 09:36 AMIf you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AMThe Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AMIn this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
Show, Don't TellMar 16, 2025 am 11:49 AMHow much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AMnpm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver Mac version
Visual web development tools
