css中@supports特性检测

2019-05-31255次阅读css3css

一些CSS新属性或实验性功能样式能极大提升用户体验以及减少工程师的工作量,但浏览器兼容性并不好。所以就有了优雅降级和渐进增强的说法:

渐进增强(Progressive Enhancement)

一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation)

一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少。大多数软件都是向下兼容的,比如说Office2010能打开Office2007,Office2006,Office2005,Office2003等建的word文件,但是用Office2003就不能打开用Office2007,Office2010等建的word文件!

@supports

CSS @supports通过CSS语法来实现特性检测,判断当前浏览器对某个特性是否支持,实现渐进增强的效果。

语法:

@supports <supports_condition> {
    /* specific rules */
}


举个例子:

@supports (position:sticky) {
    div {
        position:sticky;
    }
}

如果当前浏览器支持@supports语法,并且支持position:sticky语法实现黏性定位,那么div的则会被设置为position:sticky。

@supports not -- 非

@supports not (background: linear-gradient(90deg, red, yellow)) {
    div {
        background: red;
    }
}

如果检测到浏览器不支持线性渐变background: linear-gradient(90deg, red, yellow) 的语法,则将div的颜色设置为红色background: red 。

@supports and -- 与

类似javascript的&&运算符符。用and操作符连接两个原始的表达式。只有两个原始表达式的值都为真,生成的表达式才为真,反之为假。

p {
    overflow: hidden;
    text-overflow: ellipsis;
}
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

上面同时,检测 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了三个语法,如果同时支持,则设定三个 CSS 规则。这三个语法必须同时得到浏览器的支持,如果表达式为真,则可以用于实现多行省略效果:

@supports or -- 或

与javascript的||运算符类似,表达式中只要有一个为真,则生成表达式表达式为真。

@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){
    div {
        background:-webkit-linear-gradient(0deg, yellow, red);
        background:linear-gradient(90deg, yellow, red)
    }
}

上面的例子中,只有检测到浏览器支持 background:-webkit-linear-gradient(0deg, yellow, red) 或者(or) background:linear-gradient(90deg, yellow, red) 其中一个,则给 div 元素添加渐变。

当然,关键字not还可以和and或者or混合使用。感兴趣的可以自己尝试一下。@supports浏览器兼容性直接Can i use上查看吧。

CSS.supports()作为@supports的另一种形式出现的,我们可以使用javascript的方式来获得CSS属性的支持情况。

CSS.supports('display', 'flex')  // true
CSS.supports('position', 'sticky')  // true
上一篇: js编码函数escape(),encodeURI(),encodeURIComponent()简介  下一篇: css实现按钮背景色渐变过渡  

css中@supports特性检测相关文章