什么是CSS中的优雅降级？

Cascading Style Sheets（CSS）在网页设计中是不可或缺的一部分。它允许我们控制我们的页面在不同设备和浏览器上的外观和感觉。优雅降级是一种开发网页的方法，以确保网页向前兼容性。在不支持最新的浏览器和设备下的表现，能够有一个更兼容的和有利的降级方案。

为什么需要优雅降级？

当浏览器或设备不支持制定的功能时，网页应该以一种合理、稳定的方式进行回退。这保证了网站的用户体验远离任何问题，并为每个访问者提供了最佳的使用体验。有时你会听到不同网站上的CSS代码不兼容某些用户，在某些浏览器或设备上看起来不好。通过降级策略，优雅地进行，可以改善用户体验并避免许多兼容性问题。

要实现优雅的降级，你需要检测您要使用的CSS功能，并在不支持该功能的浏览器和设备上提供备用方案。可以用以下方法进行实现。

可以先采用基于媒体查询和流媒体查询的体系结构来设计样式表。简而言之，媒体查询可以帮助我们识别可用的视口尺寸，并在必要的情况下应用特定的样式。例如，如果您正在考虑在小屏幕设备上使用 CSS 列表，则可以使用以下代码：

@media screen and (max-width: 600px) {
  .list {
    width: 100%;
    font-size: 15px;
    margin: 0 0 20px;
  }
}

这告诉浏览器，如果当前屏幕宽度小于或等于 600px，则应将列表的样式更改为 100% 宽度，15px 字体大小和将其底部上的 margin 更改为 20px。

您可能希望使用高级 CSS 属性，如 box-shadow 或 transform，但是这些属性某些新浏览器和设备上的版本可能尚未得到支持。为了解决这个问题，可以使用 CSS 后备性质。下面是一个使用 box-shadow 和 color 的代码的例子：

.button {
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
}

在这个例子中，box-shadow 属性应用于所有浏览器并将包括支持的颜色（规范的值），但 -moz-box-shadow 和 -webkit-box-shadow 这些属性会被调用，并将特定版本的 Mozilla 和 WebKit 引擎浏览器用于支持。

在某些情况下，您可能还需要使用 Polyfills。这是 JavaScript 库，用于在没有支持的浏览器中提供新的符合标准的 API。下面是一个使用Polyfills的例子：

$(document).ready(function() {

if (!Modernizr.inputtypes.date) {
  $('input[type=date]').datepicker({
  });
}});

在这个例子中，由于 Mozilla 和Webkit 引擎的大部分版本并不支持 input[type=date]的HTML5标准，所以我们使用JQuery UI库来模拟这个效果，这样即使使用一个更旧版本的浏览器也可以看到这个表单元素。

CSS的优雅降级对于开发人员来说是一项不可或缺的技能。这是一种确保您的网站可以适应访问者的最佳方式，并提供最佳用户体验的方法。您可以使用上述方法中的任何一种，根据您的网站和设备的需求来实现优雅降级。