浅谈CSS3特点查寻(Feature Query: @supports)作用简介

日期:2021-03-02 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

大家早已了解应用新闻媒体查寻(Media Query)来检验显示屏尺寸,从而完成回应式页面设计方案。

而特点查寻则用来查寻客户代理商(如桌面上访问器)是不是适用某个CSS3的特点,这个作用除IE以外,已被别的访问器所适用。

英语的语法文件格式

@supports <supports-condition> {
  <group-rule-body>
}

特点查寻应用@supports标准(和新闻媒体查寻@media相近,全是应用1个@标记前缀:at-rule),该CSS标准容许大家把CSS款式写在标准块中,这样仅有在当今客户代理商适用1个特殊的CSS特性值对(property-value pair)的情况下才被运用。

举个简易的事例,假如大家要为适用延展性框(flexbox)特点的访问器界定款式,能够像下面这样写:

@supports ( display: flex ) {
    .foo { display: flex; }
}

一样的,和新闻媒体查寻标准相近,可使用1些逻辑性实际操作符(如and、or和not),并适用串接在1起:

@supports (display: table-cell) and (display: list-item) {
    … /* your styles */
}
 
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 不适用justify时,用这里的编码来仿真模拟text-align-last:justify */
}

应用案例

检验动漫特点:

@supports (animation-name: test) {
    … /* 当UA适用无前缀animations特点时的特殊款式 */
    @keyframes { /* @supports 做为1个CSS标准组at-rule,能够包括别的at-rules */
      …    
    }
}

检验自定特性:

@supports (--foo: green) {
  body {
    color: green;
  }
}

标准情况

尚处在候选强烈推荐CR(Candidate Recommendation)情况,标准连接:CSS Conditional Rules Module Level 3.

访问器适配性

桌面上系统软件:

挪动机器设备:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。