什么是CSS中的优雅降级？

什么是优雅降级？

如果您是一位有经验的Web开发人员，您可能之前听说过“优雅降级”。在学习Web开发中的优雅降级之前，让我们分解一下这个词。优雅的意思是优美或美丽，而降级则是指下降或垮掉。因此，“优雅降级”一词的总体含义是，在功能崩溃的同时，使其功能更加优美。

开发人员在Web开发中使用“优雅降级”一词。它提供了各种技术，以便任何网站或应用程序可以在性能不佳的浏览器中正常工作。

例如，现代浏览器支持高级的CSS和JavaScript功能，但不支持较旧的浏览器或浏览器的旧版本。在这种情况下，开发人员需要确保用户可以在旧的浏览器中访问网站并以良好的体验使用。

优雅降级的不同技术

在上面的部分中，我们学习了优雅降级是什么，以及为什么开发人员应该确保它。现在，我们将通过示例学习不同的优雅降级技术。

渐进式增强

在这种技术中，开发人员需要将代码分解为不同的包，并逐个加载每个包。因此，首先成功加载网页的HTML，然后加载每个浏览器都支持的普通CSS。

最后，加载先进的CSS功能，如果浏览器支持该功能，则将其应用于HTML元素。否则，网页的HTML内容仍然可以访问。因此，即使现代浏览器不支持某些功能，它仍然可以正确呈现HTML内容。

功能检测

在这种方法中，我们检查浏览器是否支持特定的JavaScript功能。如果是，则允许网站用户使用该功能根据需要样式化HTML内容。否则，我们可以显示一些错误消息或对HTML内容应用不同的样式。

让我们通过下面的示例来理解它。

示例

在下面的示例中，我们创建了一个带有“element”ID的div元素。此外，我们在CSS中定义了“container”类，并将一些CS属性包含在其中。

在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>在Web开发中使用功能检测技术进行优雅降级</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函数设置背景渐变。此外，我们写了回退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>在Web开发中使用回退选项进行优雅降级</h3>
   <div class = "card"> 这是一个卡片元素 </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>在Web开发中，为优雅退化设置回退选项<i></i>的使用方法</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>