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

type
status
date
slug
summary
tags
category
icon
password

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

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

::backdrop

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

:picture-in-picture伪类 - Chrome110+

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

:placeholder-shown伪类 - Chrome47+

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

inset - Chrome87+

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

scrollbar-gutter - Chrome94+

解释: scrollbar-gutter可以让滚动条出现的时候内容不晃动。
  • auto就是默认的表现。没有滚动条的时候,内容尽可能占据宽度,有了滚动条,可用宽度减小。
  • stable如果 overflow 属性计算值不是 visible,则提前预留好空白区域,这样滚动条出现的时候,整个结构和布局都是稳定的。
  • both-edges这个是让左右两侧同时预留好空白区域,目的是让局部绝对居中对称。
 

backdrop-filter - Chrome76+

解释:可以让你为一个元素后面区域添加效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,但是为了看到效果,至少得带点透明
这个属性其实已经有一段时间了,不算那么新,我们可以结合前文提到的::backdrop来使用,让模态框弹出时,背景的遮罩层更好看一些
CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()🎐CSS新用法 - min()、max()、clamp()、:where()、:is()、:has()🎐
前端技术
AI技术
拙见
工具应用
其他知识
编程知识