你不知道的 CSS ： Next-generation web styling

背景

---

最近看了 Chrome Dev Summit 2019 大会视频, 了解到了不少以前不知道的 CSS 新特性，挺有意思的。

下面我就介绍几个激动人心的特性。

正文

特性总览：

1. Sticky

   1. Stickey Stack
   2. Sticy Slide
   3. Sticky Desperado
2. Focus-within
3. prefers-reduced-motion

4. Scroll Snap

   1. Scroll Snap Horizontal
   2. Scroll Snap Vertical
   3. Scroll Snap Matrix
5. Backdrop-filter
6. Gap
7. Paint API

1. Stickey Stack

stickey 属性咱们或许都据说过，常见于吸顶需求。

官方描述：

The position CSS property sets how an element is positioned in a document.
The top, right, bottom, and left properties determine the final location of positioned elements.

官方示例：

当咱们滚动容器的时候， stickey 的元素会脱离文档流， 如上图所示。

利用这个属性， 咱们能够轻松应对平常中的吸顶需求：

示意图：

核心属性：

position: sticky;
 top: 0;

完整示例代码：

// html
dl.sticky-stack
  dt A
  dd Aceyalone
  dd Aesop Rock
  dd Angel Haze
  dd Atmosphere

  dt B
  dd Babbletron
  dd Bike For Three
  dd Binary Star
  dd Blackalicious
  dd Black Sheep
  dd Blueprint
  dd Blue Scholars

  dt C
  dd Cecil Otter
  dd Chali 2na
  dd Chance The Rapper
  dd Common Market
  dd Cool Calm Pete
  dd Czarface

  dt D
  dd Danger Doom
  dd Darc Mind
  dd Dem Atlas
  dd Dessa

//css

@use postcss-nested;

.sticky-stack {
  background: hsl(265 100% 47%);
  color: white;
  margin: 0;
  
  height: 80vh;
  max-height: 40ex;
  border-radius: 1rem;
  overflow-y: auto;

  & dt {
    position: sticky;
    top: 0;

    font-weight: bold;
    background: hsl(265 100% 27%);
    color: hsl(265 100% 80%);
    padding: .25rem 1rem;
  }

  & dd {
    margin: 0;
    padding: .75rem 1rem;

    & + dt {
      margin-top: 1rem;
    }
  }
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: system-ui;
}

切换不一样的属性值， 能够实现不一样的吸顶效果：

好比： Sticky Slide

Sticky Slide

在线demo :

https://codepen.io/argyleink/pen/abbJOjP

Sticky Desperado

在线demo： https://codepen.io/argyleink/pen/qBBrbyx

官方文档： https://developer.mozilla.org/en-US/docs/Web/CSS/position

2. Focus-within

这也是一个颇有趣的特性， 适用于一个元素自己，或者其后代元素接收到 focus 事件的时候。

举个例子：

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
</form>


// css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: yellow;
  color: black;
}

form:focus-within  input{
  color: red;
}

当咱们focus到 input 里， 打两个字的时候：

这在之前， 是须要借助js 控制class 为其其祖先节点 添加样式， 如今经过 :focus-within 就能够实现了，美滋滋。

借助这个特性， 咱们能够实现一个简单的tab 页面切换：

在线demo地址：

https://codepen.io/una/pen/RMmogp

3. prefers-reduced-motion

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

即： 这个特性用来检测用户是否要最小化动画。

示例 demo：

在线地址：https://codepen.io/argyleink/pen/RwwZMKm

<div class="animation">animated box</div>

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

官方示例：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

4. Scroll Snap

这是一个很是有意思的特性。

以往， 在一个滑动列表中， 咱们老是但愿在滑动结束以后， 能看到一个完整的子项。

好比一横列的图片滑动以后，看到的恰好是一个在视区中的完整图像， 这个可使用 js 处理滑动事件， 动态计算X坐标来实现。

如今CSS也支持了， 这个特性就是Scroll Snap.

这个属性， 有三种表现形式：

1. Scroll Snap Horizontal 横向滚动
2. Scroll Snap Vertical 纵向滚动
3. Scroll Snap Matrix 双向滚动

以第一个 Scroll Snap Horizontal 横向滚动 为例：

示意图：

官方示例：

滑动到这里， 送开以后， 回弹到完整的1:

示例代码：

// html
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

//css
.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

在线体验地址： https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

另外两个分别是纵向滚动， 还有双向滚动, 就很少说了， 能够在官方示例中体验。

5. Backdrop-filter

这个特性还处于实验阶段。

正如属性名称描述的那样， 这个特性， 会给某个元素的后面应用图形效果， 好比模糊， 或者颜色转换。

由于是应用到元素后方， 因此要保证这个元素， 或者他的背景， 至少部分是透明的。

示例：

代码：

// html

<main>
  <h1>Hello, World</h1>
  <img src="http://place-puppy.com/600x400" alt="">
</main>

// css
h1 {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px dashed;
  padding: 1em;
  backdrop-filter: blur(10px);
  color: white;
  font-family: monospace;
  font-weight: 100;
}

官方文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

6. Gap

gap 容许咱们在行列之间直观的设置间距， 它是 row-gap 和 column-gap 的简写形式。

以往咱们作列表的时候， 要控制元素到其余元素的间距， 每每使用的是margin, 利用的是外边距重叠的特性，这就是图中的 extra spacing, 而如今有了gap, 咱们就有了更优雅的解决办法：

看两个示意图：

这种方式， 不管是单列， 仍是多列。 都有十分良好的表现：

在线demo: https://codepen.io/argyleink/pen/abbVqEv

官方文档： https://developer.mozilla.org/en-US/docs/Web/CSS/gap

7. Paint API

Paint Api 提供了一种更加接近浏览器底层的绘制机制，目前这个 Api 还处在Level 1 阶段。

看个demo：

// html
<script>
  if ('paintWorklet' in CSS) {
    // load this CodePen's JS file as the paint worklet
    CSS.paintWorklet.addModule('/una/pen/RMVjaQ.js');
  } else {
    document.querySelector('html').classList.add('no-support');
  }
</script>

<h1 class="speech">Hello World!</h1>
<h2 class="speech">What a Wonderful Life! I Can Keep Going!</h2>

// css
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-family: monospace;
  text-align: center;
}

.speech{
  background-image: paint(rainbowtize);
  padding: 1em;
  display: inline-block;
  border-radius: 20px;
}

在线demo: https://codepen.io/una/pen/VXzRxp

以上几个特性，都很是有意思， 简单的介绍给你们， 但愿能给你们带来一些启发。

短短几个特性， 昨晚看了视频， 今天用了一个下午整理资料， 动图，很是的耗时间。

若是内容对你有所启发， 还请 给个赞 鼓励一下。

谢谢你们。

结尾

附大会视频连接：

https://www.youtube.com/watch?v=-oyeaIirVC0&feature=youtu.be

最后

若是以为内容有帮助能够关注下个人公众号 「 前端e进阶 」，一块儿学习， 一块儿成长！