数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学什么是 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 来完美地显示网页浏览器中的 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 动画添加回退选项）
在下面的示例中，我们添加了 CSS 动画的回退选项。在这里，我们创建了三个 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 体验。
浏览量：123
