码云前端开发 2020-02-18

@supports开始支持selector选择器检测啦

文章目录隐藏

语法
@supports 规则基本用法
兼容性
案例

1. 当前浏览器是否支持的判断
2. 伪类是否支持的判断
3. 逻辑操作符使用案例示意
4. 更复杂的选择器

结语

@supports 是 CSS3 新引入的规则之一，主要用于检测当前浏览器是否支持某个 CSS 属性并加载具体样式。

语法

@supports selector(选择器) {
   /* CSS rules here */
}

当然也支持 not、and 和 or 等操作符。

@supports 规则基本用法

@supports 规则基本用法是用来判断 CSS 声明的知否支持的，例如：

/* 支持 Flex 布局 */
@supports (display: flex) {}
/* 不支持 Flex 布局 */
@supports not (display: flex) {}
/* 同时支持 Flex 布局和 Grid 布局 */
@supports (display: flex) and (display: grid) {}
/* 支持 Flex 布局或者支持 Grid 布局 */
@supports (display: flex) or (display: grid)  {}

甚至连续判断三个以上的 CSS 声明也没问题：

/* 合法 */
@supports (display: flex) and (display: grid) and (gap: 0) {}
@supports (display: flex) or (display: grid) or (gap: 0) {}

语法如下：

 = ( <var> ) | not ( <var> ) | ( <var> ) [ and (<var>) ]+ | ( <var> ) [ or (<var>) ]+</var></var></var></var></var></var>

可以看出下面几个特点：

如果都是 and 操作符，可以无限极连
如果都是 or 操作符，可以无限极连
and 和 or 操作符不能直接混用，and 和 not 操作符不能直接混用，or 和 not 操作符不能直接混用。

复杂逻辑 supports 规则的操作符嵌套规则其实很简单：合法的逻辑语句放在合法的逻辑语句的括号里不断嵌套！

语法表示就是：

<var> = <declaration> | <supports-condition>

例如，“判断当前浏览器支持 Flex 布局，但不支持 Grid 布局”这样的问题，可以先把正确的基础语法写好：

@supports (display: flex) and (不支持 Grid 布局)  {}

然后“不支持 Grid 布局”的基础语法是 not (display: grid)，语法嵌套下（替换括号里面的内容），于是得到正确的写法：

@supports (display: flex) and (not (display: grid))  {}

Edge12-Edge15 浏览器正好是符合上面的条件判断的，我们不妨验证下：

<span class="supports-match">如果有背景色，则是匹配</span>

.supports-match {
    padding: 5px;
    border: 1px solid;
}
@supports (display: flex) and (not (display: grid))  {
    .supports-match {
        background-color: #333;
        color: #fff;
    }
}

结果在 Edge14 浏览器下的效果如下图，Chrome 浏览器下则只有边框。

@supports 规则还支持 CSS 自定义属性（CSS 变量）的检测判断支持：

@supports (--var: blue) {}

不过就是实际开发的时候，就算判断了也没什么用。

兼容性

目前仅 Firefox 浏览器一骑红尘，一马当先：

所以本文还是蛮超前的，哈哈哈。

案例

1. 当前浏览器是否支持的判断

.result-a:before {
    content: '当前浏览器不支持 selector()语法';
    color: red;
    padding: 5px;
    border: solid;
}
/* span 标签选择器所有浏览器都支持，可以用来判断 selector()语法的支持情况 */
@supports selector(span) {
    .result-a:before {
        content: '当前浏览器支持 selector()语法';
        color: green;
    }
}

上面 CSS 代码的实际效果如下，如果您当前访问的浏览器并不支持 selector()语法，则下面会显示红色的不支持文字，如果您当前访问的浏览器支持 selector()语法，则显示的会是绿色的文字。

2. 伪类是否支持的判断

/* 如果支持:default 伪类怎样怎样... */
@supports selector(:default) {
    .result-b:before {
        content: '当前浏览器支持 selector()语法，同时支持:default 伪类';
        color: green;
        padding: 5px;
        border: solid;
    }
}

如果你当前浏览器支持 selector()语法，同时支持:default 伪类，则下面会看到提示内容。

例如在 Firefox 浏览器下是这样的：

3. 逻辑操作符使用案例示意

.result-c:before {
    padding: 5px;
    border: solid;
    color: red;
    content: '当前浏览器不支持 selector()语法，无法判断是否支持:target-within 伪类'; 
}
/* 如果不支持:target-within 伪类怎样怎样... */
@supports not selector(:target-within) {
    .result-c:before {
        content: '当前浏览器支持 selector()语法，但是不支持:target-within 伪类';    
    }
}

实时效果如下：

结果很出人意料的，Chrome 浏览器下居然提示“支持 selector()语法”：

后来一测试发现，@supports 规则支持的语法函数并不一定非要是 selector()，任意的都可以，例如：

/* 语法 OK */
@supports a(b) {}

上面这个不知道什么鬼的 a(b)判断条件，Chrome 和 Firefox 都会认为这个语法是合法的，但是由于没有任何浏览器匹配这个判断条件，因此花括号里面的 CSS 是绝对不会不应用。

但是如果我们使用的是 not 操作符，那情况就大不一样了。

/* Chrome 和 Firefox 都会判断通过 */
@supports not a(b) {}

因此，我们使用 not 操作符的时候应该这样写才行：

@supports (not selector(:target-within)) and selector(a) {
    .result-c:before {
        content: '当前浏览器支持 selector()语法，但是不支持:target-within 伪类';    
    }
}

4. 更复杂的选择器

@supports selector(:nth-child(1n of a, b)) {
    /* 当:is(…)选择器和:nth-child(…)选择器同时支持的时候 CSS 才会被应用 */
    :is(:nth-child(1n of ul, ol) a, details > summary) {
       … 
    }
}