从Facebook的新设计中窥探他们如何运用CSS技巧

Photo by Kon Karampelas on Unsplash

来源：https://ishadeed.com/article/new-facebook-css/

作者：Ahmad Shadeed

翻译：前端外文精选

最近，新的Facebook设计开始为用户推出，大约两周前我就收到了，最初，每个UI元素对我来说都有点大，我用了好几天才习惯。在本文中，我将讨论我所看到的所有有趣的事情。

来看看Facebook是怎么运用CSS的吧！

头像使用SVG

SVG用于头像图片，例如个人资料照片，您的页面或您所在的组。

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

我问自己，他们为什么要使用它？这是我的想法：

• 头像需要有一个内部边界与透明的黑色(10%)，使明亮的头像作为一个圆圈出现，即使是完全白色的头像。
• 无法将嵌入的 box-shadow 添加到HTML <img>。因此，他们使用了SVG来解决它。
• 为了使图像成为圆形，他们使用了SVG <mask> 和SVG <image> 元素。

正如我所提到的，头像内部的边框对于明亮的图像很有用。这是一个详细显示样机的模型。

内边框增加如下：

circle,
rect {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

如果图像是矩形的，则使用的形状是矩形：

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </g>
</svg>

有趣的是，主页Feed中的头像是使用 <img> 和内部透明边框的 <div> 元素构建的。如下：

<div class="avatar-wrapper>
  <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
  <div class="avatar-outline"></div>
</div>

CSS如下

.avatar-wrapper {
  position: relative;
}

.avatar {
  display: block;
  border-radius: 50%;
}

.avatar-outline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

由于SVG技术仅在少数地方使用，我想使用 <img> 和 <div> 的原因与页面大小有关。如果将SVG用于Feed头像，则会导致随着用户向下滚动而增加下载的KBs。

使用div间隔代替空白

我当时还不够大，无法住在间隔GIFS时代，但我看到了一些与他们有关的东西。如果可以的话，我将其称为spacer div？

我在这里加上一些背景，上面是在主页Feed中随机出现的好友请求部分。有一个人的网格，并且此网格有左边距。通常，我将通过 margin-left:16px 来执行此操作。但是，Facebook添加了<div> 作为容器边缘和网格之间的空间。

我想知道原因是什么？

• 也许在他们建立的设计系统中，容器元素不允许添加边距？
• 也许这是一个 react 组件，可以通过指定宽度来在任何地方使用？

为什么没有margin？据我所见，CSS(大约100K行)充满了utility 类，可以很容易地将一个类添加到包装器中以留出空白。

使用CSS过滤器

您看到那里的四个图标了吗？加号和箭头是图像，而Messenger和通知则是SVG元素。我不知道这种混合背后的原因是什么。

单击最后一个时，图标颜色变为蓝色。我问自己，当这是一张图片的时候颜色是如何变化的？图像在悬停时可能会更改吗？没有！我注意到有一个CSS过滤器可用于更改图像颜色。

.icon {
  filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}

是的，这是Facebook.com的生产代码，这对我来说很奇怪。用SVG图标代替它并简单地更改 fill 颜色难吗？

这也用于已验证的帐户图标。

并且还用于用户个人资料链接。

.icon {
  filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}

如果您想了解更多有关如何使用CSS滤镜将黑色图像转换为任何颜色的信息，那么此答案^[1]非常适合您。

为阴影使用图像

这是一个 2px * 14px 的图像，正在被重复。不仅如此，还有一个专用的 <div> 用于该阴影。使用它的目的是什么？

来自Facebook的Royi Hagigi证实，使用图片的原因是为了性能。在浏览器中，像这样的浮动Header上的框阴影会杀死滚动性能。

当Royi Hagigi被问及如何测试时，他回答：“滚动一个充满视频的页面，页面的随机部分会消失和重新出现。这是糟糕的。”

我完全同意。

广泛使用CSS变量

我喜欢他们使用CSS变量。从我所看到的，:root 元素中添加了320多个变量。这些值也用于黑暗模式。

切换暗模式时，会将 __fb-dark-mode 类添加到HTML元素。添加后，它将覆盖 :root 中定义的所有变量，如下所示：

:root {
  /* Light模式变量 */
  -fds-active-icon:  #3578E5;
  --fds-attachment-footer-background:  #F2F3F5;
  --fds-blue-05:  #ECF3FF;
  --fds-blue-30:  #AAC9FF;
  --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
  /* 覆盖light变量 */
  --fds-active-icon:  black;
  --fds-attachment-footer-background:  black;
  --fds-blue-05:  black;
  --fds-blue-30:  black;
  --fds-blue-40:  black;
}

这是class切换时的视频。我建议全屏查看它！

行截断（截断多行文本）

在侧边栏，有一个链接列表，比如用户简介，最近的，记忆…等。我注意到这里使用了多行文本截断。

.element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

上面的样式被添加为内联样式，并且它们也会根据浏览器进行更改。参见下面的模型：

浏览器对这个CSS特性的支持非常好。根据CanIUse，所有主流浏览器均支持该功能，但需要带有前缀。

使用Divs的悬停效果

通常，我们在CSS中进行悬停效果。例如，在悬停时需要不同灰色阴影的按钮，我们只需使用以下命令：

.element:hover {
  background: #ccc;
}

但是，对于像Facebook这样的大型网站，这似乎不切实际。在测试和检查东西的时候，我注意到一个元素，它只在hover上显示，它的主要工作是执行一个hover元素。

.hover-div {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 6px;
  inset: 4px 0px;
  background-color: var(--hover-overlay);
  transition-property: opacity;
  transition-timing-function: var(--fds-animation-fade-out);
  cursor: pointer;
}

这个元素在JavaScript中被切换，将不 opacity 从 0 更改为 1，所以我对它进行了一些操作，发现它被大量用于许多组件。

有关使用此元素的位置，请参见下面的屏幕截图集合：

我喜欢对很多元素使用相同的悬停效果的一致性和简单性。如果这意味着什么，那就是设计语言是一致的，系统是经过精心设计的。做得好，Facebook !

使用inset属性

这是top，right，bottom和left属性的简写。可以这样使用：

.element {
  inset: 4px 0;
  /* 这相当于: top: 4px, bottom: 4px, left: 0, right: 0 */
}

inset 属性用于某些元素的悬停div，并以HTML内联方式添加。我在以下组件上注意到了它：

在撰写本文时，根据CanIUse，仅Firefox 66+支持 inset。

dir =auto和CSS逻辑属性

对于像Facebook这样的多语言网站，有时很难预料内容会是什么样子。例如，post组件中的用户名具有 dir=" auto" 属性。这意味着文本的方向将基于语言。例如，对于英语，它将是从左到右，对于阿拉伯语，它将是从右到左。

除此之外，还有一个内联CSS可以更改文本方向（看起来 dir=auto 是不够的）。

<div dir="auto" style="text-align: start;">محتوى بالعربية</div>

请注意，在元素上添加了 text-align:start。这是一个CSS逻辑属性，等效于 text-align:LTR 布局的权利。

动态封面照片背景

你是否注意到有一个渐变，其颜色类似于封面照片中的主要颜色？这是根据封面照片动态添加的。怎么运行的？

1.获得主要颜色

首先，我们需要获取封面照片中占主导地位（最常用）的颜色。该团队创建了一个小的封面照片，只有这种颜色。

2.添加使用主色的背景

为元素添加的背景来自主色，为了清楚起见，我用白色边框突出显示了封面原始照片。

3.在背景上方添加渐变

.element {
  background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}

当设计为深色时，渐变从白色变为黑色：

.element {
  background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}

提示：你可以使用此工具^[2]从图像中获取主色。

多个框阴影

我喜欢这个团队为像下拉菜单这样的元素创建阴影的方式，阴影会让你觉得它有深度，而且比普通的阴影要真实得多。

.element {
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

您可能想知道，为什么会有带有50％透明白色的嵌入阴影？好吧，这是在黑暗模式下。请参阅以下有关该插入阴影的缩放图像：

聪明，我喜欢它！

Flexbox网格的空元素

我注意到网站上的所有网格都在使用flexbox。有一个引起我注意的是“您的照片”部分。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-items: space-between;
}

.item {
  width: 205px;
}

听起来不错，对吧？使用 space-between 作为间距是有风险的，因为在只有三张照片的情况下它可能会失败。请参阅下面的样机如何失败：

他们如何解决这个问题？好吧，有四个空的 <div> 元素，其宽度等于每张照片。HTML看起来像这样：

<div class="wrapper">
  <div class="item"><a href="#"><img src="photo.jpg"></a></div>
  <div class="item"><a href="#"><img src="photo.jpg"></a></div>
  <div class="item"><a href="#"><img src="photo.jpg"></a></div>
  <div class="item"><a href="#"><img src="photo.jpg"></a></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>
</div>

这样，那些空的div将充当假项目，并且它们之间的间距将保持相等。

使用vertical媒体查询

对我来说，很少看到vertical媒体查询的使用。我喜欢他们用它来缩短首页中新闻提要的宽度，这是使用的CSS：

@media (min-height: 700px) {
  .element {
    width: 584px;
  }
}

就是这样，伙计们。我喜欢撰写本文，并学到了很多东西。希望您觉得它有用，请传播它。

参考资料