[第25期] 你不知道的 CSS - by Chrome 2019

背景

最近看了 Chrome Dev Summit 2019 大會視頻, 瞭解到了不少以前不知道的 CSS 新特性，挺有意思的。css

下面我就介紹幾個激動人心的特性。html

特性總覽：

Sticky前端

Stickey Stackweb
Sticy Slide面試
Sticky Desperado瀏覽器

Focus-withinbash
Prefers-reduced-motion微信
Scroll Snapapp

Scroll Snap Horizontal編輯器
Scroll Snap Vertical
Scroll Snap Matrix

Backdrop-filter
Gap
Paint API

正文

1. Sticky

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 :

codepen.io/argyleink/p…

Stickey Desperado

在線demo：codepen.io/argyleink/p…

官方文檔：developer.mozilla.org/en-US/docs/…

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地址：

codepen.io/una/pen/RMm…

3. Frefers-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：

在線地址：codepen.io/argyleink/p…

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

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

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

官方示例：developer.mozilla.org/en-US/docs/…

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;
}

在線體驗地址：developer.mozilla.org/en-US/docs/…

另外兩個分別是縱向滾動，還有雙向滾動, 就很少說了，能夠在官方示例中體驗。

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;
}

官方文檔：

developer.mozilla.org/en-US/docs/…

6. Gap

gap 容許咱們在行列之間直觀的設置間距，它是 row-gap 和 column-gap 的簡寫形式。

以往咱們作列表的時候，要控制元素到其餘元素的間距，每每使用的是margin, 利用的是外邊距重疊的特性，這就是圖中的 extra spacing, 而如今有了gap, 咱們就有了更優雅的解決辦法：

看兩個示意圖：

這種方式，不管是單列，仍是多列。都有十分良好的表現：

在線demo: codepen.io/argyleink/p…

官方文檔：developer.mozilla.org/en-US/docs/…

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: codepen.io/una/pen/VXz…

以上幾個特性，都很是有意思，簡單的介紹給你們，但願能給你們帶來一些啓發。

短短几個特性，昨晚看了視頻，今天用了一個下午整理資料，動圖，很是的耗時間。

在線的demo若是看不了，能夠去閱讀原文裏裏面找。

若是內容對你有所啓發，能夠收藏，轉發。

附大會視頻連接：

www.youtube.com/watch?v=-oy…

往期精彩回顧：

[第24期] 手把手教你寫幾個實用的 React Hooks

[第23期] 五分鐘搞懂 React Hooks 工做原理

[第22期] React Conf 2019 樣式新方案

[第20期] 全面瞭解 ES6 Modules

Shopee 前端內部推薦

最後

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

點個「在看」，讓更多的人也能看到這篇內容。
關注公衆號「前端e進階」，掌握前端面試重難點，公衆號後臺回覆「加羣」和小夥伴們暢聊技術。

本文分享自微信公衆號 - 前端巔峯（Java-Script-）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。