你不知道的 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.

官方示例:

image.png

当我们滚动容器的时候, 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;
}

image.png

当我们focus到 input 里, 打两个字的时候:

image.png

这在以前, 是需要借助js 控制class 为其其祖先节点 添加样式, 现在通过 :focus-within 就可以实现了,美滋滋。

借助这个特性, 我们可以实现一个简单的tab 页面切换

image.png

image.png

在线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 横向滚动 为例:

示意图:

ezgif.com-optimize.gif

官方示例:

image.png

滑动到这里, 送开之后, 回弹到完整的1:

image.png

示例代码:

// 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

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

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

因为是应用到元素后方, 所以要保证这个元素, 或者他的背景, 至少部分是透明的。

示例:

image.png

代码:

// 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-gapcolumn-gap 的简写形式。

ezgif.com-video-to-gif.gif

以往我们做列表的时候, 要控制元素到其他元素的间距, 往往使用的是margin, 利用的是外边距重叠的特性,这就是图中的 extra spacing, 而现在有了gap, 我们就有了更优雅的解决办法:

image.png

看两个示意图:

image.png

image.png

这种方式, 无论是单列, 还是多列。 都有十分良好的表现:

image.png

image.png

在线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:

image.png

// 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

最后

关注我

如果你觉得这篇内容对你挺有启发,那就关注我吧~

图片

更多精彩:

聊聊 ESM、Bundleless 、Vite 、Snowpack

记一次 「 无限列表 」滚动优化

「 面试三板斧 」之 代码分割(上)

「 面试三板斧 」之缓存 (上)

「 面试三板斧 」之缓存 (下)

「 面试三板斧 」之 HTTP (上)

「 面试三板斧 」之 HTTP (下)

「 面试三板斧 」之  this


大前端
学习 分享

积跬步,至千里。

7.9k 声望
12.7k 粉丝
0 条评论
推荐阅读
我在 Shopee 毕业啦
9.19 早上还在写代码,然后收到 HR 的消息去会议室,15 分钟就结束了,不需要交接,当场取消所有权限,归还设备之后就回家了,神奇的体验。

皮小蛋1阅读 634评论 6

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

积跬步,至千里。

7.9k 声望
12.7k 粉丝
宣传栏