亚博全站APP官网登录-官方入口

亚博全站APP官网登录-官方入口

全国服务热线

15160294924
15160294924

亚博全站APP登录-浏览器原生modernizr: CSS support

作者:亚博全站APP官网登录   发布时间:2022-06-16   点击量:

本文摘要:前端开发工程师的心中一直萦绕着这样一个问题:这么写可以吗。

前端开发工程师的心中一直萦绕着这样一个问题:这么写可以吗。判断CSS支持哪些浏览器,在不支持的浏览器中优雅降级,这些事情险些占用了开发的大部门时间。

亚博全站APP登录

像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仅在支持的浏览器中才会有效,其他的无效。

亚博全站APP登录

这句话其实不完全对,我们一会儿会说到。在不支持的浏览器中使用@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,那么在第一个段落的第一行执行小型大写样式,然后为的伪元素添加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);}这段剧本会查找隐藏的文本:如果没有找到,剧本会为段落建立一个回退,并应用在标签中,这样在不支持OpenType的浏览器中也能实现首行小型大写了。效果如下:总结虽然使用@supports另有争议,但在这篇文章中,我展示了让每个浏览器都能使用的方法:你可以在的伪元素内里添加文本让Javascript检测,或者运用多重样式名代表你想要测试的特性,就像Modernizr这样,不外我们使用的是原生Javascript和CSS。《前端视察》专注于网站前端设计与前端开发、纯粹的前端技术分享。

更多前端文章请订阅本头条号,也可以关注微信订阅号qianduanguancha(长按可复制)。


本文关键词:亚博全站APP官网登录,亚博全站APP登录

本文来源:亚博全站APP官网登录-www.intzk.com

推荐新闻 MORE+

微信二维码 亚博全站APP官网登录-官方入口微信二维码
联系我们

电话:15160294924
手机:15160294924
Q Q:373774502
邮箱:admin@intzk.com
联系地址:澳门特别行政区澳门市澳门区明来大楼765号

Copyright © 2006-2021 www.intzk.com. 亚博全站APP官网登录科技 版权所有

备案号:ICP备52574600号-4