新认识属性

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() 伪类