CSS新特性

设置容器的长宽比 aspect-ratio

CSS Box Sizing Module Level 4 specification

兼容性：CSS property: aspect-ratio（Chrome 88）

语法

1	aspect-ratio: auto \|\| <ratio>;

默认值为auto，或接受ratio作为值，其中ratio = width / height

在一些情况下aspect-ratio将被忽略

当元素同时声明了`width`和`height`时

.element {
  width: 300px;
  height: 100px;
  aspect-ratio: 2 / 1; 
}

当内容超出比例时

内容过多撑开元素导致元素的尺寸改变，就没有长宽比了。

设置overflow-y: auto，元素保持长宽比显示滚动条：

.element {
  aspect-ratio: 2 / 1;
  overflow-y: auto;
}

跨浏览器兼容 padding-top

要求子元素相对于父元素绝对定位，父元素padding-top设置为高/宽百分比：

1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

1
2
3

<div class="box">
  <img class="cover" src="" alt=""/>
</div>

.box {
  position: relative;
  width: 100%;
  /*   padding-top: 56.25%; */
  padding-top: 75%;
  overflow: hidden;
}

.cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

See the Pen aspect-ratio hack by ly023 (@ly023) on CodePen.

参考

https://web.dev/aspect-ratio/

focus-visible

MDN :focus-visible

兼容性

希望鼠标点击button的时候不显示outline焦点轮廓，而TAB键访问时保留outline轮廓：

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

.button:focus-visible {
  outline: 3px solid #ff4323;
}

See the Pen :focus-visible by ly023 (@ly023) on CodePen.

box-decoration-break

MDN box-decoration-break

W3C Fragmented Borders and Backgrounds: the box-decoration-break property

兼容性：CSS box-decoration-break（Firefox完全支持）

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

通常作用于内联元素。

语法

box-decoration-break: slice; （默认值）
box-decoration-break: clone;

box-decoration-break: clone

使用了box-decoration-break: clone的内联元素，如果存在折行，那么每一行都将拥有原本单行的所有样式。

box-decoration-break: clone只会作用于以下样式：

background
border
border-image
box-shadow
border-radius
clip-path
margin
padding

Firefox下查看：

See the Pen 内联元素换行 - box-decoration-break: clone by ly023 (@ly023) on CodePen.

flex gap

在flex布局中使用gap属性，控制水平和竖直方向上item之间的距离。

兼容性：Chrome 84及以上

.box {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

See the Pen flex gap by ly023 (@ly023) on CodePen.

::marker伪元素

::marker伪元素用于自定义有序列表<ol>和无序列表<ul>中的<li>以及设置了display: list-item的元素的项目标记符号。与list-style-type和list-style-image不同的是，::marker可以自定义color、font-size等样式。

W3C The ::marker Pseudo-Element

MDN ::marker

兼容性： CSS selector: ::marker: Animation and transition support

IE不支持，Chrome 86开始才支持。