CSS 中的优雅降级是什么？

什么是优雅降级？

如果您是一位经验丰富的 Web 开发人员，您可能以前听说过“优雅降级”这个词。在我们了解 Web 开发中的优雅降级之前，让我们先来分解一下这个词。优雅的意思是优雅或美丽，退化的意思是破碎或倒下。所以，优雅降级这个词的整体含义是，它使功能在崩溃的同时变得优雅。

开发人员在 Web 开发中使用优雅降级术语。它提供了各种技术，使任何网站或应用程序都可以在能力较差的浏览器中正常工作。

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

优雅降级的不同技巧

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

渐进增强

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

最后，加载高级 CSS 功能，如果浏览器支持该功能，则会将其应用于 HTML 元素。否则，网页的 HTML 内容仍然可以访问。所以，这样，即使现代浏览器不支持某些功能，它仍然可以正确渲染 HTML 内容。

特征检测

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

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

示例

在下面的示例中，我们创建了一个div元素并给它一个'id'为'element'。同时，我们在CSS中定义了'class'为'container'的类，并添加了一些CSS属性包含在其中。

在JavaScript中，每当浏览器加载时，我们通过id访问div元素，并检查div元素是否包含'classList'属性。如果是，我们将'container'类名添加到队列中。否则，我们只需将类名连接到类名字符串中。

所以，我们在这里检测了div元素是否支持classList类，根据这一点，我们使用了不同的技术来向div元素添加类名。

雷雷

添加创业选项

优雅降级的另一种技术是添加备用选项。在这种技术中，如果浏览器不支持任何CSS，我们使用另一种CSS来完美显示HTML内容在Web浏览器中。

使用下面的示例，让我们了解如何将回退选项添加到网页中。

示例（为 CSS 修改添加回退选项）

在下面的示例中，我们创建了卡片 div 元素并使用 line-gradient() CSS 函数来设置背景渐变。另外，如果浏览器不支持 Linear-gradient() CSS 函数，我们还编写了后备 CSS。

在输出中，用户可以观察到它显示渐变或背景颜色。

雷雷

示例（添加CSS动画的后备选项）

在下面的示例中，我们添加了 CSS 动画的后备选项。在这里，我们创建了三个 div 元素，并在所有元素中添加了“bounce”动画。 “弹跳”动画将 div 从其位置向上移动并将其设置回其初始位置。

在 JavaScript 中，我们创建一个新的 div 元素并检查其样式是否包含“animation”属性。如果是，动画将自动应用。否则，我们需要使用 JavaScript 向每个 div 元素添加一个“no_animation”类，该类设置“animation: none”。

雷雷

用户在本教程中了解了各种优雅的降级技术。即使浏览器不支持某些功能，所有技术都可以使网页的 HTML 内容有吸引力。

优雅降级的最佳技术是设置公平降级方案。开发人员应仅使用标准的 HTML 和 CSS 属性，以确保在旧版本浏览器中实现优雅降级。

然而，优雅降级的维护成本很高，因为开发人员需要为多个功能添加后备选项。尽管如此，它仍然为从任何网络浏览器访问的访问者提供了流畅的网络体验。

以上是CSS 中的优雅降级是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！