2019年这1年多学到的CSS新特性 | 掘金年度征文

前言和索引

2019年快过去了，虽然工作繁忙，这一年多的时间也没有停止前端的学习，这里总结下最近1年多学到的CSS新特性。

索引

CSS Paint API
color-adjust
scroll-behavior
Scroll Snap
margin-inline/block
font-feature-setting
::backdrop
vector-effect
:placeholder-shown
box-decoration-break
:focus-visible
backdrop-filter
image-set()
inset
minmax()
repeat()

CSS Paint API

CSS Paint API可以让Canvas画布作为普通元素的background-image背景图片呈现，其作为一个CSS属性值，渲染是实时的，因此可以以一种更高效的方式丰富web页面元素的视觉展现。

此API使用需要配合JavaScript使用才行，有一定门槛，包括CSS模块注册和使用canvas API语法进行图形绘制。

.box {
    width: 180px; height: 180px;
    /* someShape自己命名 */
    background-image: paint(someShape);
}

CSS.paintWorklet.addModule('someShape.js');

// transparent-grid命名和CSS中的对应
registerPaint('someShape', class {
    paint(context, size) {
       // 这里就是绘制的代码了....
    }
});

CSS Paint API是CSS Houdini的一部分。

兼容性

目前兼容性如下，目前仅Chrome支持，大大限制了该技术的兴起。甚是遗憾。

更多关于CSS Paint API的内容可以参考我之前写的这篇文章。

CSS color-adjust

color-adjust这个CSS属性作用用一句话表述：是否允许浏览器自己调节颜色以便有更好的阅读体验。

语法

color-adjust: economy;  /* 经济，省钱 */
color-adjust: exact;  /* 精确 */

例如，打印的时候，为了省墨水，默认背景色是不打印的，纯白。我们可以通过设置color-adjust: exact实现。

打印时候背景色依然显示对比demo

Ctrl + P或者选择浏览器“打印”菜单，此时，可以看到差异：上面是默认值，打印预览白色底，后面设置了color-adjust: exact，结果打印预览时候灰色背景出现了：

兼容性

目前除了IE/Edge，其他浏览器都可以自如使用，唯一问题是这个属性使用场景并不是很多，但关键时候还是很有用的。

更多关于CSS color-adjust的内容可以参考我之前写的这篇文章。

CSS scroll-behavior

scroll-behavior可以让浏览器的滚动定位表现为平滑。

语法

scroll-behavior: auto;
scroll-behavior: smooth;

我们可以这么设置：

html, body {
    scroll-behavior:smooth;
}

这样，页面主滚动条任何定位，如锚点定位，快捷键滚动，或者JS scrollTop设置或者window.scrollTo()改变滚动位置，都会表现为平滑。

例如返回顶部直接下面HTML就可以了，无需JS专门做个滚动动画：

<a href="#">返回顶部</a>

但是，根据自己的实践，由于滚动的时间无法自定义，有时候页面很高的时候，这样平滑滚过去，有些啰嗦，有些心累，所以，大家使用时候还是看场景。

兼容性

IE和Safari浏览器都不支持，导致这个特性无法在TO C的产品中直接使用，需要配合polyfill或者自己写一段额外的JS代码支持下。

如何兼容，以及JS中其他一些平滑API可以参考我之前写的这篇文章。

CSS Scroll Snap

CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置，包含scroll-*以及scroll-snap-*等诸多CSS属性。

效果简单示意：

实际开发，我们使用下面这些CSS组合足矣：

scroll-snap-type: x/y
scroll-snap-align: start/end/center

兼容性

IE10+也支持，不过是老语法。可以看到，Chrome，Firefox以及Safari浏览器是支持了，也就是对兼容性要求没那么高的移动端可以用。经过我的实践，发现在iOS系统下需要同时设置滚动容器-webkit-overflow-scrolling:touch才有效果。

关于CSS Scroll Snap更多更详细更深入介绍可以参考我之前写的这篇文章。

CSS margin-inline/margin-block

margin-inline和margin-block也是CSS逻辑属性，前者是margin-inline-start和margin-inline-end的缩写，后者是margin-block-start和margin-block-end的缩写。

这里的inline和block指的是方向，margin-inline表示当前文档内联元素的呈现方向，margin-block表示当前文档块级元素的呈现方向。

所以，在中文或英文网页环境中，默认情况下，margin-inline指的是水平方向的margin控制，而margin-block指的是垂直方向的margin控制。此时，margin-inline-start等同于margin-left，margin-inline-end等同于margin-right，margin-block-start等同于margin-top，margin-block-end等同于margin-bottom。

CSS逻辑属性往往配合direction属性或者writing-mode使用，或者在多语言项目中。

兼容性

兼容性还是很不错的，至少在移动端可以放心使用。

CSSS逻辑属性兼容性

如果想进一步了解CSS逻辑属性，可以参考我之前写的这篇文章。

CSS font-feature-settings

CSS font-feature-settings属性控制OpenType字体中的高级排版功能，也就是可以让OpenType字体排版更加精致，符合实际开发需要。

支持非常非常多的属性值，50多个都不止，下图还只是部分。

所有这些属性值要想有效果，需要字体原本就支持，也就是字体制作的时候就遵循一些OpenType字体排版规范。

例如liga这个属性值，可以让Adobe Warnock系列字体表现为连字：

.liga { font-feature-settings: "liga", "clig"; }

兼容性

兼容性还是很不错的，唯一的问题是字体特征设置需要字体配合，而由于中文字体字库非常的大，导致并没有相关字体支持font-feature-settings的行为表现，而英文和日文则有很多支持，所以，这个CSS属性在海外项目有用，中文项目只能说遗憾。

我个人花大量时间整理了一份应该是国内唯一的font-feature-settings诸多属性值作用与表现的详细文档，可以点击这篇文章学习。

CSS ::backdrop伪元素

::backdrop伪元素可以用来设置所有全屏元素后面“幕布”的样式。

可以设置<video>视频元素的全屏黑背景，可以设置<dialog>元素显示时候的背景，也可以设置处于全屏状态下的普通元素的黑背景。

例如下面代码可以让视频元素全屏的时候，视频外的背景是透明的：

video::backdrop { opacity: 0; }

video::backdrop { visibility: hidden; }

video::backdrop { display: none; }

兼容性

::backdrop伪元素兼容性有些复杂，不同元素，不同场景兼容性不一样。

比较复杂，常规使用兼容性还是很不错的，IE和Edge需要-ms-私有前缀：

如果是<dialog>元素的背景修改，则兼容性和<dialog>元素是一致的，目前仅Chrome浏览器完全支持，Firefox实验支持。

如果是全屏API，则兼容性如下：

更多精彩案例可以参考我之前写的这篇文章，里面有多个场景下使用::backdrop伪元素的示意。

CSS vector-effect

vector-effect主要用在SVG元素上，可以让SVG元素的描边不随着SVG图形的尺寸变化而缩放。

语法

vector-effect: default | non-scaling-stroke | inherit | <uri>

其中设置属性值为non-scaling-stroke就是描边宽度不随着矢量图形尺寸变化而变化。

兼容性

caniuse上没有相关数据，根据我的测试，Chrome，Firefox和Safari都是支持的，IE11不支持。

可以参考我之前写的这篇文章。

CSS :placeholder-shown伪类

:placeholder-shown伪类匹配placeholder占位符属性值显示时候的状态。

我们可以借助这个伪类纯CSS实现Material Design规范中占位符交互效果，如下示意：

有兴趣了解相关技术可以参考我之前写的这篇文章，或者在《CSS选择器世界》这本书中找到相关介绍。

兼容性

移动端可以放心使用：

CSS box-decoration-break

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。

默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。如下图所示：

如果对这个元素设置box-decoration-break:clone，则看起来舒服多了。

当然，这个属性可以应用的场景远不止上面这一点。

语法

box-decoration-break: slice;  /* 默认值 */
box-decoration-break: clone;

兼容性

兼容性还是很不错的，就是需要-webkit-私有前缀。

可以参考我之前写的这篇文章，还有多种分栏场景介绍，以及支持CSS属性等细节。

CSS :focus-visible伪类

:focus-visible可以有效解决Chrome浏览器下部分元素的焦点轮廓问题。可以让<button>，<summary>元素或者设置了tabindex的元素在点击时候没有焦点轮廓，键盘访问时候出现。

现在默认是点击也会有焦点轮廓，如下示意。

设置tabindex元素鼠标点击出现轮廓

通过下面CSS代码可以实现点击无轮廓，键盘访问有轮廓：

:focus:not(:focus-visible) {
    outline: 0;
}

设置tabindex元素鼠标点击无轮廓

设置tabindex元素键盘访问依然有轮廓

兼容性

Firefox浏览器有:-moz-focusring属性有类似效果，而Chrome则要开始支持实验属性CSS才行。

希望这个特性可以尽快默认开启。

可以参考我之前写的这篇文章了解更多细节。

CSS backdrop-filter

CSS backdrop-filter可以让当前元素所在区域后面的内容模糊灰度或高亮之类，和filter属性的语法一模一样，只不过一个是作用于背后元素，一个是作用于自身。

backdrop-filter可以非常方便使用iPhone手机那样的毛玻璃效果，只需要把原来的实色背景换成半透明即可：

.ui-droplist-x {
    background: hsla(0, 0%, 100%, .75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

兼容性

这次是Firefox浏览器拖了后腿，不过一点也不影响实际开发使用，因为这属于渐进增强功能。

可以参考我之前写的这篇文章了解更多细节。

CSS image-set()

CSS image-set()函数可以让元素根据不同设备的屏幕密度或者分辨率显示不同的背景图片（background-image）或者遮罩图片（mask-image）等。

示意：

.element {
    background-image: image-set(url(zxx.png) 1x, url(zxx-2x.png) 2x, url(zxx-print.png) 600dpi);
}

表示：如果屏幕是一倍屏，也就是设备像素比是1的话，就使用zxx.png作为背景图片；如果屏幕是2倍屏及其以上，则使用zxx-2x.png这张图作为背景图；如果设备的分辨率大于600dpi，则使用zxx-print.png作为背景图。

这个CSS属性设计的初衷是好的，但是实际开发，我们都是直接一个2倍图顶上去，一了百了，或者都是使用矢量图，因此，实际开发用得并不多。

除非是不同屏幕显示不同图片的场景，那就很有用了。

兼容性

移动端兼容性还是很666的，这个属性也主要用在移动端，因此，够用。

可以参考我之前写的展现形式大赞的这篇文章，以了解更多细节。

CSS inset

这个属性很多人都很喜欢：

.zxx {
    position: absolute;
    inset: 0;
}

等同于：

.zxx {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
}

只是目前兼容性还不是很好。

兼容性

这回Firefox浏览器硬气了一把，然后Chrome似乎开启支持实验性质属性也是支持的，因此下图不太准。

无

CSS minmax()函数

CSS Grid布局中的一个函数，表示尺寸范围，很有用，可以参考下面repeat()函数中的GIF效果图，就是有使用minmax()函数。

兼容性

可以参考我之前写的这篇文章了解更多细节。

CSS repeat()函数

CSS Grid布局中的一个函数，表示重复，语法比较复杂，可以实现很多很棒的布局效果。

兼容性

更多语法知识点可以参考我之前写的这篇文章。

（本文完）

掘金年度征文 | 2019 与我的技术之路征文活动正在进行中......

2019年这1年多学到的CSS新特性 | 掘金年度征文

前言和索引

索引

CSS Paint API

兼容性

相关文章

CSS color-adjust

语法

兼容性

相关文章

CSS scroll-behavior

语法

兼容性

CSS Scroll Snap

兼容性

相关文章

CSS margin-inline/margin-block

兼容性

相关文章

CSS font-feature-settings

兼容性

相关文章

CSS ::backdrop伪元素

兼容性

相关文章

CSS vector-effect

语法

兼容性

相关文章

CSS :placeholder-shown伪类

兼容性

CSS box-decoration-break

语法

兼容性

相关文章

CSS :focus-visible伪类

兼容性

相关文章

CSS backdrop-filter

兼容性

相关文章

CSS image-set()

兼容性

相关文章

CSS inset

兼容性

相关文章

CSS minmax()函数

兼容性

相关文章

CSS repeat()函数

兼容性

相关文章