文档章节

使用CSS自定义属性构建骨架屏

前端老手
 前端老手
发布于 09/22 23:58
字数 1772
阅读 33
收藏 2

写在前面

几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享一下使用CSS自定义属性构建骨架屏的技巧,先看骨架屏demo效果吧


设计Web上的加载状态常常被忽略或被认为是事后考虑。性能不仅是前端开发人员的职责,构建与慢速连接一起工作的体验也是设计挑战。 虽然前端开发人员需要注意一些事情,比如压缩和缓存,但是设计人员必须考虑UI处于“加载”或“离线”状态时的外观和行为。


速度幻觉

随着我们对移动体验的期望发生变化,我们对性能的理解也在变化。我们期望网络应用程序感觉像本机应用程序一样快速响应,无论其当前的网络覆盖范围如何。

感知性能是衡量用户感觉速度的尺度。这个想法是用户更有耐心,并且如果他们知道正在发生什么,并且在内容实际存在之前能够预测内容,那么他们会认为系统更快。这在很大程度上与管理期望和保持用户知情有关。

对于Web应用程序,这个概念可能包括显示文本,图像或其他内容元素的“模型” - 称为
骨架屏💀。可以在网上可以看到,Facebook,Google,Slack等公司使用:


(Facebook的骨架屏)


(Slack的骨架屏)

例子

假设你正在构建一个Web应用程序,这是一种旅行建议类型的东西,人们可以分享他们的旅行和推荐地点,所以你的主要内容可能看起来像这样:


您可以将该卡片缩小到其基本视觉形状(UI组件的骨架)


每当有人从服务器请求新内容时,您可以立即开始显示骨架,同时在后台加载数据。内容准备就绪后,只需将骨架换成实际卡即可。这可以使用普通的JavaScript或使用像Vue/React这样的库来完成。

现在我们可以使用图像来显示骨架,但这会引入额外的请求和数据开销。我们已经在这里加载了东西,所以等待另一个图像首先加载并不是一个好方式。此外,它没有响应,如果我们决定调整一些内容卡的样式,我们将不得不复制骨架图像的更改,以便它们再次匹配。😒

一个更好的解决方案是只用CSS创建整个东西。没有额外的请求,最小的开销,甚至没有任何额外的标记。我们可以用下面的方式来构建它,使以后更改设计变得更容易。

通过CSS绘制骨架

首先,我们需要绘制构成卡片骨架的基本形状。我们可以通过background-image属性添加不同的渐变来实现这一点。默认情况下,线性渐变从上到下运行,有不同的颜色停止过渡。如果我们只定义一个颜色停止,并使其余颜色保持透明,我们可以绘制形状。

请记住,在这块,多个背景图像堆叠在一起,因此顺序非常重要。最后一个渐变定义在后面,第一个位于前面。

.skeleton {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 16px, white 99%, transparent 0), /* 第3层 头像 */
    linear-gradient(white 40px, transparent 0), /* 第2层 标题 */
    linear-gradient(gray 100%, transparent 0); /* 第1层 卡片背景 */
}

这些形状拉伸来填充整个空间,就像常规的块级元素一样。如果我们想要改变它,我们必须为它们定义明确的尺寸。 background-size的值来设置每个图层的宽度和高度,保持我们使用的相同顺序 background-image

.skeleton {
  background-size:
    32px 32px,  /* 头像 */
    200px 40px,  /* 标题 */
    100% 100%; /* 卡片背景 */
}

最后一步是将元素放在卡片上。这与position:absolute类似,表示left和top属性的值一样。例如,例如:我们可以给头像和标题 模拟24px的填充,以匹配真实内容卡的外观。

.skeleton {
  background-position:
    24px 24px,  /* 头像 */
    24px 200px, /* 标题 */
    0 0;        /* 卡片背景 */
}


使用自定义属性将其分解

这在一个简单的例子中效果很好, 但是如果我们想要构建一些稍微复杂的东西,那么CSS会很快变得混乱并且很难阅读。如果代码交接给另外一个前端开发人员,他们就不知道所有这些神奇的数字来是从哪里来的,显然这是不易难维护的。

于是乎,这里提出用自定义CSS属性,以更加简洁,更有利于前端开发人员的方式编写骨架样式 ,甚至可以考虑不同值之间的关系:

.skeleton {
  /*
    定义单独的属性
  */
  --card-height: 340px;
  --card-padding:24px;
  --card-skeleton: linear-gradient(gray var(--card-height), transparent 0);

  --title-height: 32px;
  --title-width: 200px;
  --title-position: var(--card-padding) 180px;
  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);

  --avatar-size: 32px;
  --avatar-position: var(--card-padding) var(--card-padding);
  --avatar-skeleton: radial-gradient(
    circle calc(var(--avatar-size) / 2), 
    white 99%, 
    transparent 0
  );

  /* 
    现在我们可以把背景分解成单独的形状
  */
  background-image: 
    var(--avatar-skeleton),
    var(--title-skeleton),
    var(--card-skeleton);

  background-size:
    var(--avatar-size),
    var(--title-width) var(--title-height),
    100% 100%;

  background-position:
    var(--avatar-position),
    var(--title-position),
    0 0;
}

这不仅可读性更好,而且以后更改一些值也更容易。另外,我们还可以使用一些变量(比如头像大小、卡片填充)来定义实际卡片的样式,并始终使其与骨架版本保持同步。添加一个媒体查询来调整不同断点的骨架部分现在也非常简单:

@media screen and (min-width: 47em) {
  :root {
    --card-padding: 32px;
    --card-height: 360px;
  }
}

ps:浏览器对自定义属性的支持很好,但不是100%。基本上,所有现代浏览器都有支持,IE / Edge有点晚了。对于这个特定用例,使用Sass变量很容易添加回退。

添加动画

为了使这更好,我们可以为我们的骨架设置动画,并使其看起来更像是一个加载指示器。
我们需要做的就是在顶层放置一个新的渐变,然后使用它来设置其位置的动画 @keyframes
以下是成品骨架卡外观的完整 骨架屏-demo


当然你可以使用:empty选择器和伪元素来绘制骨架,因此它只适用于空卡片元素,一旦注入了内容,框架屏幕就会自动消失

最后,感兴趣的同学可去我github下载这个骨架屏-demo源码传送门


本文转载自:https://www.mk2048.com/blog/blog.php?id=c1ic20jhj

前端老手
粉丝 10
博文 625
码字总数 0
作品 0
卢湾
技术主管
私信 提问
网页骨架屏自动生成方案(dps)

什么是骨架屏 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton ...

我花满楼
07/20
0
0
如何让你的网页“看起来”展现地更快 —— 骨架屏二三事

让网页展现的更快,官方说法叫做首屏绘制,First Paint 或者简称 FP,直白的说法叫做白屏时间,就是从输入 URL 到真的看到内容(不必可交互,那个叫 TTI, Time to Interactive)之间经历的时...

小蘑菇哥哥
2018/12/21
0
0
前端优化带来的思考,浅谈前端工程化

这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚...

范大脚脚
2017/11/16
0
0
前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几...

范大脚脚
2017/10/19
0
0
每天一点网站优化之:给vue应用添加骨架屏

title: 每天一点网站优化之:给vue应用添加骨架屏 date: 2019-07-30 17:00:00 tags: -JavaScript categories: JavaScript 骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构, 解...

carry666
09/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈Command命令模式

一、前言 命令也是类,将命令作为一个类来保存,当要使用的时候可以直接拿来使用,比如脚本语言写出的脚本,只需要一个命令就能执行得到我们想要的需要操作很长时间才能得到的结果。这是一个...

青衣霓裳
12分钟前
3
0
Less导入指令

在标准CSS中,@import 规则必须位于所有其他类型的规则之前。但是Less.js不在乎我们将 @import 语句放在什么位置。 @import 伪指令常用于在代码中导入文件,它将Less 代码分布在不同的文件上...

凌兮洛
12分钟前
2
0
【apk】空包签名

命令语法 jarsigner -verbose -keystore [keystorePath] -signedjar [apkOut] [apkIn] [alias] 例 子: jarsigner -verbose -keystore F:\签名\laidianyi_customer.keystore -signedjar F:\......

Agnes2017
16分钟前
2
0
虚拟化的操作技巧!

从物理基础设施迁移到虚拟基础设施时,虚拟环境的设计和布局应模仿物理做法,企业级虚拟化软件允许创建虚拟交换机,虚拟局域网(VLANS)和私有网络可以协助迁移,分析物理和逻辑网络图,复制...

青果云小潘
19分钟前
3
0
SEO网站运营助手

SEO网站运营助手有哪些功能? 提交: 百度链接主动提交 + 熊掌号周推(支持500万条提交额,所以合并在一起提交) 更新: 网站内容改动后,对于已收录的链接,可以选择更新 查询: 对百度收录判断...

NoCome
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部