CSS 中的优雅降级是什么?
什么是优雅降级?
如果您是一位经验丰富的 Web 开发者，您可能之前听说过"优雅降级"这个词。在了解 Web 开发中的优雅降级之前，让我们先来分析一下这个词。优雅的意思是优雅或美丽，而降级的意思是崩溃或倒塌。因此，"优雅降级"一词的总体含义是，它使功能在崩溃的同时变得优雅。
开发者在 Web 开发中使用"优雅降级"这个术语。它提供了各种技术，使任何网站或应用程序都能在性能较差的浏览器中正常运行。
例如，现代浏览器支持高级 CSS 和 JavaScript 功能，但旧版浏览器或旧版本的浏览器不支持这些功能。在这种情况下，开发者需要确保用户能够在旧版浏览器中获得良好的访问体验。
优雅降级的不同技术
在上一节中，我们了解了什么是优雅降级以及开发者为何应该确保它。现在，我们将通过示例学习优雅降级的不同技术。
渐进增强
在这种技术中，开发者需要将代码分解成不同的包，并逐个加载每个包。这样，网页的 HTML 就能成功加载，然后加载每个浏览器支持的常规 CSS。
最后，加载高级 CSS 功能，如果浏览器支持该功能，它将被应用于 HTML 元素。否则，网页的 HTML 内容仍然可以访问。这样，即使现代浏览器不支持某些功能，它仍然可以正确呈现 HTML 内容。
功能检测
在这种方法中，我们检查浏览器是否支持特定的 JavaScript 功能。如果支持，网站允许用户使用该功能相应地设置 HTML 内容的样式。否则，我们可以显示一些错误消息或对 HTML 内容应用不同的样式。
让我们通过下面的示例来理解。
示例
在下面的示例中，我们创建了 div 元素并赋予了"element"id。此外，我们在 CSS 中定义了"container"类，并在其中包含了一些 CSS 属性。
在 JavaScript 中，每当浏览器加载时，我们都会通过 id 访问 div 元素，并检查 div 元素是否包含"classList"属性。如果是，我们将"container"类名添加到数组中。否则，我们只需将类名连接到类名字符串即可。
因此，我们在这里检测了 div 元素是否支持类列表，并据此使用了不同的技术向 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>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 来在 Web 浏览器中完美显示 HTML 内容。
通过以下示例，让我们了解如何向网页添加回退选项。
示例(为 CSS 渐变添加回退选项)
在下面的示例中，我们创建了 card div 元素，并使用 line-gradient() CSS 函数设置了背景渐变。此外，我们还编写了当浏览器不支持 linear-gradient() CSS 函数时使用的回退 CSS。
在输出中，用户可以观察到它显示的是渐变色还是背景色。
<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>
示例(为 CSS 动画添加 fallback 选项)
在下面的示例中，我们添加了 CSS 动画的 fallback 选项。我们创建了三个 div 元素，并在所有元素中添加了"bounce"动画。"bounce"动画会将 div 从其位置向上移动，然后将其设置回初始位置。
在 JavaScript 中，我们创建一个新的 div 元素，并检查其样式是否包含"animation"属性。如果包含，则动画将自动应用。否则，我们需要使用 JavaScript 为每个 div 元素添加"no_animation"类，从而设置"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>
用户在本教程中了解了各种优雅降级技术。所有技术都能使网页的 HTML 内容更具吸引力，即使浏览器不支持某些功能。
优雅降级的最佳技术是设置回退选项。开发者应仅使用标准 HTML 和 CSS 属性，以确保在旧版浏览器中实现优雅降级。
然而，优雅降级的维护成本很高，因为开发者需要为多项功能添加回退选项。尽管如此，它仍然能够为使用任何 Web 浏览器的访问者提供流畅的 Web 体验。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
