极客笔记CSS 什么是优雅降级
什么是优雅降级
如果你是一位有经验的网页开发人员，你可能已经听说过”优雅降级”这个词。在我们学习网页开发中的优雅降级之前，让我们来分解一下这个词。”优雅”的意思是优雅或美丽，”降级”是指破坏或下降。因此，”优雅降级”这个词的整体意思是在功能破坏的同时使其变得优雅。
开发人员在网页开发中使用”优雅降级”这个术语。它提供了各种技术，以便任何网站或应用程序在功能较差的浏览器中可以正确运行。
例如，现代浏览器支持高级的CSS和JavaScript特性，但不支持旧版本的浏览器。在这种情况下，开发人员需要确保用户可以在旧版本的浏览器中正常访问网站。
优雅降级的不同技术
在上述部分，我们学习了什么是优雅降级以及开发人员为什么要确保它。现在，我们将学习不同的技术和示例来实现优雅降级。
渐进增强
在这种技术中，开发人员需要将代码分解为不同的包，并逐个加载每个包。因此，首先成功加载网页的HTML，然后加载每个浏览器都支持的普通CSS。
最后，加载高级CSS特性，如果浏览器支持该特性，则将应用于HTML元素。否则，网页的HTML内容仍然可以访问。所以，即使现代浏览器不支持某些特性，它仍然可以正确渲染HTML内容。
功能检测
在这种方法中，我们检查浏览器是否支持特定的JavaScript特性。如果是的话，网站允许用户使用该特性来为HTML内容设置样式。否则，我们可以显示一些错误消息或对HTML内容应用不同的样式。
让我们通过下面的示例来了解它。
示例
在下面的示例中，我们创建了一个div元素，并给它一个’id’为’element’。同时，我们在CSS中定义了一个名为’container’的类，并将一些CSS属性包含在其中。
在JavaScript中，当浏览器加载时，我们通过id访问div元素，并检查该元素是否包含’classList’属性。如果是的话，我们将’class’名添加到数组中。否则，我们将简单地将’class’名连接到’class’名字符串中。
因此，我们在这里检测了div元素是否支持classList，并根据这一结果使用了不同的技术将class名添加到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函数设置背景渐变。同时，我们编写了一个备用CSS，如果浏览器不支持linear-gradient() 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属性，以确保在旧版浏览器中实现优雅降级。
然而，优雅降级的维护成本较高，因为开发人员需要为多个功能添加备用选项。但是，它可以为从任何网页浏览器访问的访问者提供流畅的网络体验。