前端开发工程师的心中一直萦绕着这样一个问题：这么写可以吗。判断CSS支持哪些浏览器，在不支持的浏览器中优雅降级，这些事情险些占用了开发的大部门时间。像Modernizr这样的特性检测工具很大水平上资助解决了这样的问题，可是不是所有的情况都适用，而且会加载许多我们不需要的Javascript。
理想状态下，我们需要一个原生方法资助我们检测浏览器中支持的CSS，并让我们直接找到这些特性，其实我们可以通过@supports和Javascript的CSS.support()方法来实现这个目的。在本文中，我会说明一下这个属性的CSS规范，包罗不支持浏览器中的Javascript方案。
特性检测语句作为@规则，@supports的书写方式跟@mediaqueries一样，可以把它想成是一种CSS形式的if声明。例如，我们要检测浏览器是否支持vw单元：@supports ( width: 75vw ) {/* 支持vw单元浏览器的CSS规则 */}注意圆括号中的条件必须以有效CSSproperty: value的形式书写，@supports (vw) { }这样写是无效的。
你也可以使用or语句，在检测带有浏览器前缀属性的时候会很有资助：@supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex ){/* 支持flexbox浏览器的代码 */}你也可以使用and来添加条件，例如，可以使用以下语句来检测浏览器是否同时支持CSS的currentColor和HSL color属性：@supports ( color: currentColor ) and ( color: hsl(0,50%,30%) {/* 支持currentColor和HSL浏览器的代码 */}再次重申，书写什么CSS代码并不重要，只要代码有效就行。最后——也可能是最没用的——条件：not语句：@supports not (display: inline-grid) {/* 不支持CSS grid浏览器的代码 */}and、or和not可以混淆使用以应对庞大情况。支持情况现在Firefox、Chrome、Android（4.4+）和Opera支持@supports，Safari和IE还不支持，这样会导致一个矛盾：@supports仅在支持的浏览器中才会有效，其他的无效。
这句话其实不完全对，我们一会儿会说到。在不支持的浏览器中使用@supports我们其实可以在不支持CSS规则或Javascript方法的浏览器中间接使用@supports，我写过一篇关于使用Open Type实现真正的小型大写的文章，其中一条评论提出了使用@supports解决问题的例子：我们不能同时使用font-variant: small-cap和OpenType，这意味着那些不支持OpenType的浏览器会显示小写的文本，这个问题可以使用@supports方法解决，这种解决方案让我想起了我最近写的一篇文章用CSS媒体查询触发Javascript：@font-face {font-family: Questa Grande;src: url(Questa_Grande_Regular.otf) ;}p { font-family: Questa Grande, sans-serif; font-size: 2rem; }@supports ( -moz-font-feature-settings: "smcp=1" )or ( -moz-font-feature-settings: "smcp" )or ( -ms-font-feature-settings: "smcp" )or ( -o-font-feature-settings: "smcp" )or ( -webkit-font-feature-settings: "smcp" )or ( font-feature-settings:"smcp") {p:first-of-type:first-line {-moz-font-feature-settings: "smcp=1";-moz-font-feature-settings: "smcp";-ms-font-feature-settings: "smcp";-o-font-feature-settings: "smcp";-webkit-font-feature-settings: "smcp";font-feature-settings:"smcp";}body:before { content: 'small-caps'; display: none; }}这段代码的意思是：如果浏览器支持OpenType，那么在第一个段落的第一行执行小型大写样式，然后为<body>的伪元素添加small-caps的文本并隐藏。
这其实是我们给Javascript的一个“信息”：var smallcaps = window.getComputedStyle(document.body, ':before' ).content;if (smallcaps!== "small-caps") {var css = document.createElement('style');var styles = 'p:first-of-type:first-line { font-variant: small-caps }';if (css.styleSheet){ css.styleSheet.cssText = styles; }else {css.appendChild(document.createTextNode(styles))}document.getElementsByTagName("head")[0].appendChild(css);}这段剧本会查找隐藏的文本：如果没有找到，剧本会为段落建立一个回退，并应用在<head>标签中，这样在不支持OpenType的浏览器中也能实现首行小型大写了。效果如下：总结虽然使用@supports另有争议，但在这篇文章中，我展示了让每个浏览器都能使用的方法：你可以在<body>的伪元素内里添加文本让Javascript检测，或者运用多重样式名代表你想要测试的特性，就像Modernizr这样，不外我们使用的是原生Javascript和CSS。《前端视察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号，也可以关注微信订阅号qianduanguancha（长按可复制）。
本文关键词：浏览器,原生,modernizr,CSS,support,亚博2022最新版官网,前端,开发
本文来源：亚博2022最新版官网-www.haishenproperty.com