This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
When using new or experimental CSS, it can be useful to know if the browser supports the features we’re writing code for.
当使用新CSS或实验CSS时，了解浏览器是否支持我们正在为其编写代码的功能会很有用。
Feature detection is often done in JavaScript with tools like Modernizr but in some browsers, we can now detect capabilities from CSS.
功能检测通常是通过JavaScript和Modernizr等工具完成的，但是在某些浏览器中，我们现在可以检测CSS的功能。
The @supports rule allows us to conditionally apply styles for features that are or are not supported.
@supports规则允许我们有条件地为不支持的功能应用样式。
In this episode we’ll learn all about
在这一集中，我们将学习所有有关
Browser support for various CSS features 浏览器对各种CSS功能的支持How the @supports at-rule works
@supports规则的工作原理
and how to provide alternative styles for unsupported features 以及如何为不支持的功能提供替代样式If you’ve been writing CSS for any length of time, you’ve probably discovered that not all browsers render things the same way and don’t all support the same features.
如果您编写CSS已有一段时间，则可能会发现并非所有的浏览器都以相同的方式呈现事物，并且并非都支持相同的功能。
A fantastic resource that I use almost daily for checking browser support is the website caniuse.com.
我几乎每天都在检查浏览器支持方面使用的一种奇妙资源是caniuse.com网站。
This site allows you to search a database of support tables to find out which versions of which browsers support which features.
该站点允许您搜索支持表的数据库，以找出哪些浏览器的哪个版本支持哪些功能。
In the previous episode, we learned about the :required pseudo class, which is supported in IE10, Firefox, Chrome, Safari, Opera and Blackberry but not Opera Mini or iOS Safari or Android Browser.
在上一集中，我们了解了:required伪类，它在IE10，Firefox，Chrome，Safari，Opera和Blackberry中受支持，但Opera Mini或iOS Safari或Android Browser不支持。
We also learned about @keyframes in “Episode 11: @keyframes“. which are supported in all current browsers apart from Opera Mini but is only available in IE from version 10 and is prefixed in Chrome, Safari, Opera, Android and Blackberry.
我们还在“ 第11集： @keyframes ”中了解了@keyframes 。 除Opera Mini之外，当前所有浏览器均支持该功能，但仅在版本10的IE中可用，并且在Chrome，Safari，Opera，Android和Blackberry中具有前缀。
As you can see, the feature support landscape is vast and complex. This resource is amazing and an integral part of knowing what will work under what browsing conditions. It allows us to decide what features we may need to provide fallbacks for in case the required feature is key to the design or functionality of the site.
如您所见，功能支持范围广阔而又复杂。 该资源是惊人的，并且是了解在什么浏览条件下将起作用的重要组成部分。 如果所需的功能是站点设计或功能的关键，它使我们可以决定需要哪些功能来提供后备功能。
@supports is an at-rule, a bit like the @media queries which we looked at in “Episode 13: Media Queries“.
@supports是一个规则，有点像我们在“ 第13集：媒体查询 ”中介绍的@media查询。
These at-rules apply styles contained within them, only if a condition is true.
仅当条件为真时，这些规则才会应用其中包含的样式。
The condition is contained within parentheses and contains a CSS property followed by a value, separated by a colon.
该条件包含在括号内，并包含CSS属性，后跟一个值，并用冒号分隔。
@supports (property: value) { /* styles applied if the condition is true */ }If the CSS property inside the brackets accepts a value with the specified syntax, the condition is true.
如果方括号内CSS属性接受具有指定语法的值，则条件为true。
If we wanted to detect support for unprefixed CSS animations, we could use the following snippet:
如果我们想检测对无前缀CSS动画的支持，可以使用以下代码段：
@supports (animation-name: test) { body {background: #cc3f85;} }Here I’m using a visual cue of making the background of the page pink to show whether the feature is supported or not. We can see that the background is still black, so unprefixed animations are not supported in Chrome, which is what I’m currently using here.
在这里，我使用视觉提示使页面background变成粉红色，以显示是否支持该功能。 我们可以看到background仍然是黑色的，因此Chrome不支持无前缀的动画，这就是我目前在这里使用的动画。
@supports (animation-name: test) or (-webkit-animation-name: test) { body {background: #cc3f85;} }We can use the keyword or to check multiple properties or multiple vendor prefixes. In this case, the background does change color, which tells me that Chrome supports the webkit prefixed version of the animation property.
我们可以使用关键字or检查多个属性或多个供应商前缀。 在这种情况下， background确实会更改颜色，这告诉我Chrome支持animation属性的webkit前缀版本。
It’s also possible to specify multiple conditions with and or to negated a condition with the not keyword.
也可以使用and或用not关键字否定一个条件来指定多个条件。
We can use these support conditions to check for features but we can also use them to provide fallback styles in the case where a feature isn’t supported.
我们可以使用这些支持条件来检查功能，但是在不支持功能的情况下，我们也可以使用它们来提供后备样式。
I’ve got an image here with a caption positioned over the top of it. The caption has a semi-transparent background using hsla which we covered way back in “Episode 3: CSS color Syntax“.
我在这里有一个图像，其标题位于其顶部。 该标题使用hsla具有半透明的背景，我们在“ 第3集：CSS color语法 ”中进行了介绍 。
hsla isn’t supported in old versions of IE so users of that browser will see no background at all. Due to the nature of this image and the color of the text, the caption is barely legible which is a real usability problem.
IE的旧版本不支持hsla ，因此该浏览器的用户将看不到任何background 。 由于该图像的性质和文本的颜色，标题几乎难以辨认，这是一个实际的可用性问题。
We could create the default style with a solid background color that fits the design and then use @supports to add the semi-transparent background if the feature is available.
我们可以使用适合设计的纯background颜色创建默认样式，然后使用@supports添加半透明background如果可用)。
.caption { background: #000; } @supports (background: hsla(0, 0%, 0%, 0.5) { .caption { background: hsla(0,0%,0%,0.5); } }You could argue that this is a little long winded and a much more common approach to this particular problem would be to just allow the hsla declaration to override the solid background as follows:
您可能会争辩说，这需要花费很长的时间，而针对此特定问题的更常见的处理方法是仅允许hsla声明覆盖如下的可靠背景：
.caption { background: #000; background: hsla(0,0%,0%,0.5); }This simple approach works fine in this case, but if we wanted to add a lot of CSS if a certain feature was or wasn’t supported, we’d need something more comprehensive.
这种简单的方法在这种情况下可以正常工作，但是如果我们想要添加或支持某些功能(如果不支持某些功能)CSS，则需要更全面的功能。
A good example would be something like flexbox which is a completely different layout model for creating complex user interfaces.
一个很好的例子是像flexbox这样的东西，它是用于创建复杂用户界面的完全不同的布局模型。
We could start with a float or position based layout as a good solid base, but then detect flexbox with @supports and take advantage of all the features that new layout engine provides.
我们可以从基于浮动或位置的布局作为良好的坚实基础开始，然后使用@supports检测@supports并利用新布局引擎提供的所有功能。
Here I’ve made an app-like header bar which shows the name of the view with back and forward buttons to the left and right. To get this effect, we can use a combination of absolute positioning and text-align center.
在这里，我制作了一个类似于应用程序的标题栏，该标题栏使用向左和向右按钮向左和向右显示视图的名称。 为了获得这种效果，我们可以结合使用绝对定位和文本居中对齐。
However, with flexbox support, we can just set the nav container to display:flex and justify-content with space-between to equally space the three elements out.
但是，有了flexbox支持，我们可以将nav容器设置为display:flex ，并在两端之间留有space-between justify-content ，以将三个元素均等地隔开。
We could wrap the flexbox styles in an @supports rule and wrap the fallback styles with one for not (display:flex).
我们可以将flexbox样式包装在@supports规则中，并将后备样式包装为not (display:flex)样式not (display:flex) 。
nav { background: #eee; padding: 10px; } @supports not (display:flex) { nav { text-align: center; } .nav-back { position: absolute; left: 1em; } .nav-forward { position: absolute; right: 1em; } } @supports (display:flex) { nav { display: flex; justify-content: space-between; } .nav-back, .nav-forward { position: static; } }It’s worth noting that browsers that don’t support flexbox, almost certainly don’t support @supports so to make this backwards compatible, the @supports not (display:flex) condition would have to be removed.
值得注意的是，不支持flexbox的浏览器，几乎可以肯定不支持@supports因此要使其向后兼容，必须删除@supports not (display:flex)条件。
While I’m really looking forward to this feature gaining more traction, it’s still a long way off being useful as the browser support for @supports itself is quite limited.
尽管我真的很期待此功能获得更多的关注，但由于浏览器对@supports本身的支持非常有限，因此它的实用性还有很长的路要走。
In the meantime, I tend to use the Modernizr JavaScript library for feature detection instead.
同时，我倾向于使用Modernizr JavaScript库进行特征检测。
This will add classes to the html element like flexbox if the feature is supported or no-flexbox if it’s not. These can then be used in place of the @supports rule:
如果该功能受支持，则会将类添加到html元素(如flexbox如果no-flexbox支持，则将其添加到no-flexbox 。 然后可以使用这些代替@supports规则：
nav { background: #eee; padding: 10px; } .no-flexbox { nav { text-align: center; } .nav-back { position: absolute; left: 1em; } .nav-forward { position: absolute; right: 1em; } } .flexbox { nav { display: flex; justify-content: space-between; } .nav-back, .nav-forward { position: static; } }Feature detection and cross-browser support are an important but often frustrating part of front-end design and development. But with the tools we’ve looked at here, hopefully, some of that pain can be eased and we can continue to focus on just making awesome websites.
功能检测和跨浏览器支持是前端设计和开发的重要但通常令人沮丧的部分。 但是，希望借助我们在这里介绍的工具，可以减轻一些痛苦，并且我们可以继续专注于制作出色的网站。
翻译自: https://www.sitepoint.com/atoz-css-screencasts-supports/
