CSS中的feature-queries

学习CSS中的特性查询

场景

当想在新的CSS功能被支持的时候,将新的和旧的CSS混合使用,那么请使用特征查询。

使用

  • 在CSS中使用@support关键字,用法格式类似媒体查询中的@media。
  • 括号中为支持条件(表达式),是一个或一组键值对,存在多个条件时可由逻辑与或非生成新的表达式。
1
2
3
4
5
@supports (display: flex) {
div {
display: flex;
}
}

操作符

  1. not
    放在一个支持条件前产生一个新的表达式,为原条件的否定

    1
    @supports not (transform-origin: 10em 10em 10em)
  2. and
    对两个支持条件表达式做与操作产生一个新的表达式,若两个表达式值都为真则应用大括号中的样式

    1
    @supports (display: table-cell) and (display: list-item)
  3. or
    对两个支持条件做或操作产生一个新的表达式,若有一个表达式值为真则应用大括号中的样式

    1
    @supports (transform-style: preserve) or (-moz-transform-style: preserve)

示例

Grid布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 老式浏览器加载 */
.content {
height: 400px;
background-color: purple;
color: white;
}
/* grid CSS代码 */
@supports (display: grid) {
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
}

在上面的代码中根据对Grid布局的支持情况指定了不同的样式,若浏览器支持Grid布局则会显示如下这样:

若老式浏览器不支持Grid布局则采用紫色背景:

首字下沉(drop caps)

在处理文本段的排版时经常需要进行首字下沉,常用的做法是使用伪元素浮动,不过也有一种较新的属性initial-letter可以实现。

那么将伪元素浮动的方法作为回滚的策略,如下:

1
2
3
4
5
6
7
8
9
p::first-letter {
float: left;
font-size: 5em;
line-height: 1;
font-weight: bold;
margin-right: .2em;
color: #00FFFF;
font-family: serif;
}

若利用CSS的feature-queries并结合initial-letter属性可以更加高效的实现,如下:

1
2
3
4
5
6
7
8
9
10
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
p::first-letter {
-webkit-initial-letter: 5;
initial-letter: 5;
color: #00FFFF;
font-weight: bold;
margin-right: 0.5em;
font-family: serif;
}
}

注意一下,这里用到了逻辑or,由于目前只有Safari 9支持initial-letter因此需要加上前缀-webkit,最好也加上无前缀的版本(未来会支持这个属性)。效果如下:

图像效果

CSS中可以设置很多种的图像效果,使用mix-blend-mods属性可以进行这些操作。

如下面这个例子:

1
2
3
<article class="feature-img">
<img src="example-img.jpg" />
</article>

1
2
3
4
5
6
7
8
9
@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {
.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}

一些老的安卓浏览器需要在linear-gradient前加-webkit前缀。
若浏览器支持混合模式,则会用一层红色渐变色以overlay模式进行混合:

若使用not操作符查询到浏览器不支持混合模式,则使用一个半透明的滤镜:

1
2
3
4
5
6
@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}

问题

对于浏览器是否支持特性查询与指定特性来讲,当浏览器不支持特性查询但支持指定特性时有可能得不到想要的结果。

兼容性


Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

参考

文章目录
  1. 1. 场景
  2. 2. 使用
    1. 2.1. 操作符
  3. 3. 示例
    1. 3.1. Grid布局
    2. 3.2. 首字下沉(drop caps)
    3. 3.3. 图像效果
  4. 4. 问题
  5. 5. 兼容性
  6. 6. 参考
|