CSS的简介@supports Rule（功能查询）

钥匙要点

• > CSS中的@supports规则允许开发人员实现功能检测，检查浏览器是否支持某些CSS属性/值对并相应地应用样式。这是一种逐步增强方法来处理对高级技术的不平衡浏览器支持的一部分。
• > @supports规则语法包括逻辑运算符，例如“ and”，“ or”和“不”，允许一次测试多个条件。将括号的正确使用在将条件分组在一起时至关重要。
> JavaScript可以与CSS接口和supports（）函数一起使用javascript与CSS特征查询。此函数返回一个布尔值，指示浏览器是否支持特定的CSS属性。
• >大多数现代浏览器都支持@Supports规则，但Internet Explorer 11和Opera Mini却没有。因此，开发人员应定义所有目标浏览器都可以处理的基础样式，并使用@supports覆盖和补充可以处理新功能的浏览器。
• >解决浏览器对最新技术的不均匀支持的两种一般方法是优雅的降级和渐进式增强。

优雅的降级利用高级技术来设计用于复杂的用户体验和功能。能力较低的浏览器的用户仍然能够访问该网站，但功能和浏览体验水平下降。

> 通过逐步增强，开发人员通过设计大多数浏览器可以支持的用户体验来建立基线。他们的应用程序提供了浏览器功能的内置检测，它们用来使其提供更先进的功能和更丰富的浏览体验。

>

>渐进式增强方法中最广泛采用的工具是Modernizr JavaScript库。

现代izr编程检查浏览器是否支持下一代Web技术，并因此返回True还是False。凭借这些知识，您可以利用新功能来支持浏览器，并且仍然具有可靠的餐饮方式。

>

听起来不错，有一段时间以来酿造的东西甚至更好。您可以使用本机CSS功能查询执行功能检测

在这篇文章中，我将更深入地研究@supports及其关联的JavaScript API。

>使用@supports Rule

检测浏览器功能

> @supports规则是CSS3条件规范规范的一部分，其中还包括我们所有人在响应式设计工作中使用的更广泛的@Media规则。

>使用媒体查询时，您可以检测显示功能，例如视口宽度和高度，@supports允许您检查CSS属性/值配对的浏览器支持。>>>>

考虑一个基本示例，可以说您的网页显示了您想使用CSS融合来增强的艺术品。的确，CSS混合模式在非支持浏览器中优雅地降低。但是，您可能希望通过显示同样特殊的东西（即使不是同样壮观）来使非支持浏览器的用户默认显示的内容，而不是默认情况下显示的内容。这就是您将如何使用@supports在样式表中执行CSS混合的支票：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

>将不同的样式应用于没有混合模式支持的浏览器，您将使用此语法：>

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

有几件事要注意：

您要测试的状况必须在括号内。换句话说，@supports mix-blend模式：覆盖{...}无效。但是，如果您添加的括号比所需的更多，则代码可以。例如，@supports（（（mix-blend mode：offlay））是有效的。
• >
条件必须包括属性和值。在上面的示例中，您正在检查该属性的混合模式属性和覆盖值。
• 添加尾声！在您要测试的声明中很重要不会影响您的代码的有效性。
>让我们用一个小的演示充实上面的示例。具有混合模式支持的浏览器将在@supports（）{...}块中应用样式；其他浏览器将在@supports Not（）{...}块中应用样式

html：

CSS：

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

>在Codepen上查看演示：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

>请参阅codepen上的sitepoint（@sitepoint）的笔@supports Rule Demo。

一次测试多个条件

在使用@support进行功能测试时，您不仅限于一次测试条件。结合逻辑运算符，例如和或和或和或已提到的未运算符，您可以一次测试多个功能。

和

连接

操作员测试是否存在多个必需

>条件：

： >通过使用或关键字，您可以测试一组样式的多个替代功能。如果其中一些替代方案需要供应商的属性或价值前缀：>

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

>您还可以在相同的@supports规则中与OR结合或与OR进行测试条件：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

当您将许多条件分组在一起时，括号的正确使用至关重要。拥有和，或者，而不是混合关键字无效。另外，您对括号内的条件进行分组的方式建立了评估它们的顺序。在上面的摘要中，首先评估析取或条件，然后根据和关键字引入的进一步要求的条件评估结果答案。

>非关键字可让您一次测试一个条件。例如，下面的代码无效：

>

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

相反，您需要对

进行分组>与括号内的非关键字否定的条件。这是以上片段的更正版本：>

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

>最后，请确保您在一个和或或或或或或。

行动中的操作员

如果浏览器使用以下语法支持渐变和混合模式，则可以应用一组样式（我将下面的代码分为多行以出于显示目的）：

由于一些较旧的Android浏览器需要线性梯度的-webkit-前缀，所以让我们通过将这种进一步的条件纳入@Supports块来检查浏览器支持：

>

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

>假设您的网站使用亮度和饱和混合模式，在撰写本文时，Safari不支持。您仍然想为这些浏览器提供替代样式，因此，您可以使用@supports不使用@supports设置适当的连接条件，

本节的所有演示都可以在Codepen上获得：

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

>请参阅@supports by sitepoint（@sitepoint）上的多个功能测试的笔演示。

带有CSS功能查询的JavaScript

>

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

>您可以使用JavaScript CSS接口和supports（）函数来利用CSS功能查询。您可以通过两种方式中的任何一个编写CSS.Supports（）函数。>

>较早和最广泛支持的语法采用两个参数，即 property

>和

value

，并返回一个布尔值为或false值：

确保您将属性及其相应的值放置在报价中。该规范明确指出，如果以下两个条件符合以下两个条件：>

• >该属性是浏览器支持的“ CSS属性名称的字面匹配”；
该值将“成功解析为该属性的支持值”。

字面匹配

规范意味着CSS ESCAP不会处理，并且没有修剪空白。因此，不要逃脱角色或留下尾随的空白，否则测试将返回false。 替代性，较新的语法在括号内只有一个参数：>

使用此语法使用和 /或关键字进行多种条件进行测试。

这是一个快速示例。假设您想测试浏览器是否支持亮度混合模式。如果这样做，您的JavaScript会动态地向目标元素添加一类光度混合物，否则它将添加一类NoluminIsity。然后，您的CSS将相应地对元素进行样式。

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

这是CSS：

如果您遵循两项词语语法，则JavaScript代码段可能如下：>

如果您喜欢最新的单词语语法，只需将上面代码的相应行替换为下面的代码线：>

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

可以随时查看演示：

>请参阅codepen上的sitepoint（@sitepoint）的CSS特征查询的笔JavaScript API。

<span><span><span><article</span> class<span>="artwork"</span>></span>
</span>  <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></article</span>></span></span>

>浏览器支持

>除了Internet Explorer 11和Opera Mini外，主要浏览器的所有最新版本都支持@Supports规则。 @supports已为现实世界做好准备吗？我用蒂法尼·布朗（Tiffany Brown）的话找到了这个问题的最佳答案：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

…要警惕@supports中定义关键任务风格…

> 定义您的基本样式 - 您的目标

>的每一种样式 浏览器可以处理。然后使用@supports…覆盖和补充

浏览器中的这些样式可以处理新功能。

> CSS Master，p.303

结论

>在本文中，我使用@supports Rule（又称功能查询）探索了本机CSS浏览器功能检测。我还浏览了相应的JavaScript API，它使您可以使用Flexible CSS.Supports（）方法来检查最新CSS属性的浏览器支持。
浏览器对CSS功能查询的支持很好，但不能涵盖所有基础。但是，如果您想在项目中使用@supports，则正如蒂法尼·布朗（Tiffany Brown）所建议的那样，CSS文档中的策略性放置以及Han Lin Yap的CSS-Support.js Polyfill可以提供帮助。

如果您尝试了本文中的演示或使用@supports拥有真实的经验，我很想听到您的来信。

>关于CSS @Supports规则

的常见问题

> CSS @supports规则是什么？它如何工作？

> 是的，您可以使用逻辑运算符在CSS @Supports规则中使用多个条件。 “和”操作员允许您检查是否支持多个功能，而“或”操作员检查至少一个功能是否支持。 “非”操作员检查是否不支持功能。例如，@supports（显示：网格）和（显示：flex）{ / *如果支持网格和flex的样式 * /}。 CSS功能？

>您可以通过在@supports规则中使用“非”操作员来检查浏览器是否不支持CSS功能。例如，@supports not（Display：Grid）{ / *如果不支持网格，则要应用 * /}。如果浏览器不支持CSS Grid。

>如果浏览器不支持@supports Rule，如果浏览器不支持 @ @>支持规则，它将忽略整个规则，包括其中的样式。这意味着您可以安全地使用@supports，而不必担心在较旧的浏览器上打破网站。但是，为不支持您要使用@supports测试的功能的浏览器提供后备样式。 @supports规则，就像您可以嵌套其他CSS规则一样。这使您可以以更复杂的方式测试支持多个功能的支持。例如，您只有在浏览器支持CSS网格和Flexbox。支持规则是CSS中特征检测的可靠方法，但并不完美。一些较旧的浏览器不支持@supports，一些浏览器可能会报告误报或负面因素。在多个浏览器中测试您的网站总是一个好主意，以确保其按预期工作。

我可以使用@supports规则使用JavaScript？ CSS功能支持CSS.Supports（）方法。此方法与@supports规则相似，但允许您在JavaScript代码中动态测试功能支持。

是否有任何工具可以检查浏览器对CSS功能的支持？最受欢迎的是我可以使用，它可以提供有关浏览器支持的最新信息。是的，您可以将@support与媒体查询结合使用，以根据功能支持和视口尺寸应用样式。这对于创建还利用新CSS功能的响应式设计非常有用。

>

> @supports规则有哪些常见用例？

>

@supports规则通常用于仅在浏览器支持时，才能应用高级CSS功能，从而逐步增强网站。这可以包括CSS网格，Flexbox，自定义属性等内容。它也用于为不支持这些功能的浏览器提供后备样式。

>

以上是CSS的简介@supports Rule（功能查询）的详细内容。更多信息请关注PHP中文网其他相关文章！