2022年我们可以尝试使用哪些CSS新特性

1、Flexbox gaps

当我们使用flex布局时,通常会通过对子元素设置margin来达到增加子元素间距的目的。 但是这样会导致flex布局的第一个元素和最后一个元素都存在margins。当然,设置负margin可以解决,但是并不优雅。

我们不妨尝使用gap属性。示例如下:

.flex-container {
  row-gap: 10px;
  column-gap: 15px;
}
// 简写语法
.flex-container {
  gap: 10px 15px;
}

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。Edge 84+, Firefox 63+, Chrome 84+, Opera 70+,and Safari 14.1+。

参考链接

1、CSS gap

2、 @supports

@supports,叫做特性查询,类似于媒体查询(media queries),可以用来识别浏览器对特定CSS属性是否支持,对不支持的浏览器可以设置备选样式。

代码如下:

// 支持grid布局的浏览器使用grid布局
@supports (display: grid) {
  div {
    display: grid;
  }
}
// 不支持grid布局的浏览器则使用float
// 支持逻辑与(and)、逻辑或(or)、逻辑非(not)
@supports not (display: grid) {
  div {
    float: right;
  }
}

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。Edge 83+, Firefox 69+, Chrome 83+, Opera 69+,and Safari 14.1+。

参考链接

1、@supports

3、content-visibility & contain-intrinsic-size

content-visibility属性能够用来控制元素渲染时机,如果元素不在浏览器视口中,可以跳过渲染,从而显著提升页面渲染性能。

content-visibility属性值:

  • visible (默认) — 正常渲染。
  • hidden — 不管元素是否在屏幕视口内,都不渲染。
  • auto — 当元素脱离屏幕视口,则不渲染元素。当元素进入视口,则自动开启渲染。

代码如下:

section {
  content-visibility: auto;
}

当把content-visibility值设置为auto时,建议同时定义contain-intrinsic-size属性。

contain-intrinsic-size用来控制指定了content-visibility属性的元素的自然大小。设置这个属性值用来防止在页面滚动时,元素从未渲染前的高度0,突然变到真实高度,带来页面高度和滚动条高度抖动,从而影响用户体验。contain-intrinsic-size属性值并不要求很精确,而是一个理论值,我们可以根据元素的效果尺寸设置一个值。

当然,设置content-visibility属性的元素,在页面加载时,屏幕阅读器会无法获取元素内的标题等重要内容,牺牲了易用性。

section {
  content-visibility: auto;
  contain-intrinsic-size: 960px 1200px;  // 宽960px,高1200px
  // contain-intrinsic-size: 960px;   // 宽960px,高960px 
}

这篇文章详细谈到了content-visibility,以及性能测试对比。content-visibility: the new CSS property that boosts your rendering performance

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。Chrome 85+, Edge 85+, and Opera 71+。

参考链接

1、content-visibility

2、content-visibility: the new CSS property that boosts your rendering performance

4、The :is() and :where() pseudo-classes

:is() 函数**:where()** 函数将选择器列表作为参数,并选择该选择器列表中任意一个选择器可以命中的元素。

这两个伪类函数功能相同,唯一的区别在于优先级。:where() 的优先级总是为 0 ,但 :is() 的优先级是由它的选择器列表参数中优先级最高的选择器决定的。

举个例子:

.item p em,
.item title em,
.item section em {
   color: red;
}

可以用:is()简化如下:

.item :is(p, title, section) em {
  color: red;
}

使用:where()函数:

.item :where(p, title, section) em {
  color: red;
}

我们尝试覆盖上述em元素的color值,如下:

// em实际颜色依然是red,因为:is()函数优先级不为0,由选择器参数决定
.item :is(p, title, section) em {
  color: red;
}
.item em {
  color: green;
}
// em实际颜色被覆盖为green,因为:where()函数优先级始终是0
.item :where(p, title, section) em {
  color: red;
}
.item em {
  color: green;
}

浏览器支持度

我们可以访问CanIUse网站查看 :is:where的浏览器支持度。

参考链接

1、:is

2、:where

5、aspect-ratio

aspect-ratio CSS属性允许我们为box容器设置一个宽高比,这个宽高比用来对未设置box大小的元素计算尺寸和布局等。属性初始值为auto。宽高比设置示例如下:

// aspect-ratio: width / height
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;

浏览器内部已经为替换的元素和其他接受 widthheight 的元素添加了 aspect-ratio。这些可以在浏览器的UA样式表中看到。类似下面:

img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}

当加载未指定宽和高的图片时,img元素会从高度0突然变成加载完成后的真实高度,导致页面视觉抖动,同时造成浏览器重新计算布局带来的性能影响。设置了aspect-ratio属性,浏览器能够在真实图片加载之前确定图片的大小比例,腾出图片加载前的占位空间。实现如下:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

在aspect-ratio没出现之前,为规避这个高度闪动问题,通常我们会给img元素设置宽度和高度。如果我们知道宽高比,也可以通过padding百分比属性值实现,因为padding百分比值总是基于容器宽度的。实现如下:

// 利用padding-bottom撑开容器
.img-container {
  position: relative;
  padding-bottom: 56.25%; /* 图片宽高比16:9 */
  height: 0;
  overflow: hidden;
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

免费照片共享网站Unsplash的瀑布流图片就是使用padding-bottom属性实现的。如下图:

padding-bottom-hacking-aspect-ratio

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。

参考链接

1、aspect-ratio

2、Setting Height And Width On Images Is Important Again

6、::marker

::marker伪元素可以用来自定义列表条目前面的项目符号(如黑圆点)或者数字。它作用在任何设置了display: list-item的元素或伪元素上,例如<li><summary>元素。

::marker作为选择器时,只能使用某些CSS属性:

  • 所有字体属性
  • color属性
  • content属性
  • text-combine-upright , unicode-bidi and direction 属性

规范指出,将来可能会支持其他CSS属性。示例如下:

ul li::marker {
  color: red;
  font-size: 1.5em;
}

详见MDN ::marker示例

浏览器支持度

我们可以查看Can I Use 网站,来查看浏览器支持度。

参考链接

1、CSS Pseudo-Elements Module Level 4 (CSS Pseudo-Elements 4)

2、MDN ::marker示例

7、accent-color

accent-color 属性用来设置某些交互元素的强调色。比如,可以设置checkbox选中框背景颜色。目前支持该属性的浏览器可以应用于以下元素:

  • <input type="checkbox">
  • <input type="radio">
  • <input type="range">
  • <progress>

示例如下:

<input checked="" type="checkbox" id="demo">
<label for="demo">accent color</label>
input {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  accent-color: #EA5C2B;
}

如果你能看到下面红色的复选框,说明当前浏览器支持accent-color属性。

提到accent-color属性,顺带提下caret-color,这个属性通常用来设置input元素和任何带有contenteditable属性的元素的插入光标颜色。

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。

参考链接

1、accent-color

2、caret-color

8、Scroll Snap

CSS Scroll Snap模块能够让容器元素滚动停止时,平滑地定位到指定位置。

主要应用场景:图片展示幻灯片,页面满屏分页滑动效果。以前实现图片幻灯片需要借助JavaScript,而有了CSS Scroll Snap,实现起来更简单方便。示例如下:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  width: 600px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  gap: 0 12px;
}
.item {
  flex-shrink: 0;
  width: 400px;
  height: 200px;
  scroll-snap-align: start;
  background: #F67280;
  text-align: center;
}

CSS Scroll Snap示例

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。

参考链接

1、大侠,请留步,要不过来了解下CSS Scroll Snap?

文中提到在iOS Safari浏览器下,需要在滚动容器上添加-webkit-overflow-scrolling: touch才有效果。在iOS 15.3.1上实际测试后,不添加上述属性,scroll snap特性也可以生效。

9、Conical gradients

和CSS径向渐变radial-gradient()从中心点向外辐射渐变不同,CSS圆锥渐变是围绕一个中心点进行旋转渐变的。如下图:

radial-gradient vs conical-gradient

代码和效果图如下:

.pie-chart{
   background: conic-gradient(#FF7676 120deg, #A1DE93 120deg 240deg, #70A1D7 240deg);
}

如果你能看到下面的红绿蓝图例,说明当前浏览器支持此特性。

使用repeating-conic-gradient() 函数能够根据传参快速创建出重复的渐变模式。如下示例:

.item {
    background: repeating-conic-gradient(from 0deg, #00B8A9 0deg 30deg, #F6416C 30deg 60deg, #FFDE7D 60deg 90deg);
}

如果你能看到下面的绿红黄图例,说明当前浏览器支持此特性。

浏览器支持度

我们可以查看Can I Use网站,来查看浏览器支持度。

参考链接

1、conic-gradient()

2、repeating-conic-gradient()

总结

2022年,随着各大浏览器对这些CSS特性的全面支持,前端开发的幸福感也会明显提升,还在等什么,赶紧用起来吧。

CSS