CSS新用法 - :modal、::backdrop、:picture-in-picture、:placeholder-shown、inset、scrollbar-gutte、backdrop-filter

:modal伪类和::backdrop伪元素 - Chrome105+

解释: :modal 用来写模态框的样式，使用show()弹出的模态框可以与后面的元素继续交互，但是使用showModal() 弹出的模态框，将像个真的模态框，有半透明的背景，不可与背景后的元素交互，并且在页面中居中

在下面这个例子中，使用show()打开的模态框，使用的样式将会是dialog的样式，使用showModal()打开的模态框样式将会是:modal的样式

<dialog>
  模态框的内容
  <button class="closeButton">关闭</button>
</dialog>
​
<button class="showButton">Show打开</button>
<button class="showModalButton">Show modal打开</button>

dialog {
  border: 10px solid #f00;
}
​
:modal {
  border: 2px solid #000;
}

const showButton = document.querySelector('.showButton')
const showModalButton = document.querySelector('.showModalButton')
const closeButton = document.querySelector('.closeButton')
const dialog = document.querySelector('dialog')
​
showButton.addEventListener('click', e => {
  dialog.show()
})
​
showModalButton.addEventListener('click', e => {
  dialog.showModal()
})
​
closeButton.addEventListener('click', e => {
  dialog.close()
})

::backdrop

解释：用于指定showModal()打开的模态框，后面的遮罩层的样式（一般是半透明黑色的那个）

dialog {
  border: 10px solid #f00;
}
​
:modal {
  border: 2px solid #000;
}
​
/* 上面的css和之前的一样 */
​
/* 这样可以写一个全局的modal背景颜色 */
::backdrop {
  background: conic-gradient(red, orange, yellow, green, red);
  outline: 20px solid white;
  outline-offset: -20px;
}
​
/* 这样可以写一个指定的 */
dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

:picture-in-picture伪类 - Chrome110+

解释: :picture-in-picture伪类可以用来为处于画中画模式(PIP)的元素（通常是<video>）添加样式。支持此API的浏览器有Chrome、Edge、Safari和Opera。Firefox不支持此API，但可以右键单击视频并选择“在画中画中观看”。

/* 这样将会在视频进入画中画时，在原始坑位展示一个透明度0.3的模糊的样子 */
:picture-in-picture {
  opacity: 0.3;
  filter: blur(5px);
}

:placeholder-shown伪类 - Chrome47+

解释: 用来写带有placeholder，但是还没有输入的样式

/* 这样写就是在一个input，有placeholder且还没有输入东西的时候，有一个5px的蓝色边框 */
input:placeholder-shown {
  border: 5px solid blue;
}

inset - Chrome87+

解释：当我们定位一个元素时，通常要top: 5px, right: 5px, left…。写多了挺麻烦，inset属性一行搞定4个值

/* 使用inset之前 */
.box {
  position: absolute;
  top: 20px;
  right: 30px;
  bottom: auto;
  left: 40px;
}
​
/* 使用inset之后，按上右下左的顺序写，和margin一样 */
.box {
  position: absolute;
  inset: 20px 30px auto 40px;
}
​
/* 只设置上下 */
.box {
  position: absolute;
  inset-block: 10px 20px;
}
​
/* 只设置左右 */
.box {
  position: absolute;
  inset-inline: 5% 10%;
}

scrollbar-gutter - Chrome94+

解释: scrollbar-gutter可以让滚动条出现的时候内容不晃动。

scrollbar-gutter: auto;
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

一共有三种值

• auto就是默认的表现。没有滚动条的时候，内容尽可能占据宽度，有了滚动条，可用宽度减小。

• stable如果 overflow 属性计算值不是 visible，则提前预留好空白区域，这样滚动条出现的时候，整个结构和布局都是稳定的。

• both-edges这个是让左右两侧同时预留好空白区域，目的是让局部绝对居中对称。

:root {
  scrollbar-gutter: stable;
}

实际开发，我们往往会用在根元素上

backdrop-filter - Chrome76+

解释：可以让你为一个元素后面区域添加效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，但是为了看到效果，至少得带点透明

这个属性其实已经有一段时间了，不算那么新，我们可以结合前文提到的::backdrop来使用，让模态框弹出时，背景的遮罩层更好看一些

dialog::backdrop {
  backdrop-filter: blur(5px);
}