新认识属性

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)

上一篇:【数学】矩阵乘法【CF】D. Magic Gems


下一篇:POJ - 2031 Building a Space Station(几何+prim)