设计 v17

我们在 1 月 1 日推出了一款新的网站设计！这是 CSS-Tricks 的第 17 个版本，如果您能相信的话。这些版本在最初发布后往往会有很大的发展，但我们会在这个 设计历史 页面上存档截图。正如我在 我们 2018 年的感谢帖子 中所说

这绝对是自 大型 v10 设计 以来投入最多的时间、精力和金钱用于重新设计。虽然有很多审美上的改变，但我们还做了相当多的用户体验工作、业务目标导向、工作流程调整和后端开发工作。

这是一个大事件！到目前为止，反响非常棒，但请您知道，我们会在接下来的日子里对它进行完善，并解决很多 bug。

以下是一些关于参与人员、设计过程以及需要注意事项的说明。

Kylie 领导了这个项目

Kylie Timpani 是这个项目的首席设计师，也是整个项目的负责人。

我是在 2017 年 4 月第一次联系她的，我们在 5 月份进行了聊天，并于 6 月份启动了这项工作。从我的角度来看，这是一个相当轻松的过程，因为我没有特别的截止日期，目标也比较宽泛。让我们做一个更有吸引力的网站，在各个方面都比现在做得更好。

Kylie 非常有条理，对这个项目各个方面的处理都非常细致。仅仅在 Kylie 为这个项目分配的第一个时间段内，她就

• 完成了内容完整清单
• 深入分析数据，以高层级了解用户、流量和使用情况
• 创建、分发和分析了读者调查，以更好地了解读者，并回答她对他们的具体问题
• 与 CSS-Tricks 的所有员工进行了交流，以了解他们的角色、工作流程和想法

Kylie 明显不是那种随便打开设计工具就开始胡乱操作的设计师。她是一位非常棒的视觉设计师，同时她也做足了功课。她接着与我们的广告代理商进行了交流，清楚地识别了网站目前的优势和劣势，并进行了简单的线框图绘制。

我一直使用 Figma 进行视觉设计工作，Kylie 也很乐意使用它作为设计工具。这很好，因为我们都有团队级访问权限，可以协作使用它。对我来说，它主要用于查看和参考所有内容，并对设计进行备注。

我们还使用 Asana 来跟踪正在进行的工作，最终作为跟踪 bug 和需要关注设计实施的地方。

非常感谢 Kylie 在这个项目中付出的辛勤努力！如果网站上有什么地方不太对劲或者存在 bug，那都是我实现不当造成的。祝你好运！⤵️

⚡️ 那么！说到人生大事……再过几个星期，我就要搬到旧金山了！我很高兴能加入 @nrrrdcore 和她在 Apple 的团队！👩🏻‍💻✨

— Kylie Timpani (@kylietimpani) 2019 年 1 月 7 日

设计相关

我会让你们自己探索设计，去发现我们添加的所有小细节，但我会重点介绍其中一些细节，其中可能包含一些你们会喜欢的技术细节。

橙色到粉色的渐变

显然，我们在这个设计中采用了深色模式。这与新的媒体查询无关，不过这让我想起我们可能需要考虑为那些专门设置了prefers-color-scheme: light;的用户进行更改。

品牌/强调/操作颜色为橙色和粉色，在深色背景下非常醒目，在浅色背景下也同样有效。

我做了一个简单的 Sass @mixin，它允许我在不同的角度使用这些颜色（如果需要，还可以进行变体）作为背景

@mixin orange-to-pink($deg: to right, $col-1: $orange, $col-2: $pink) {
  background-image: linear-gradient($deg, $col-1, $col-2);
}

以及在需要的地方用于文本（最常用于:hover和:focus）

@mixin gradient-text() {
  background: linear-gradient(to right, $orange, $pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

我们还需要将渐变应用于 SVG 中的填充和描边，所以我把它放在文档中，以便在需要的地方使用它。

<svg width="0" height="0" class="visually-hidden">
  <defs>
    <linearGradient id="orange-to-pink" x1="0" x2="0" y1="1" y2="0">
      <stop offset="0%" stop-color="#DA1B60" />
      <stop offset="100%" stop-color="#ff8a00" />
    </linearGradient>
  </defs>
</svg>

固定头部

头部总是有着一些意想不到的复杂性。我最近在处理新的 CodePen 头部/侧边栏时也遇到了这个问题，这个网站也一样复杂。这个网站复杂的部分之一是

• 它有自己的一套独特的断点。头部内容很丰富，所以断点非常具体，而且只针对头部。
• 我们想要一个固定位置（但最小化）的头部，在向下滚动时会显示出来。
• 当您登录时，页面顶部还会固定一个 WordPress 管理栏。我想考虑到这一点。

有一段时间，它变得非常混乱，我最终删除了整个头部的所有 CSS，并重新编写了它，将所有状态都考虑在内，并编写了使用逻辑的媒体查询，以清楚地指定每种状态下的样式。

非固定位置头部的想法本身很有趣。这意味着

• 您需要确定何时应用固定位置
• 您需要确保从非固定到固定（以及反向）的转换不会导致布局偏移

我对附加onscroll监听器并进行数学运算以确定何时进行切换感到非常紧张。我相信可以负责任地做到这一点，但我在这方面没有好运气。相反，我在屏幕上放置了一个很小的单像素元素，并附加了一个IntersectionObserver，并对其进行反应。这让我能够使用 CSS 调整元素的位置，这是一个不错的做法。

以下是该代码的简要说明

查看 CodePen 中 Chris Coyier 的作品：使用 IntersectionObserver 的固定头部 (@chriscoyier) on CodePen.

混合

这个设计的一个很酷的功能是主页上的混合区域。这是 Kylie 的一个想法，用来展示并提醒人们 CSS-Tricks 上丰富多样的内容。

穿过它的线条需要根据每个方框中 HTML 内容的高度进行调整。这些方框设置在 CSS 网格上，但它们仍然可以并且应该根据需要扩展以适应标题等。与其尝试用某种方式使用 SVG，不如通过每个方框上的border和border-radius将线条缝合在一起。为了使线条对齐，我偶尔需要使用transform对其进行微调。

也涉及了一些z-index。在过程中犯一些错误很有趣

卡片

我有点喜欢原生滚动捕捉。卡片在台式机上有一种有趣的动画，在悬停/聚焦时会显示整张卡片，而在移动设备上，您可以看到整张卡片，但很容易用拇指翻阅

感谢 Amelia！

设计要求使用这些弯曲的线条分隔符

我对SVG 路径语法略知一二，所以我第一次尝试了它。我能够设计它，它可以很好地绘制线条，并保持所需的描边宽度，但它没有按比例缩放。

查看 CodePen 上由 Chris Coyier (@chriscoyier) 创建的 Lighted Path。

我邀请了 SVG 专家 Amelia Bellamy-Royds 来帮助我完成这个项目。您可以随意检查网站代码，看看它是如何实现的。它涉及到蒙版、嵌套 SVG、矩形、变换等等有趣的技巧。Amelia 实际上创建了四种代码变体，并仔细记录了每种变体的优缺点。最终，我们选择了这种方式

查看 CodePen 上由 Amelia Bellamy-Royds (@AmeliaBR) 创建的 Lighted Path。

---

Amelia 还帮助我完成了“圆形文本”的设计元素。Kylie 模仿了一些实例，我觉得它们非常酷，我绝对想要实现它们。有一种非常复杂的方法，可以通过 将字符拆分成 span 并进行变换 来实现，但与 SVG 的 <textPath> 相比，这种方法有点混乱。我知道我想走 SVG 路线，但也许可以把它抽象成一个可重复使用的组件，这样每次我想使用它时，就不会出现一堆代码。

我突然意识到，Web 组件可能是最好的选择，因为我可以自己发明 API。我想要一个圆形文本组件做到以下几点：

1. 传入要在圆形上设置的文本
2. 声明圆形的半径
3. 旋转圆形，以便我可以从圆形上的任意点开始文本

这对于 Web 组件来说非常合理

<circle-text r="3em" rotate="-90deg">
  CSS is super fun & cool & I like CSS!!!
</circle-text>

我对 Web 组件的了解有限，所以我再次联系了 Amelia，她精通 Web 组件和 SVG——完美的匹配！ 这是她能做到的，我很容易地将它集成到这个设计中。

谢谢，Ana！

Kylie 想出的另一个设计，让我有点困惑，就是这条线

我以为可能是 SVG，但我真的想在里面很好地嵌套普通的 HTML 内容。我希望可以用边框或一些 CSS 样式来实现它。我联系了 Ana Tudor，她在处理棘手的设计问题和用原生浏览器技术解决问题方面非常出色。Ana 能够使用主区域中的多个渐变背景和一个飞出的右上角边框来快速找到一个很好的解决方案。

查看 CodePen 上由 Ana Tudor (@thebabydino) 创建的 nav。

谢谢，Zach！

字体是网站加载体验中独一无二的一部分，因为它们的出现（或缺失）、显示方式以及变化方式都在网页的感知性能中发挥着重要作用。

我很幸运能够 与 Zach Leatherman 聊过字体加载，但我仍然不完全确定在任何情况下最佳实践是什么。对于这个 CSS-Tricks 的设计，我决定对大多数正文使用 系统字体堆栈。这样做的好处是，它可以立即渲染，而且在技术网站上看起来不错，更不用说它通常与我们的标题字体 Rubik 搭配得很好。

但是我们仍然需要处理 Rubik。Zach 将有一篇即将发表的文章详细介绍这个问题，但要点是：

1. 创建一个最小化的 Rubik 子集，它可以处理大部分使用情况
2. 用 <link rel="preload" ... > 加载它
3. 使用 @font-face，并使用 font-display
4. 在异步的第二阶段加载更强大的版本

所有参与 @css 重新发布的人干得漂亮！

看看那些 Web 字体在 2.09 秒的快速 3G 首次渲染中出现 🎉

(完全公开，我在字体加载方面也提供了一点帮助 😇) pic.twitter.com/Ih7zJhelQQ

— Zach Leatherman (@zachleat) 2019 年 1 月 1 日

网站的某些区域已过时

论坛 是网站中一个非常复杂的设计和维护区域，我所做的是直接加载默认的 bbPress 样式，而不是尝试覆盖它或从头开始。我认为这将是未来最好的发展方向。

这个网站有一个图库部分，但我现在甚至没有链接到它，因为我们并没有很好地更新它，而且它也没有被使用太多。不过 URL 仍然有效。也许它有一天会回归，但就目前而言，我享受着减少一些技术和内容负债带来的乐趣。

技术栈

它 有点无聊。它与我一直在做的事情大致相同。它是一个 WordPress 标准安装，带有自定义主题、十几个插件以及一些自定义编码的功能，比如让图片由 Cloudinary 提供支持。它运行在一个自定义的 Media Temple 构建的机器上，因此它可以拥有 PHP 7 和 MySQL 5.6，以及一个充当 CDN 的防火墙。拥有一个相当快速的底层基础很棒，因此作为前端开发人员，我需要保持这种状态。

我使用 SVG 作为图标，使用 Sass 进行样式设置，并使用 Babel 以 ES6 编写基于 jQuery 的功能。我编写了一个 Gulp 文件来完成所有这些处理，并运行本地 BrowserSync 开发服务器。使用 Local by Flywheel 的本地 WordPress。

我对这个技术栈实际上很满意，因为它对我来说很快且富有成效。但我承认，我内心的一部分希望我能更深入地研究新技术，比如构建基于 webpack 的处理，或者尝试完全使用基于服务器渲染和 React 的无头 WordPress，通过 GraphQL 之类的东西。我之所以没有这样做，是因为无聊的技术一直对我很好，而且时间是一个主要因素，因为我独自开发（我的预算无法负担一个完整的开发团队）。我猜测，对前端基础设施进行重大改造，将使开发时间增加三倍，而收益却很可疑。这听起来仍然很有趣，而且可能会为未来打开大门，但嘿，以后再说吧。

我最遗憾的是，我希望我一开始就建立了一个真正的模式库系统。我认为我在将事物分解成可重复使用的部分方面做得不错，但该网站并不真正“组件化”。当我接近终点时，我开始看到，如果我使用真正接受数据并具有变体等的组件，这可能会让我更顺利。原生 PHP 不适合这种工作，因此它会迫使我使用某种模板系统，而我可能不会后悔。如果下次我仍然使用 PHP，我可能会使用像 Timber 和 Twig 这样的东西来实现所有组件，然后使用 Fractal 来实现模式库，因为它 支持 Twig。我喜欢 Timber 将数据从视图中抽象出来的方式。

---

我以前没听说过这个应用程序，但请查看 Project Wallace

Project Wallace 是一个旨在深入了解您 CSS 长期变化的项目。它起源于几年前，当时我对现有的 CSS 分析器感到沮丧，因为它们只进行一次性分析。随着时间的推移，越来越多的功能被添加进来，现在 Wallace 已成为开发人员想要了解其复杂性是否增加，或者设计师想要了解是否正在使用所有正确的颜色和字体的理想去处。

Bart Veneman 将它设置为监视 CSS-Tricks，您可以 查看前后对比 和随时间的图表。Bart 也为我们写了一篇关于这些数据的博客文章。谢谢 Bart！

CodePen 嵌入

CodePen 嵌入主题 的真正用处在这里体现出来。嵌入主题的重点是，您可以使用它们来匹配 Pen 将要嵌入的位置的设计，如果您需要更改该设计，您可以一次性更改所有主题。这个网站上可能有数千个嵌入的 Pen，它们都通过一次主题更改而更新。

我在这个网站上的 CodePen 嵌入做了一些特别的事情

• 它们可以从右下角调整大小。使用 jQuery。 像这样。
• 它们有一个占位符高度。 当你嵌入一个 Pen 时，你可以选择你想要它有多高。 这就是 <iframe> 将会呈现的高度。 但是我调整了它，使得在 iframe 之前出现的 <p> 将具有相同的高度，这样就不会出现重排抖动。

我用正则表达式自己处理了这个家伙，就像这样

function codepen_reflow_fix($content) {
  $content = preg_replace('/data-height=(\'|")(\d*)(\'|")/', 'data-height="$2" style="height: $2px;"', $content);
  $content = preg_replace('/data-theme-id="\d*"/', 'data-theme-id="1"', $content);
  return $content;
}
add_filter('the_content', 'codepen_reflow_fix', 10);

我们很快就会将这个功能带到 CodePen 本身。 注意上面正则表达式中我也强制了主题 ID。 这样，所有嵌入的 Pen 都能拥有正确的主题，即使我们忘记了。

成就解锁：自定义滚动条是每个人都又爱又恨的新功能

如果 CSS-Tricks 的每个设计都有一个共同点，那就是至少有一个功能人们要么喜欢要么讨厌。 这一次，我很高兴地宣布，它就是自定义滚动条。 从某种意义上说，它是为了我自己。 我手动使用滚动条很多次，抓住这个又大又厚实的粉色爱块感觉既有趣又非常实用。

它也略微受到 VS Code 的启发，VS Code 本身也拥有一个非常厚实的滚动条。

当然，关于自定义滚动条的一般 可用性考量，但我认为在这里并没有过分违背，如果有的话。 我听说了一些“不要乱动我的浏览器 UI”的反馈，我有点理解，但那是否意味着我们不应该对任何表单控件进行样式化，或者甚至根本不使用 CSS？（哈哈。）而且滚动条不是来自系统，而不是浏览器吗？

无论如何，我没有伪造它们或任何东西。 我只是在使用 ::-webkit-scrollbar 和朋友们。 有 官方滚动条样式 东西 正在路上，根据 CSS 规范。 我没有使用任何这些东西/ 我想我会至少等到一个浏览器支持它。

---

我们还有很多错误修复和完善工作要做。 如果你通过电子邮件、推特或其他方式与我们联系过，我可能已经看到了，并且一直在记录所有内容，以确保我们尽力解决所有问题。 另外请关注一些有趣的新功能！

如果你有任何想法，请随意在此留下评论，使用我们的 联系表格，发送电子邮件至 [email protected]，或在我们的新 Spectrum 社区 中聊天。