supports_CSS的@supports规则简介（功能查询）

最新推荐文章于 2024-08-08 14:27:26 发布

culi3182

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量1k

点赞数

文章标签： java javascript css python js ViewUI

原文链接：https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/

版权

supports

The two general approaches to tackling browsers’ uneven support for the latest technologies are graceful degradation and progressive enhancement.

解决浏览器对最新技术的不均衡支持的两种通用方法是平稳降级和逐步增强 。

Graceful degradation leverages advanced technologies to design for sophisticated user experiences and functionality. Users of less capable browsers will still be able to access the website, but will enjoy a decreased level of functionality and browsing experience.

顺畅的降级利用先进的技术来设计，以提供精致的用户体验和功能。能力较低的浏览器的用户仍然可以访问该网站，但功能和浏览体验将有所下降。

With progressive enhancement, developers establish a baseline by designing for a level of user experience most browsers can support. Their applications provide built-in detection of browsers’ capabilities, which they use to make available more advanced functionality and richer browsing experiences accordingly.

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

The most widely adopted tool in a progressive enhancement approach is the Modernizr JavaScript library.

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

Modernizr programmatically checks if a browser supports next generation web technologies and accordingly returns true or false. Armed with this knowledge, you can exploit the new features in supporting browsers, and still have a reliable means of catering to older or noncompatible browsers.

Modernizr以编程方式检查浏览器是否支持下一代Web技术，并相应地返回true或false 。掌握了这些知识之后，您就可以利用支持浏览器中的新功能，并且仍然可以使用可靠的方式来适应较旧的或不兼容的浏览器。

As good as this sounds, something even better has been brewing for some time. You can perform feature detection using native CSS feature queries with the @supports rule.

听起来不错，但是一段时间以来，甚至更好的东西正在酝酿中。您可以使用带有@supports规则的本机CSS功能查询来执行功能检测。

In this post I’m going to delve deeper into @supports and its associated JavaScript API.

在本文中，我@supports深入地研究@supports及其关联JavaScript API。

使用`@supports`规则检测浏览器功能 (Detecting Browser Features with the `@supports` Rule)

The @supports rule is part of the CSS3 Conditional Rules Specification, which also includes the more widespread @media rule we all use in our responsive design work.

@supports规则是CSS3条件规则规范的一部分，该规范还包括我们在响应式设计工作中广泛使用的@media规则。

While with media queries you can detect display features like viewport width and height, @supports allows you to check browser support for CSS property/value pairs.

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

To consider a basic example, let’s say your web page displays a piece of artwork that you’d like to enhance using CSS blending. It’s true, CSS blend modes degrade gracefully in non supporting browsers. However, instead of what the browser displays by default in such cases, you might want to delight users of non supporting browsers by displaying something equally special, if not equally spectacular. This is how you would perform the check for CSS blending in your stylesheet with @supports:

考虑一个基本示例，假设您的网页上显示了您希望使用CSS blending增强的艺术品。的确，CSS混合模式在不支持的浏览器中会正常降级。但是，不是在这种情况下浏览器默认显示的内容，您可能希望通过显示同样特别的东西(如果不是同样出色)来使不支持浏览器的用户满意。这是使用@supports在样式表中执行CSS混合检查的@supports ：

@supports (mix-blend-mode: overlay) {

  .example {
    mix-blend-mode: overlay;
  }

}

To apply different styles for browsers that don’t have mix-blend-mode support, you would use this syntax:

要将不同的样式应用于不支持mix-blend-mode浏览器，请使用以下语法：

@supports not(mix-blend-mode: overlay) {

  .example {
    /* alternative styles here */
  }

}

A few things to note:

注意事项：

The condition you’re testing must be inside parentheses. In other words, @supports mix-blend-mode: overlay { ... } is not valid. However, if you add more parentheses than needed, the code will be fine. For instance, @supports ((mix-blend-mode: overlay)) is valid.
您要测试的条件必须在括号内。换句话说， @supports mix-blend-mode: overlay { ... }无效。但是，如果您添加了多余的括号，那么代码就可以了。例如， @supports ((mix-blend-mode: overlay))是有效的。
The condition must include both a property and a value. In the example above, you’re checking for the mix-blend-mode property and the overlay value for that property.
条件必须同时包含属性和值。在上面的示例中，您正在检查mix-blend-mode属性和该属性的overlay值。
Adding a trailing !important on a declaration you’re testing for won’t affect the validity of your code.
在要测试的声明上添加尾随!important不会影响代码的有效性。

Let’s flesh out the examples above with a small demo. Browsers with mix-blend-mode support will apply the styles inside the @supports() { ... } block; other browsers will apply the styles inside the @supports not() { ... } block.

让我们通过一个小示例来充实上面的示例。具有mix-blend-mode支持的浏览器将在@supports() { ... }块内应用样式；其他浏览器将在@supports not() { ... }块内应用样式。

The HTML:

HTML：

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

The CSS:

CSS：

@supports (mix-blend-mode: overlay) {

  .artwork img {
    mix-blend-mode: overlay;
  }

}

@supports not(mix-blend-mode: overlay) {

  .artwork img {
    opacity: 0.5;
  }

}

Check out the demo on CodePen:

在CodePen上查看演示：

See the Pen @supports Rule Demo by SitePoint (@SitePoint) on CodePen.

见笔@supports规则演示由SitePoint( @SitePoint )上CodePen 。

一次测试多个条件 (Testing for Multiple Conditions at Once)

When doing feature tests with @supports, you’re not limited to one test condition at any one time. Combining logical operators like and, or, and the already mentioned not operator allows you to test for multiple features at once.

使用@supports进行功能测试时，您不会一次受限于一种测试条件。将逻辑运算符(如and ， or )与已经提到的not运算符结合使用，可以一次测试多个功能。

The and conjunction operator tests for the presence of multiple required conditions:

的and为多个所需的条件存在下一起操作者测试：

@supports (property1: value1) and (property2: value2) {
  element {
    property1: value1;
    property2: value2;
  }
}

By using the disjunctive or keyword, you can test for the presence of multiple alternative features for a set of styles. This is particularly handy if some of those alternatives need vendor prefixes for their properties or values:

通过使用析取 or关键字，您可以测试一组样式是否存在多个替代功能。如果其中一些替代方案的属性或值需要供应商前缀，则这特别方便：

@supports (property1: value1) or (-webkit-property1: value1) {
  element {
    -webkit-property1: value1;
    property1: value1;
  }
}

You can also combine and with or, testing conditions in the same @supports rule:

您还可以在相同的@supports规则中结合and与or测试条件：

@supports ((property1: value1) or 
          (-webkit-property1: value1)) and 
          (property2: value2) {
  element {
    -webkit-property1: value1;
    property1: value1;
    property2: value2;
  }
}

When you group a number of conditions together, the correct use of parentheses is crucial. Having and, or, and not keywords mixed together won’t work. Also, the way you group the conditions inside parentheses establishes the order in which they get evaluated. In the snippet above, the disjunctive or conditions are evaluated first, then the resulting answer is evaluated against a further required condition introduced by the and keyword.

当您将多个条件组合在一起时，正确使用括号至关重要。将and ， or ，和关键字not混合在一起将不起作用。同样，将条件分组在括号内的方式也确定了评估条件的顺序。在上面的代码段中，先评估析取条件or条件，然后根据and关键字引入的另一个所需条件评估结果答案。

How to group conditions for multiple checks

The not keyword lets you test for one condition at a time. For instance, the code below is not valid:

not关键字可让您一次测试一种情况。例如，以下代码无效：

@supports not (property1: value1) and (property2: value2) {
  /* styles here... */
}

Instead, you need to group all the conditions you’re negating with the not keyword inside parentheses. Here’s the corrected version of the snippet above:

相反，您需要使用括号内的not关键字对所有要排除的条件进行分组。这是上面代码段的更正版本：

@supports not ((property1: value1) and (property2: value2)) {
  /* styles here... */
}

Finally, make sure you leave white space after a not and on both sides of an and or or.

最后，确保你离开后的空白not和的两侧and或or 。

行动中的运营商 (The Operators in Action)

You can apply a set of styles if the browser supports both gradients and blend modes using the following syntax (I’ve broken the code below into multiple lines for display purposes):

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

@supports (mix-blend-mode: overlay) and 
  (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) {

  .artwork {
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }

  .artwork img {
    mix-blend-mode: overlay;
  }

}

Because some older Android browsers require the -webkit- prefix for linear gradients, let’s check for browser support by incorporating this further condition into the @supports block:

由于某些较旧的Android浏览器要求使用-webkit-前缀来实现线性渐变，因此，我们通过将此进一步的条件合并到@supports块中来检查浏览器是否支持：

@supports (mix-blend-mode: luminosity) and 
  (
    (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) or 
    (background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)))
  ) 

{

  .artwork {
    background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }

  .artwork img {
    mix-blend-mode: luminosity;
  }

}

Let’s say your website uses luminosity and saturation blend modes which, at the time of writing, are not supported in Safari. You still want to provide alternative styles for those browsers, so here’s how you can set up the appropriate conjunctive condition using @supports not with and:

假设您的网站使用luminosity和saturation混合模式，在撰写本文时，Safari不支持该模式。您仍然想为这些浏览器提供其他样式，因此这是使用@supports not和and来设置适当的联合条件的方法：

@supports not (
    (mix-blend-mode: luminosity) and 
    (mix-blend-mode: saturation)
  ) 
{

  .artwork img {
    mix-blend-mode: overlay;
  }

}

All the demos for this section are available on CodePen:

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

See the Pen Demos on Multiple Feature Testing with @supports by SitePoint (@SitePoint) on CodePen.

见笔上的多个特性测试演示与@supports由SitePoint( @SitePoint上) CodePen 。

具有CSS功能查询JavaScript (JavaScript with CSS Feature Queries)

You can take advantage of CSS Feature Queries using the JavaScript CSS Interface and the supports() function. You can write the Css.supports() function in either of two ways.

您可以使用JavaScript CSS接口和supports()函数来利用CSS功能查询。您可以通过两种方式之一来编写Css.supports()函数。

The earlier and most widely supported syntax takes two arguments, i.e., property and value, and returns a boolean true or false value:

较早且得到最广泛支持的语法采用两个参数，即property和value ，并返回布尔值true或false ：

CSS.supports('mix-blend-mode', 'overlay')

Make sure you place the property and its corresponding value inside quotes. The specification makes clear that the above function returns true if it meets the following two conditions:

确保将属性及其对应的值放在引号中。规范明确指出，如果上述函数满足以下两个条件，则返回true ：

The property is a “literal match for the name of a CSS property” that the browser supports;
该属性是浏览器支持的“ CSS属性名称的字面匹配”。
The value would be “successfully parsed as a supported value for that property”.
该值将被“成功解析为该属性的支持值”。

By literal match the specification means that CSS escapes are not processed and white space is not trimmed. Therefore, don’t escape characters or leave trailing white space, otherwise the test will return false.

通过文字匹配，该规范意味着不处理CSS转义并且不修剪空格。因此，请不要转义字符或在结尾留空白，否则测试将返回false 。

The alternative, newer syntax takes only one argument inside parentheses:

另一种更新的语法仅在括号内使用一个参数：

CSS.supports('(mix-blend-mode: overlay)')

Using this syntax makes it convenient to test for multiple conditions with the and and or keywords.

使用此语法可以方便地使用and和or关键字测试多个条件。

Here’s a quick example. Let’s say you’d like to test if the browser supports the luminosity blend mode. If it does, your JavaScript will dynamically add a class of luminosity-blend to the target element, otherwise it will add a class of noluminosity. Your CSS will then style the element accordingly.

这是一个简单的例子。假设您要测试浏览器是否支持luminosity混合模式。如果是这样，您JavaScript将向目标元素动态添加一个luminosity-blend类，否则它将添加一个noluminosity类。然后，您CSS将相应地设置元素的样式。

Here’s the CSS:

这是CSS：

.luminosity-blend {
  mix-blend-mode: luminosity;
}

.noluminosity {
  mix-blend-mode: overlay;
}

If you follow the two-argument syntax, the JavaScript snippet could be as follows:

如果遵循两个参数的语法，则JavaScript代码段可能如下所示：

var init = function() {
  var test = CSS.supports('mix-blend-mode', 'luminosity'),
  targetElement = document.querySelector('img');

  if (test) {
    targetElement.classList.add('luminosity-blend');
  } else {
    targetElement.classList.add('noluminosity');
  }

};

window.addEventListener('DOMContentLoaded', init, false);

If you prefer the newest, single-argument syntax, simply replace the corresponding line of code above with the one below:

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

var test = CSS.supports('(mix-blend-mode: luminosity)')

Feel free to check out the demo:

随时查看演示：

See the Pen JavaScript API for CSS Feature Queries by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 用于CSS功能查询的Pen JavaScript API 。

浏览器支持 (Browser Support)

All the latest versions of the major browsers have support for the @supports rule except for Internet Explorer 11 and Opera Mini. Is @supports ready for the real world? I’ve found the best answer to this question in Tiffany Brown’s words:

除Internet Explorer 11和Opera Mini外，所有主要浏览器的所有最新版本均支持@supports规则。 @supports是否已为现实做好了准备？用蒂芙尼·布朗的话，我找到了这个问题的最佳答案：

… be wary of defining mission-critical styles within @supports … Define your base styles – the styles that every one of your targeted browsers can handle. Then use @supports … to override and supplement those styles in browsers that can handle newer features.

…警惕在@supports中定义关键任务样式…定义您的基本样式-每个目标浏览器都可以处理的样式。然后使用@supports…在可以处理较新功能的浏览器中覆盖和补充这些样式。

CSS Master, p.303

CSS大师，p.303

结论 (Conclusion)

In this article, I explored native CSS browser feature detection with the @supports rule (a.k.a feature queries). I also went through the corresponding JavaScript API, which lets you check the current state of browser support for the latest CSS properties using the flexible Css.supports() method.

在本文中，我探讨了使用@supports规则(也称为功能查询)的本地CSS浏览器功能检测。我还介绍了相应JavaScript API，该API可让您使用灵活的Css.supports()方法检查浏览器支持的最新状态，以获取最新CSS属性。

Browser support for CSS feature queries is good but doesn’t cover all your bases. However, if you’d like to use @supports in your projects, strategic placement of styles in your CSS document, as Tiffany Brown suggests, and the css-supports.js polyfill by Han Lin Yap can help.

浏览器对CSS功能查询的支持很好，但不能涵盖您的所有基础。但是，如果您想在项目中使用@supports ，则可以按照Tiffany Brown的建议，在CSS文档中战略性地放置样式，而Han Lin Yap的css-supports.js polyfill可以提供帮助。

If you tried out the demos in this article or have had real world experience using @supports, I’d love to hear from you.

如果您尝试了本文中的演示，或者使用@supports有实际经验，我很乐意听取您的意见。