你不知道的 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進階 」，一塊兒學習， 一塊兒成長！