浏览器原生Modernizr-在CSS中使用@supports

一个前端开发人员在工作时经常会问：有哪些CSS被哪些浏览器支持，然后为不被支持的CSS属性编写回退方案，这些工作通常花费他们大部分时间。这时候，一些浏览器特性检测工具，如Modernizr应运而生。但是它们没有涵盖所有的情况，而且有更多的javascript需要加载和运行。

理想的情况下，应该有一个原生的方法用于检测哪些CSS属性被所有浏览器支持。通过@supports和JavaScript CSS.supports()方法，我可以做到这一点。在本教程中，将专注于CSS的编写。

特性检测语法:

作为一个@-规则，@supports的写法就和媒体查询@mediaqueries的写法一样。可以认为是一种CSS的“if”语句。例如，检测浏览器是否支持vm单位。

@supports ( width: 75vw ) {
    /* rules for CSS browsers with vw unit support */
}
                            

or运算符在你需要检查某些带厂商前缀的属性是否被浏览器支持时，是非常有用的。

@supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
/* code for browsers with flexbox support */
}                               
                            

你同样可以使用and运算符。例如检测浏览器是否同时支持currentColor和HSL color。

@supports ( color: currentColor ) and ( color: hsl(0,50%,30%) {
/* code for browsers with currentColor and hsl support */
}                           
                            

下面是not运算符的写法：

@supports not (display: inline-grid) {
/* CSS browsers that do not support CSS grids */
}                                
                            

and、or、not运算符可以在更为复杂的条件中使用。

浏览器支持

支持@supports的浏览器有：Firefox，Chrome，Android (4.4+) 和 Opera，但是Safari 和 Internet Explorer不支持它。