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

这篇讲什么

CSS 这两年又加了一波新特性,主要是给特定场景下的视觉效果开了快捷通道 —— 模态框、画中画、自定义滚动条、玻璃磨砂等等。下面整理 8 个最实用的,带浏览器支持版本和实际代码。

:modal 伪类和 ::backdrop 伪元素 - Chrome 105+

:modal 用来匹配处于"模态"状态的元素,通常配合 <dialog> 元素的 showModal() 方法使用。这种模态框 会自动屏蔽掉后面其他元素的交互,不需要自己手动控制 overflow / pointer-events 等。

配合 ::backdrop 伪元素 —— 浏览器原生提供的模态背景层,可以直接给它写样式,做毛玻璃 / 半透明等效果,比传统的"额外加一个 mask div"简洁多了。

<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;
}

:picture-in-picture 伪类 - Chrome 105+

给"处于画中画模式"的 <video> 元素加样式。比如视频被拽出画中画窗口时,原位置可以显示一个占位 "Now playing in PiP" 提示。

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()
})

:placeholder-shown 伪类 - 全浏览器支持

表单输入元素当前显示 placeholder 文字时(用户还没填),匹配。常用做浮动 label —— 用户开始输入时 label 上飘,效果优雅。

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);
}

配合 transition 用法:

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

inset 缩写属性 - Chrome 87+

inset 等同于 top + right + bottom + left 四个一起设。绝对定位 / fixed 定位常用:

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

等价于:

/* 使用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%;
}

四个值的写法跟 margin 一样:inset: 10px 20px 表示上下 10px、左右 20px。

scrollbar-gutter - Chrome 94+

滚动条的"占位"控制。默认情况下,某些场景里滚动条会"突然出现",导致页面内容跳一下。scrollbar-gutter: stable 让浏览器始终保留滚动条的空间,即使没滚动条也留出来,避免跳跃。

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

backdrop-filter - 大部分现代浏览器

毛玻璃效果。给元素加 backdrop-filter: blur(10px) 就能让元素背后的内容模糊,iOS 风磨砂玻璃感。配合半透明背景,做导航栏、卡片、模态背景视觉极佳。

:root {
  scrollbar-gutter: stable;
}

实际场景:

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

怎么知道某个 CSS 特性能用

查 caniuse.com,输入特性名,看绿色 / 红色分布。一般规则:

Chrome / Edge / Firefox 三家都绿 → 放心用
Safari 落后 → 看自己用户群,iOS / macOS 占比高就要谨慎
IE 11 红的 → 不用管,IE 11 已经死了

渐进增强思路:新特性优先用 (没 fallback),老浏览器用户看到的就是退化版。不要为了 1% 的 IE 用户拖累 99% 的现代浏览器体验。

一句话总结

这几个新 CSS 特性目前主流浏览器都支持(2024 年后),日常项目放心写。backdrop-filter 和 scrollbar-gutter 是出场频率最高的两个,值得记下来。