使用@supports在旧版浏览器中使用现代CSS功能
网络渲染引擎是网络浏览器的一个组件，它读取HTML文档并将其转换（或）渲染成有用的视觉表现。
根据维基百科的说法。
浏览器引擎是每个主要网络浏览器的核心软件组件。浏览器引擎的主要工作是将HTML文档和网页的其他资源转化为用户设备上的互动视觉表现。
网络渲染引擎也被称为布局引擎或浏览器引擎。
有各种浏览器引擎，如
由于有很多网络引擎，某些HTML/CSS功能只在某一版本的浏览器中得到支持。例如，CSSposition: sticky 功能只在Firefox 26及以上版本中支持。在本文中，我们将学习如何通过使用CSS@supports 规则在旧的浏览器中使用现代CSS功能。
前提条件
要继续学习本教程，你应该具备以下条件。
- 有HTML和CSS的基本知识。
- 一个代码编辑器，建议使用VSCode。
学习目的
- 在这篇文章中，我们将探讨浏览器版本和CSS特性之间的关系。
- 我们还将研究
@supports功能查询，并在一个例子中使用它。 - 我们将以CSS规则
position: sticky为例，找到一个变通方法，以便在旧的浏览器上启用它。
浏览器支持方面的问题
由于以下原因，我们的网站可能会遇到某些问题。
- 当浏览器版本不支持该特定功能时。
- 当浏览器的处理方式与它应该的不同，由于一个错误。
- 当浏览器对该功能有部分支持，并且没有默认启用时。
当浏览器版本不支持该特定功能时，我们可以通过引入一个回退来解决这个问题。回退功能使用较早的CSS功能来复制行为。当浏览器有bug时，我们可以通过GitHub向开发者团队提出问题，让它得到修复。
当浏览器对该功能有部分支持时，我们可以通过浏览器标志或配置设置来启用它。
在这篇文章中，我们将集中讨论如何使用@supports 功能查询引入回退。
让我们来演示一下，当一个CSS特性不被网络引擎支持时，可能会出现哪些问题。
例如，下表展示了浏览器对CSS规则position: sticky 的支持情况。
| 浏览器 | 支持的版本 |
|---|---|
| 火狐浏览器 | 26及以上 |
| 边缘浏览器 | 16及以上版本 |
| Safari | 6.1及以上版本 |
| Internet Explorer | 不支持 |
有很大比例的用户使用旧的浏览器版本。新的CSS功能正在定期推出。这使得支持旧版本浏览器的新功能变得不切实际。为了解决这个问题，我们使用@supports 功能查询。
使用@supports的变通方法
@supports CSS规则用于根据浏览器对一个或多个CSS特性的支持来指定CSS规则。这被称为特征查询。
让我们开始建立一个基本的网站来演示@supports 。打开一个文本编辑器，创建一个名为index.html 的文件，并添加以下代码。
<html lang="en">
<head>
<title>CSS @supports</title>
<!--Page Styles-->
<style>
.body {
margin: 0;
}
.hero {
/* Sets the background color of the hero banner */
background-color: blue;
/* Sets padding on all sides */
padding: 2rem;
/* Sticky position sticks and scrolls along with the page */
position: sticky;
width: 100%;
height: 100px;
/* Top property is used to ensure that the hero banner is on the top */
top: 0;
}
.text {
/* Sets the font size */
font-size: x-large;
}
</style>
</head>
<body>
<div class="hero">This is the hero banner.</div>
<!--Placeholder Text-->
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Euismod elementum nisi
quis eleifend quam. Et netus et malesuada fames. Tristique senectus et
netus et malesuada. Mauris pellentesque pulvinar pellentesque habitant
morbi tristique. Ornare quam viverra orci sagittis eu volutpat. Diam vel
quam elementum pulvinar. Fermentum et sollicitudin ac orci phasellus
egestas tellus rutrum tellus. In hac habitasse platea dictumst vestibulum
rhoncus est. Neque aliquam vestibulum morbi blandit cursus risus. Enim
neque volutpat ac tincidunt vitae semper quis. Magna sit amet purus
gravida. Lorem mollis aliquam ut porttitor leo a. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas. Eget nullam non nisi est sit
amet. Lacinia quis vel eros donec ac odio tempor orci dapibus.
Vulputate sapien nec sagittis aliquam malesuada bibendum. Faucibus purus
in massa tempor nec feugiat nisl. Venenatis a condimentum vitae sapien
pellentesque habitant morbi tristique. Sit amet consectetur adipiscing
elit pellentesque habitant. Vestibulum rhoncus est pellentesque elit. Id
porta nibh venenatis cras sed felis eget. Lectus arcu bibendum at varius
vel pharetra vel turpis. Dolor magna eget est lorem ipsum dolor sit amet
consectetur. Sed augue lacus viverra vitae congue. Vel fringilla est
ullamcorper eget nulla facilisi etiam. Tortor dignissim convallis aenean
et tortor. Integer enim neque volutpat ac tincidunt vitae. Sem nulla
pharetra diam sit amet nisl suscipit.
Faucibus turpis in eu mi bibendum. Dignissim suspendisse in est ante in
nibh. Quis imperdiet massa tincidunt nunc pulvinar sapien. Cursus risus at
ultrices mi tempus. Aliquam ut porttitor leo a. Egestas integer eget
aliquet nibh praesent tristique. Adipiscing commodo elit at imperdiet dui.
Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit. Sem
fringilla ut morbi tincidunt augue interdum velit euismod. Sagittis
aliquam malesuada bibendum arcu. Sapien nec sagittis aliquam malesuada
bibendum arcu vitae elementum curabitur. Placerat orci nulla pellentesque
dignissim enim sit amet venenatis urna. Nec tincidunt praesent semper
feugiat nibh sed pulvinar proin. Non enim praesent elementum facilisis leo
vel fringilla. Bibendum neque egestas congue quisque egestas diam in arcu.
Amet commodo nulla facilisi nullam vehicula ipsum. Quisque egestas diam in
arcu cursus euismod quis viverra nibh. Habitasse platea dictumst quisque
sagittis purus sit amet. Sed tempus urna et pharetra pharetra massa massa
ultricies.
A scelerisque purus semper eget duis at tellus. Dolor sit amet consectetur
adipiscing elit. Amet dictum sit amet justo donec. Ut sem viverra aliquet
eget sit amet tellus cras adipiscing. Eu augue ut lectus arcu bibendum at.
Scelerisque purus semper eget duis at tellus at urna. Pulvinar
pellentesque habitant morbi tristique senectus et netus et malesuada.
Aliquam sem et tortor consequat id porta nibh venenatis cras. Nunc vel
risus commodo viverra maecenas. Sed vulputate mi sit amet mauris. Sem
fringilla ut morbi tincidunt augue interdum velit euismod.
Mattis molestie a iaculis at erat. Sapien nec sagittis aliquam malesuada
bibendum arcu vitae elementum. In fermentum posuere urna nec tincidunt
praesent semper. Ac tortor vitae purus faucibus ornare. Elit sed vulputate
mi sit amet. Ullamcorper malesuada proin libero nunc consequat. Ipsum
dolor sit amet consectetur adipiscing elit. Sem fringilla ut morbi
tincidunt augue. Integer malesuada nunc vel risus commodo viverra maecenas
accumsan lacus. Tempor orci eu lobortis elementum. Placerat duis ultricies
lacus sed. Adipiscing enim eu turpis egestas pretium aenean pharetra
magna. In massa tempor nec feugiat nisl. Diam maecenas sed enim ut sem
viverra aliquet eget. Lacinia at quis risus sed vulputate odio. Aliquet
lectus proin nibh nisl condimentum id venenatis. Id venenatis a
condimentum vitae sapien pellentesque. Arcu vitae elementum curabitur
vitae nunc. Non enim praesent elementum facilisis leo vel fringilla. Nisl
pretium fusce id velit ut.
</p>
</body>
</html>
在一个现代浏览器上打开这个文件，如Chrome 90版本。你会注意到，英雄的横幅粘在了上面。试着滚动到底部，你会注意到英雄的旗帜仍然粘在顶部。因此，我们可以确认，position: sticky 的功能是有效的。
在Chrome 90上定位粘性
现在，下载并安装Firefox 22版。在火狐浏览器中打开index.html ，你会注意到英雄横幅没有滚动，因此position: sticky ，该功能不工作。
在Firefox 22上的定位贴
现在让我们用@supports 来解决这个问题。
<style>
body {
margin: 0;
}
.hero {
/* Sets the background color of the hero banner */
background-color: blue;
/* Sets padding on all sides */
padding: 2rem;
/* Sticky position sticks and scrolls along with the page */
position: sticky;
width: 100%;
height: 100px;
/* Top property is used to ensure that the hero banner is on the top */
top: 0;
}
/* If the browser does not support the position: sticky property, the rules within this block are applied */
@supports not (position: sticky) {
.hero {
/* We set the position to be fixed so that the hero banner stays at the top */
position: fixed;
}
body {
/* We set the top margin to be 100px so that the hero banner doesn't overlap the placeholder text */
margin-top: 100px;
}
}
.text {
/* Sets the font size */
font-size: x-large;
}
</style>
如果你在Firefox 22上再次运行它，你会注意到，即使我们滚动到页面的底部，英雄旗帜也会粘在上面。
在上面的例子中，我们使用了@supports 特征查询和not操作符来检查那些不支持position: sticky CSS规则的浏览器。我们在@supports 块中为旧的浏览器指定了一些替代性的CSS规则，这样CSS在旧的浏览器中就不会中断。
还有and和or运算符，可以用来评估各种支持条件。当使用and运算符时，只有当所有的表达式为真时，才会应用相应的块属性。
当我们想让块属性在其中一个表达式为真时被应用时，就可以使用or运算符。例如，我们可以对供应商前缀使用or操作符。
注意：供应商前缀是在属性名称前添加的一串字符。之所以这样做，是因为浏览器实现某些CSS规则的方式与其他浏览器不同。例如，前缀-moz是用于Firefox的特定CSS规则。
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
(-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
/* CSS rules */
}
上面的代码只有在浏览器支持transform-style 属性的情况下才会执行。
@supports (display: table-cell) and (display: grid) {
/* CSS rules */
}
这些CSS规则将只适用于同时支持grid 和table-cell 显示属性的浏览器。
总结
- 在这篇文章中，我们了解了各种网络渲染引擎，以及它们在不同浏览器中的差异。
- 我们看到了某些CSS功能在某些旧版本的浏览器中是如何不被支持的。
- 我们以
position: sticky规则为例，看看它在Firefox 22中是如何失效的。 - 我们使用
@supports功能查询来解决这个问题，并使其在Firefox 22中发挥作用。 - 我们了解了可以与
@supports一起使用的各种条件运算符。
通过使用@supports 功能查询，网络开发者可以确保他们的网站能够在旧版浏览器上完美运行，从而覆盖更多的受众。
