2020年你不应该错过的CSS新特性

实现上图的效果代码非常的简单：

form:focus-within {
    box-shadow: 0px 0.2em 2.5em #c4c4c4;
    transform: scale(1.025); 
}

对于:focus-visible伪类来说，当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见时就会生效。这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

简单点说，按键盘tab键和鼠标点击得到的焦点效果不同。比如：

/* 链接得到焦点时的样式 */ 
a:focus { 

}

/* 
* 1\. 如果链接有焦点，但是浏览器通常不会显示默认的焦点样式，会覆盖上面的焦点样式 
* 2\. 不是按键盘`tab`键让链接得到的焦点，比如说鼠标点击链接
*/
a:focus:not(:focus-visible) {

}

/* 按键盘tab键让链接得到焦点的样式 */ 
a:focus-visible { 

}

来看一个具体的案例(https://codepen.io/airen/pen/GRZPPVR)。这个示例中分别用鼠标点击链链和按键盘tab键让链接得到焦点，它的样式是不一样的：

如果你对Web可访问性（A11Y）方面感兴趣的话，还可以阅读：

• 【双11盖楼互动技术大揭秘】创建可访问性网站并不是想得那么难(https://www.atatech.org/articles/154459)

• 如何构建有温度的互动项目(https://www.atatech.org/articles/163878)

• 如何快速修复Web可访问性存在的问题(https://www.atatech.org/articles/164846)

CSS Color Level 4(https://www.w3.org/TR/css-color-4) 和 Level 5(https://www.w3.org/TR/css-color-5) 两个模块主要是为我们推出了一些颜色使用的新属性，比如：

•  ：HWB(白色-白色-黑色的缩写)是另一种指定颜色的方法，类似于HSL，它描述了一开始的色调，然后是一定程度的白色和黑色混合到基本色调

• 和 ：Lab是由一个亮度通道和两个颜色通道组成的。在Lab颜色空间中，每个颜色用L(亮度)、a(从绿色到红色的分量)和b(从蓝色到黄色的分量)三个数字表示。而Lch分别表示了颜色的亮度、饱和度和色调

•  ：灰色是完全去饱和的颜色，gray()函数表示法简化了对这组常见颜色的指定，因此只需要一个数值参数，用来指定颜色的灰度

•  ：该函数允许在特定的颜色空间中指定颜色

•  ：该函数是以CMYK(青色、品红、黄色和黑色)组合，在该设备上生成特定的颜色

•  ：根据用户操作系统来匹配颜色

• color-mix() ：该函数接受两个规范，并在给定的颜色空间中以指定的数量返回它们混合的结果

• color-contrast() ：该函数首先使用一种颜色(通常是背景色)，然后使用两种或两种以上颜色的列表，它从该列表中选择亮度对比度最高的颜色到单一颜色

• color-adjust() ：该函数接受一个规范，并通过指定的转换函数在给定的颜色空间中返回调整该颜色的结果 颜色扩展：根据现有的颜色(在这称为“原始颜色”)在函数的目标颜色空间中生成颜色，它是、、、、、和的扩展颜色

对于Web开发者来说，最大的感受是语法规则有较大的变化：

来看两个示例：

// Color Level 4
.colour {
    --fn-notation: hsl(2rad 50% 50% / 80%);
    --neon-pink: color(display-p3 1 0 1);
    --gray: lch(50% 0 0);
    --fallback: color(lab 25 25 25, display-p3 1 0 1, #ccc);
}

// Color Level 5
.colour {
    --pink: color-mix(red, white);
    --halfpink: color(var(--pink) / 50%);
    --halfred: rgb(from #f00 / 50%);
    --darkred: hsl(from red h s calc(l * .25));
}

这里再特意提一下display-p3颜色，我们可以配合CSS的媒体查询@media (dynamic-range: high)一起使用：

@media (dynamic-range: high) {
    .neon-red {
        --neon-glow: color(display-p3 1 0 0);
    }

    .neon-pink {
        --neon-glow: color(display-p3 1 0 1);
    }

    .neon-purple {
        --neon-glow: color(display-p3 0 0 1);
    }

    .neon-blue {
        --neon-glow: color(display-p3 0 1 1);
    }

    .neon-green {
        --neon-glow: color(display-p3 0 1 0);
    }

    .neon-yellow {
        --neon-glow: color(display-p3 1 1 0);
    }

    .neon-white {
        --neon-glow: color(display-p3 1 1 1);
    }
}

注意，Display-P3颜色空间颜色要比sRGB颜色空间中的颜色更鲜艳：

也可以说，Display-P3是sRGB的一个超集，大约要大35%：

Safari 97预览版本可以查看到display-p3的效果：

同样的，在color()函数中使用display-p3指定颜色空间时，也可以和sRGB颜色空间相互转换，如下图所示：

下面是@Adam Argyle 在Codepen提供的一个有关于display-p3的示例(https://codepen.io/argyleink/pen/MWymQGj)：

::marker也是CSS的伪元素，现在被纳入到CSS Lists Module Level 3规范中。在该规范中涵盖了列表和计算数器相关的属性，比如我们熟悉的list-style-type、list-style-position、list-style、list-item、counter-increment、counter-reset、counter()和counters()等属性。

在CSS中display设置list-item值之后就会生成一个Markers标记以及控制标记位置和样式的几个属性，而且还定义了计数器（计数器是一种特殊的数值对象），而且该计数器通常用于生成标记（Markers）的默认内容。

一时之间，估计大家对于Markers标记并不熟悉，但对于一个列表所涉及到的相关属性应该较为熟悉，对于一个CSS List，它可以涵盖了下图所涉及到的相关属性：

事实上，CSS的::marker和伪元素::before（或::after）类似，也可以通过content和attr()一起来控制Marker标记的效果。需要记住，生成个性化Marker标记内容需要做到几下几点：

• 非列表项li元素需要显式的设置display:list-item （内联列表项需要使用display: inline list-item）

• 需要显式设置list-style-type为none

• 使用content添加内容（也可以通过attr()配合data-*来添加内容）

比如下面这个小示例：

另外，::marker还没有得到浏览器支持之前，一般都是使用CSS的计数器来实现一些带有个性化的有顺序列表，比如下面这样的效果：

是不是很有意思，有关于::marker伪元素更详细的介绍，还可以阅读：《 Custom bullets with CSS ::marker(https://web.dev/css-marker-pseudo-element/)》一文。

先上张图：

上图的效果就是使用CSS的text-emphasis实现的。在以往我们要给文本添加一些装饰效果，除了加粗（font-weight）、倾斜（font-style）、阴影（text-shadow），文本上面或下面添加线条（text-decoration）等之外也没有别的了（当然，还可以使用其他的CSS实现一些特殊效果）。但要实现上图的效果还是有一定难度的。不过text-emphasis的出现，这一切变得要简单地多。

text-emphasis是属于 CSS Text Decoration Module 规范中的一个特性，在 Level 3(https://www.w3.org/TR/css-text-decor-3/#emphasis-marks)中和text-emphasis有关的属性还有text-emphasis-style和text-emphasis-color，而且text-emphasis是这两个属性的简写属性。另外还有一个用来指定标记符位置的属性text-emphasis-position：

.emphasis {
    text-emphasis: triangle rebeccapurple;
    text-emphasis-position: under;
}

在 Level 4的规范中还新增了text-emphasis-skip属性(https://www.w3.org/TR/css-text-decor-4/#text-emphasis-skip)。

具体的效果如下(https://codepen.io/airen/pen/yLOZpzO)：

color-scheme属性来自于 CSS Color Adjustment Module Level 1(https://drafts.csswg.org/css-color-adjust/#color-scheme-prop)。如果你在自己的项目中实现过iOS的DarkMode的效果(https://www.atatech.org/articles/153525)，你肯定使用过CSS的媒体查询prefers-color-scheme。

:root {
    --color: #fff;
    --color-bg: #000;
}

@media (prefers-color-scheme: dark) {
    --color: #000;
    --color-bg: #fff;
}

body {
    color: var(--color);
    background-color: var(--color-bg)
}

虽然说，这可以让用户根据自己喜好来选择自己喜欢的皮肤，但这并不能覆盖所有的。这个时候可以使用color-scheme属性来做一定的补充。该属性允许用户通过用户代理控制自动调整色彩模式，比如暗色模式，对比度调整或特定所需的配色方案。这些值与用户的首选项进行协商，从而产生影响用户界面（UI）内容的所选颜色方案，例如表单控制和滚动条的默认颜色，以及CSS系统颜色的使用值。

color-scheme有两种用法，先来看第一种:

:root {
    color-scheme: dark light;
}

在:root元素上，使用color-scheme颜色方案进行渲染，会影响画布的表面颜色（即全局背景颜色），color属性的初始值和系统颜色的使用值，还应该影响视窗滚动条颜色。

另外一种使用方式是在标签上：

<meta name="color-scheme" content="dark light" />

要遵守color-scheme CSS属性，需要先下载CSS（如果它是通过引用的）并进行解析。为了帮助用户代理立即用所需的颜色方案渲染页面背景，还可以在元素中提供一个颜色方案值。

由于meta标记和CSS属性(如果应用到:root)最终都会导致相同的行为，所以我更建议通过meta标记指定颜色方案，这样浏览器可以更快地采用首选方案。

最后给大家提供@tomayac(https://twitter.com/tomayac)提供的一个关于color-scheme的Demo(https://color-scheme-demo.glitch.me/)，下图是dark和light下相应的效果：

这里仅仅是简单的说了一下color-scheme属性，如果想深入的了解还是需要阅读一些相关的教程：

• CSS Color Adjustment Module Level 1: color-scheme(https://drafts.csswg.org/css-color-adjust/#color-scheme-prop)

• Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag(https://web.dev/color-scheme/)

• Don’t Forget the color-scheme Property(https://blog.jim-nielsen.com/2020/color-scheme-property/)

很多同学应该使用过像Sass、LESS之类的CSS处理器，这些处理器中有一个特大的特性就是选择器的嵌套，比如Sass中：

.parent {
    & > .child {
        color: red;
    }
}

.child {
    .parent & {
        color: blue;
    }
}

编译之后的CSS：

.parent > .child {
    color: red;
}

.parent .child {
    color: blue;
}

以往只能在CSS处理器中使用这样的特性，但将来在CSS中也可以使用这方面的特性，因为现在CSS中新增了一个嵌套模块，即 CSS Nesting Module(https://drafts.csswg.org/css-nesting-1)。有点类似于CSS自定义属性（变量）特性一样，最早也是出现在CSS处理器中，现在原生CSS也支持了这方面的特性。

也就是说，在不久的将来（如果在你的工程构建中配置了postcss-preset-env(https://preset-env.cssdb.org/)，现在就可以使用）：

article, section {
    &  p { 
        color: blue; 
    }
}

相当于：

:is(article, section) p { 
    color: blue; 
}

也就是：

article p,
section p {
    color: blue
}

还可以是& >结合起来使用：

article, section {
    & > p { 
        color: blue; 
    }
}

相当于：

article > p, 
section > p{
    color: blue; 
}

再来看另外几种有效的嵌套方式：

.foo {
    color: blue;
    & > .bar { 
        color: red; 
    }
}
/* 等同于 */
.foo { 
    color: blue; 
}
.foo > .bar { 
    color: red; 
}

.foo {
    color: blue;
    &.bar { 
        color: red; 
    }
}
/* 等同于 */
.foo { 
    color: blue; 
}
.foo.bar { 
    color: red; 
}

.foo, .bar {
    color: blue;
    & + .baz, &.qux { 
        color: red; 
    }
}
/* 等同于 */
.foo, .bar { 
    color: blue; 
}
:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux { 
    color: red; 
}

但是下面这几种写法将是 无效的：

/* 无效，因为没有嵌套选择器 */
.foo {
    color: red;
    .bar { 
        color: blue; 
    }
}

/* 无效，因为&不在第一个复合选择器中 */
.foo {
    color: red;
    .bar & { 
        color:blue; 
    }
}

/* 无效，因为列表中的第二个选择器不包含嵌套选择器 */
.foo {
    color: red;
    &.bar, .baz { 
        color: blue; 
    }
}

还可以结合 @nest 使用。下面这几种嵌套方式都是有效的：

.foo {
    color: red;
    @nest & > .bar {
        color: blue;
    }
}
/* 等同于 */
.foo { 
    color: red; 
}
.foo > .bar { 
    color: blue; 
}

.foo {
    color: red;
    @nest .parent & {
        color: blue;
    }
}
/* 等同于 */
.foo { 
    color: red; 
}
.parent .foo { 
    color: blue; 
}

.foo {
    color: red;
    @nest :not(&) {
        color: blue;
    }
}
/* 等同于 */
.foo { 
    color: red; 
}
:not(.foo) { 
    color: blue; 
}

但像下面这样嵌套则是无效的：

/* 无效，因为没有嵌套选择器 */
.foo {
    color: red;
    @nest .bar {
        color: blue;
    }
}

/* 无效，因为不是列表中的所有选择器都包含嵌套选择器 */
.foo {
    color: red;
    @nest & .bar, .baz {
        color: blue;
    }
}

注意，如果使用@nest时记得要和&结合在一起使用才有效。

在CSS Houdini中，最令人兴奋的是给CSS自定义属性和值的API。这个API通过赋予CSS自定义属性（通常也称为CSS变量）语义意义（由语法定义）甚至回退值来增强CSS自定义属性。

简单地说，可以使用CSS Houdini的CSS自定义属性和值的CSS.registerProperty()来注册一个自定义属性：

CSS.registerProperty({
    name: '--colorPrimary',
    syntax: '',
    initialValue: 'magenta',
    inherits: false
});

这样一来就可以使用已注册好的--colorPrimary自定义属性：

.card {
    background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
    --colorPrimary: yellow;
    background-color: var(--colorPrimary); /* yellow */
}

.another-card {
    --colorPrimary: 23;
    background-color: var(--colorPrimary); /* magenta */
}

现在或者将来，我们可以直接使用CSS的@property来注册一个自定义属性：

@property --gradient-start {
    syntax: "";
    initial-value: white;
    inherits: false;
}

在CSS中就可以直接像下面这样使用：

.el {
    --gradient-start: white;
    background: linear-gradient(var(--gradient-start), black);
    transition: --gradient-start 1s;
}

.el:hover {
    --gradient-start: red;
}

比如下面这个示例(https://codepen.io/airen/pen/poyqBGe)（请使用Chrome 85+查看）：

在CSS的世界中，还有另外一套规范是和CSS自定义属性有关的，那就是 CSS Custom Properties for Cascading Variables Module Level 1(https://www.w3.org/TR/css-variables-1/)。使用--在选择器块中声明自定义属性，然后使用var()函数引用已声明的自定义属性，将其当作CSS属性的值：

:root {
    --color: #f09
}

body {
    color: var(--color)
}

到目前为止，CSS自定义属性（也有同学称为CSS变量）已经得到了主流浏览器的使用，而且在一些大型Web应用中可以看到其身影。另外CSS自定义属性被运用的场景也很多，比如说@Adam Argyle就用CSS自定义属性模拟了一套缓动函数(https://codepen.io/argyleink/full/BajvPLz)，我们可以用于CSS Animation中：

:root {
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

    --easing: var(--ease-in-quad);
}

.animation__target {
    animation: ani 5s var(--easing) alternate infinite;
}

// JavaScript
const handlerElement = document.getElementById("easing");

handlerElement.addEventListener("change", function (e) {
        document.documentElement.style.setProperty("--easing", e.target.value);
});

点击这里查看效果(https://codepen.io/airen/pen/ExPryme)：

::cue和::cue(selector)对我而言是一个全新的东西，这两个伪元素是 WebVTT: The Web Video Text Tracks Format(https://w3c.github.io/webvtt/#the-cue-pseudo-element) 模块中的。

::cue和::cue(selector)两个伪元素最大的差别是后者带参数的伪元素。具体的作用：

• ::cue伪元素（不带参数）匹配元素构造的任何WebVTT节点对象列表，但与背景符号对应的属性必须应用于WebVTT线索背景框，而不是WebVTT节点对象列表

• ::cue(selector)是带有参数的伪元素，必须有一个由CSS选择器组成的参数。它匹配元素构造的WebVTT内部节点对象，该元素也匹配给定的CSS选择器

在CSS中只有部分属性可以运用于::cue和::cue(selector)两个伪元素，比如color、opacity、visibility、text-decoration、text-shadow、background、outline、font、line-height、white-space、text-combine-upright和ruby-position等。

::cue {
    color: white;
    background-color: hsl(0 0% 0% / 90%);
}

说实话，没有完全阅读 WebVTT: The Web Video Text Tracks Format(https://w3c.github.io/webvtt) 模块所有内容，对其并不完全了解。这里只是做一个抛砖引玉的作用，如果你的工作内容和WebVTT相关，那应该对你会有一定的作用；如果你对这方面感兴趣的话，可以深挖这方面的知识。

这篇文章是阅读@argyleink在2020第四届伦敦CSS分享会上分享的PPT有感而出的(https://london-css-2020.netlify.app/)。在文章中整理了@argyleink在PPT中提到的一些CSS新特性，另外自己从自己的角度额外增加了一些新的特性，差不多有近24个。当然，上面罗列的一些特性对于有些同学而言不是新特性（对我而言有些也不是新特性），但还是非常值得拿出来介绍，因为这些特性已经或将来不久就可以运用到自己的项目中。

由于要聊的特性个数较多，而且很多特性要聊清楚，聊透彻的话，都需要多篇篇幅才能聊完，因此文章中只做了一个蜻蜓点水，抛砖引玉的作用，如果大家对相应的特性感兴趣的话，可以针对性的去了解。另外，您肯定还有接触过一些新特性，并且没有在文章中提到，如果是的话，欢迎你在评论中与我们一起共享。

最后向大家推荐几篇和这个话题相关的文章：

• What's new with CSS?(https://london-css-2020.netlify.app/)

• CSS News July 2020(https://www.smashingmagazine.com/2020/07/css-news-july-2020/)

• What's New in Web 2020(https://speakerdeck.com/limhenry/whats-new-in-web-2020)

• The Web in 2020: Extensibility and Interoperability(https://css-tricks.com/the-web-in-2020-extensibility-and-interoperability/)

• Next-generation web styling(https://web.dev/next-gen-css-2019/)