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

官方示例:

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

2.png

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

3.png

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

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

4.png

5.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 横向滚动 为例:

示意图:

官方示例:

6.png

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

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

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

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

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

示例:

8.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 的简写形式。

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

9.png

看两个示意图:

10.png

11.png

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

12.png

13.png

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

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

7. Paint API

14.png

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

看个demo:

15.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

本文转载自:https://segmentfault.com/a/1190000021081159

Image placeholder
前端答疑
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
你不知道的 PHP 缓存技巧

前言 相信有一定开发经验的PHP程序员都有缓存的使用经验,包括但不限于redis缓存,模板缓存,路由缓存,配置缓存,数据库缓存,还有opcache(真的很有用),但是今天我不准备炒冷饭了,我要讲点你不

R语言有多强大?十个你不知道的功能

大数据文摘出品编译:邬亮有些业界从业人士对R语言的价值并不认可,他们认为R语言只针对统计分析。R语言的确提供了很全面的统计分析的软件包,比如CRAN,Bioconductor,Neuroconduct

科普 | 关于联盟区块链你不知道的事

在分布账本技术发明十年后的今天,我们仍然处于大规模应用落地的早期。目前多数流行的公有区块链仍然无法落地,因此近年来越来越多的技术团队将目光集中在那类有使用场景的方向--联盟区块链。第1部分:行业分类从

你不知道的 Graphql

一起入门Graphql[toc]介绍GraphQL既是一种用于API的查询语言也是一个满足你数据查询的运行时。如何理解呢?GraphQL作为通用的REST架构的替代方案而被开发出来,通俗的讲,在架构中

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

分享 10 个你可能不知道的 Laravel Eloquent 小技巧

Laravel是一个功能丰富的框架。但是,你无法从官方文档中找到所有可用的功能。以下是一些你可能不知道的功能。 1.获取原始属性 当修改一条Eloquent模型记录的时候你可以通过调用getOrig

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

你应该知道的RocketMQ

1.概述在很久之前写过一篇Kafka相关的文章,你需要知道的Kafka,那个时候在业务上更多的是使用的是Kafka,而现在换了公司之后,更多的使用的是Rocketmq,本篇文章会尽力全面的介绍Rock

Github一天标星1k+,程序员需要知道的那些定理和法则

大数据文摘出品编译:蒋宝尚、曹培信摩尔定律知道么?帕金森定律讲的又是啥?作为一名合格的开发人员,除了本身码力超强外,或多或少要知道几条“”潜规则”,例如依赖倒置原则、鲁棒性原则……关于开发人员必须要知

关于网络安全防御,每个中小企业应该知道的5件事

根据美国商业促进局(BBB)的数据显示,你可能会惊讶地发现,小型企业占北美所有企业的97%以上。根据这个统计数字,我认为好消息是,在所有网络攻击中,针对小企业的攻击不到一半。坏消息是,当中小企业受到攻

看完秒变5G专家!关于5G,你必须知道的事儿……

本文转自|鲜枣课堂   什么是5G    5G,就是5thGenerationMobileNetworks(第五代移动通信网络),也可以称为5thGenerationWirelessSystems(第

关于强化学习你应该知道的三件事

如果您有在关注科技相关的新闻,可能读过有关人工智能(AI)应用程序如何通过强化学习训练,在围棋、国际象棋等棋类游戏以及电子游戏中击败人类玩家的报道。作为一名工程师、科学家或研究人员,您可能会希望利用这

企业需要知道的 6个AI/ML关键点

由于人工智能(AI)和机器学习(ML)的迅速发展与应用落地,世界各地的公司正在积极利用AI和ML发展业务,甚至投资数百亿美元。这些技术能够对业务与产生深刻的影响,所以Gartner报告预测,未来将“进

Hexo next主题博客搭建及美化

转载及引用 hexo主题配置一   hexo主题配置二   hexo主题配置三   hexo主题配置四   hexo主题配置五   Hexo博客提交百度和Google收录   hexo个人博客收录谷歌

css text不换行怎么办

csstext不换行怎么办css强制换行需要设置word-wrap属性和word-break属性,具体设置如下:div{ word-wrap:break-word; word-break:break-

css设置span标签里text-indent不起作用?

css设置span标签里text-indent不起作用?span标签的text-indent不起作用是因为text-indent只能给块级元素设置,而span标签是行内元素。解决方法是设置span标签

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

结合Spring Security进行web应用会话安全管理

在本文中,将为大家说明如何结合SpringSecurity和SpringSession管理web应用的会话。 一、SpringSecurity创建使用session的方法 SpringSecurit

数据泄露后,美国Web托管服务商Hostinger重置1400万用户密钥

导读:据外媒TheNextWeb报道,美国Web托管服务商Hostinger在日前发生了包含1400万用户信息的数据库被“未经授权的第三方”访问事件。随后,Hostinger决定采取“预防措施”——整

我们不知道要花多少时间解决问题

分享链接:http://kyleprifogle.com/dear-startup/ 我在IT行业工作,发现一个奇怪的现象。职业生涯的早期,我从事Web开发,比如开发CRUD应用、构建API等。我注意

93.7% 的程序员!竟然都不知道 Redis 为什么默认16个数据库?

▍导读在实际项目中Redis常被应用于做缓存,分布式锁、消息队列等。但是在搭建配置好Redis服务器后很多朋友应该会发现和有这样的疑问,为什么Redis默认建立了16个数据库,如下图所示。椐调查发现:

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

GoWeb教程_08.0. Web 服务

Web服务可以让你在HTTP协议的基础上通过XML或者JSON来交换信息。如果你想知道上海的天气预报、中国石油的股价或者淘宝商家的一个商品信息,你可以编写一段简短的代码,通过抓取这些信息然后通过标准的

GoWeb教程_08.2. WebSocket

WebSocket是HTML5的重要特性,它实现了基于浏览器的远程socket,它使浏览器和服务器可以进行全双工通信,许多浏览器(Firefox、GoogleChrome和Safari)都已对此做了支

GoWeb教程_13.0. 如何设计一个 Web 框架

前面十二章介绍了如何通过Go来开发Web应用,介绍了很多基础知识、开发工具和开发技巧,那么我们这一章通过这些知识来实现一个简易的Web框架。通过Go语言来实现一个完整的框架设计,这框架中主要内容有第一