寫在前面
幾天前看到薄荷前端團隊分享的《前端骨架屏方案小結》，突然回想起一年前看到的max bock寫的《Building Skeleton Screens with CSS Custom Properties》，翻譯整理寫下出此文，分享一下使用CSS自定義屬性構建骨架屏的技巧，先看骨架屏demo效果吧
設計Web上的載入狀態常常被忽略或被認為是事後考慮。效能不僅是前端開發人員的職責，構建與慢速連線一起工作的體驗也是設計挑戰。
雖然前端開發人員需要注意一些事情，比如壓縮和快取，但是設計人員必須考慮UI處於“載入”或“離線”狀態時的外觀和行為。
速度幻覺
感知效能是衡量使用者感覺速度的尺度。這個想法是使用者更有耐心，並且如果他們知道正在發生什麼，並且在內容實際存在之前能夠預測內容，那麼他們會認為系統更快。這在很大程度上與管理期望和保持使用者知情有關。
（Facebook的骨架屏）
（Slack的骨架屏）
例子
通過CSS繪製骨架
.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層 卡片背景 */
}
複製程式碼.skeleton {
background-size:
32px 32px, /* 頭像 */
200px 40px, /* 標題 */
100% 100%; /* 卡片背景 */
}
複製程式碼最後一步是將元素放在卡片上。這與position:absolute類似，表示left和top屬性的值一樣。例如，例如：我們可以給頭像和標題 模擬24px的填充，以匹配真實內容卡的外觀。
.skeleton {
background-position:
24px 24px, /* 頭像 */
24px 200px, /* 標題 */
0 0; /* 卡片背景 */
}
複製程式碼使用自定義屬性將其分解
.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變數很容易新增回退。
新增動畫
當然你可以使用:empty選擇器和偽元素來繪製骨架，因此它只適用於空卡片元素，一旦注入了內容，框架螢幕就會自動消失。
最後，感興趣的同學可去我github下載這個骨架屏-demo原始碼傳送門