新认识属性
20210813
@supports
类似于谋体查询的 CSS 规则,根据用户浏览器支持的 CSS 属性和值设置样式,也可以说是回退机制,比如 var(--color, #333)。可以结合关键字 not | or | and 使用。
/*如果不支持 justify-content: space-evenly,则为 div 元素添加 justify-content:space-around 属性*/
@supports not (justify-content: space-evenly) {
div {
justify-content: space-around;
}
}
/*如果支持 display: flex,则为 div 元素添加 display: flex 属性*/
@supports (display: flex) {
div {
display: flex;
}
}
scroll snapping滚动吸附锁定元素或位置
可以使页面在滚动时,滚动内容吸附到容器位置,从而提高用户对页面视觉体验效果。
应用场景:于固定容器范围内对片段式内容进行x、y方位进行滚动定位(移动端全屏式片段、图片列表滚动等等亦或文本型片段信息)。
scroll-snap-type:可设置x、y纵横滚动轴。
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
scroll-snap-align:则对其子元素进行设置,主要就是对元素的捕获吸附点位置设置。
scroll-snap-align: [ none | start | end | center ] {1,2}
(应是scroll-snap-align: start)
:is() | :where() 伪类