DDR爱好者之家

CSS中@support实现渐进式网页设计实例代码
站长资源 2024/11/23 佚名
77 1538
DDR爱好者之家 Design By 杰米

前言

特性查询赋予了我们使用CSS检测浏览器是否支持某个css特性的能力。我们可以使用该功能在浏览器支持最新的CSS特性时，使用新的语法来编写我们的样式，同时对于不支持的浏览器进行优雅降级。

CSS的设计本身就是支持优雅降级的。对于浏览器不支持的CSS语法，在浏览器解析时会被忽略。因此，我们只要在编写样式时先满足低版本浏览器的视觉完整性，再针对支持高级特性的浏览器进行渐进式样式设计即可。但有时候这并不能满足我们的需求：当我们需要一系列的样式组合来实现我们的视觉效果时，如果浏览器对我们使用的一系列样式中的某一个CSS特性不支持，有可能出现样式错乱的情况。

基本使用

@support的基本语法与@media十分相似

.selector {
/* property supported in old browsers  */
}
@support (property: value) {
/* property supported in new browsers */
}

特性查询语句由@support关键字开头，加上一个条件语句和包含在一个大括号内的CSS规则组成。我们可以现在特性查询语句外写旧浏览器支持的样式，然后再在特性查询语句中写浏览器支持某些新特性时的新样式。

div {
  display: flex;
}
@support (display: grid) {
  div {
    display: grid;
  }
}

在该示例中，我们先用flex布局实现旧浏览器支持的布局样式，然后更进一步我们可以在支持display: grid;属性的新浏览器中使用grid布局快乐的玩耍了。

条件语句中的组合条件检测

在特性查询语句的支持条件中我们有时候可能需要同时查询浏览器对多个CSS属性的支持情况来觉得如何组织我们的渐进式样式。这种时候我们可以用and、or、not这三种布尔操作来组合我们的查询条件。

布尔操作符

and操作符可以对两个表达式的结果进行逻辑与操作，即只有当两个表达式都为真的时候，则生成的表达式也为真，否则为假。多个逻辑与表达式可以直接并列成一排，表示所有表达式都为真的时候，整体的求值才为真。

@support (display: table-cell) and (display: list-item) and (display:run-in) {
/* some style here */
}

or操作符可以对两个表达式的结果进行逻辑或操作，即只要两个表达式有一个为真的时候，则生成的表达式也为真，否则为假。多个逻辑或表达式也可以直接并列成一排，表示所有表达式只有有一项为真的时候，整体的求值就为真。

@support (-webkit-mask-image: -webkit-linear-gradient(right,transparent,#000)) or (mask-image: linear-gradient(-90deg,transparent,#000)) {
  /* some style here */
}

not操作符一般放在表达式的前面表示对原表达式的否定，即求值为真的表达式加上not操作符后表示假，求值为假的表达式加上not后表示真。

@support not (display: flex) {
  div {
    float: left;
  }
}

组合条件检测

布尔操作符也可以组合起来使用，但必须用括号来显示的隔离不用的布尔操作符，以避免优先级造成的混乱

@support (display: flexbox) and ( not (display: inline-grid) ) {
/* some style here */
}

CSS.supports

在JavaScript中有一个与特性查询语句相对应的API，window.CSS.supports。这个方法接受一个与CSS特性查询语句的查询条件类似的字符串作为参数，或者接受两个参数，一个代表属性名，一个代表属性值。

CSS.support('(display: flex) and(not(display: line-grid)');
CSS.support('display', 'grid');

这个API可以和CSS的特性查询配合使用，当我们的浏览器支持某些更高级特性的时候，设计一些渐进式功能。

兼容性

每个CSS特性使用最后都离不开谈兼容性。特性查询是在2011年就已经发布的草案，多年来支持程度已经比较可观了，除了IE系列全军覆没之外，其他主流浏览器都能够很好的支持。

CSS中@support实现渐进式网页设计实例代码

参考

  • @support
  • CSS.support

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米