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

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

给TA打赏
共{{data.count}}人
人已打赏
技术教程

CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()

2024-6-6 11:32:45

技术教程

CSS新用法 - min()、max()、clamp()、:where()、:is()、:has()

2024-6-6 11:37:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索