感谢 (2022 版)

你知道，每年这个时候，Chris 通常都会发表一篇关于过去一年的回顾文章。 第一篇 发布于 2007 年，也就是 CSS-Tricks 创办的同一年，并且 一直持续到 2021 年，从未间断。作为这些年来 CSS-Tricks 的读者之一，我非常不希望看到这种情况改变。

所以，我们来了！就过渡而言，2022 年绝对是不平凡的一年。在去年的这个时候，我们展望了新的一年的一些目标（我们稍后会谈到），但最终加入了 DigitalOcean。这是一个巨大的变化（双关语），但你们一路陪伴着我们。对我来说，你们中的很多人来到这里阅读我和其他一些客座作者发布的内容，这真的意义重大。没有你们，这里就不再是一个社区（也不再有趣）。

谢谢！

这是今年发布的最后一篇文章，因为我们要挂上“休渔”的牌子过节了。我们将于 **1月9日** 返回，带来一批刚出炉的内容。

好的，现在我们要开始深入研究网站的分析数据。这是我们一直以来都保持透明的事情，并且会继续这样做。我们的数据并不存在于某个禁止访问的黑盒子里，希望分享这些数据能够以某种方式帮助你和你的业务。

总体流量

总的来说，Google Analytics 显示全年总共有 **6400万** 次页面浏览量。这比去年的 8800万次 **下降了很多**，乍一看令人担忧。我的意思是，谁希望看到同比流量 **下降 27%** 呢？

但这是有原因的，因为我们今年发布的内容 **少了很多**。我们都知道 Chris 是一位多产的作家（当然， 现在仍然是），经常一天发布多篇文章。这有点像我们失去了在大部分时间里最有生产力的撰稿人。让我们比较一下过去几年的发布活动

• **2020 年：** 1183 篇文章
• **2021 年：** 890 篇文章
• **2022 年：** 390 篇文章

考虑到我们发布的文章比去年 **减少了 43%**，比 2020 年的总数 **减少了 67%**，页面浏览量下降 27% 就没那么令人担忧了。

嗯，我不觉得我工作量减少了 67%……

所有这些都带有这样的警告，即这仅仅是我们从 Google Analytics 获取的数据。在过去的几年里，Chris 将这些数据与来自 Cloudflare（位于网站顶部的 CDN 层）和 Jetpack（将我们自托管的 WordPress 网站连接到 WordPress.com 的 SaaS 功能的插件）的统计数据进行了比较。结果始终不一致，以至于我这次甚至都不想看了。（好吧，好吧，也许只是 Jetpack……它显示了 5990万次页面浏览量——奇怪的是，比 2021 年的 5500万次总数还要多。）

文章数量

这是我每年都期待的事情！以下是 2022 年 **在 2022 年发布的** 前十篇文章

1. 6 个 CSS 链接悬停效果创意 — Harshil Patel
2. 帮我解释一下 Twitter 源代码的前 10 行 — Anand Chowdhary
3. 2021 年最热门的前端工具是什么？ — Louis Lazaris
4. 使用新的 HTML 对话框元素替换 JavaScript 对话框 — Mads Stoumann
5. 向 selectmenu 问好，这是一个完全可样式化的 select 元素 — Patrick Brosset
6. 在用户离开页面时可靠地发送 HTTP 请求 — Alex MacArthur
7. grid-template-columns — Mojtaba Seyedi
8. CSS 级联层的完整指南 — Miriam Suzanne
9. CSS 数据库查询？当然可以！ — Chris Coyier
10. CSS-Tricks 加入 DigitalOcean！ — Chris Coyier

我实际上很惊讶最后一篇文章没有排在更高位置。而且我真的很高兴看到年鉴中的一篇文章出现在其中，特别是因为 Mojtaba 在过去一年半的时间里一直在努力 所有 CSS Grid 属性，并且他取得了巨大的成功。在阅读了他打包到每个属性中的所有金块之前，我以为我对网格有很好的理解。里面有太多东西要学习，而 Mojtaba 有一种清晰地解释复杂事物的天赋。我希望用所有这些新的信息来更新 CSS Grid 指南（但稍后再详细介绍）。

我也喜欢看到 CSS 级联层指南出现在其中！我和 Miriam 在一起工作时玩得很开心。如果你不知道的话， 她是规范的编辑。很荣幸（也是一种荣幸）能在这里展示她的作品，并让我们所有人能够将其添加书签并作为参考。

为了好玩，以下是 11-20 名

11. 使用基本 JavaScript 进行动画 —Md Shuvo
12. Flutter 面向前端 Web 开发人员 —Obumuneme Nwabude
13. CSS Grid 和自定义形状，第 1 部分 — Temani Afif
14. 编写 HTML，HTML 方式（而非 XHTML 方式） — Jens Oliver Meiert
15. 4 个新的 CSS 颜色功能速览 — Chris Coyier
16. 使用背景属性的酷炫悬停效果 — Temani Afif
17. 让我们创建一个微型编程语言 — Md Shuvo
18. 使用背景裁剪、蒙版和 3D 的酷炫 CSS 悬停效果 — Temani Afif
19. 使用 HTML + CSS 创建完美的目录 — Nicholas C. Zakas
20. 基于 CSS 的指纹识别 — Chris Coyier

2022 年发布的所有文章共产生了 **480万** 次页面浏览量，约占所有页面浏览量的 **7.8%**。我们访问量最大的文章始终是那篇老旧的 Flexbox 指南，今年的浏览量为 **580万** 次。我希望看到我们的新内容超过这篇文章，我相信如果我们保持发布速度，这很容易实现。这里做一个粗略的估算，如果我们发布了 540 篇文章以匹配去年的文章数量，那么我们的页面浏览量可能约为 6700万次。

如果我们退一步，那么我们可以看到过去一年访问量最大的文章，无论它们何时发布

1. Flexbox 完整指南
2. Grid 完整指南
3. 完美的全页面背景图像
4. CSS 的形状
5. 标准设备的媒体查询
6. 使用 SVG
7. 如何缩放 SVG
8. CSS 三角形
9. CSS 中的渐变边框
10. 使用省略号截断字符串
11. 如何在 CSS 中使用 @font-face

是的，几乎与去年相同。以及前一年。以及前前一年。以及……好吧，几乎如此。“CSS 中的渐变边框”是新增的，将 box-shadow 属性挤出了榜单。其他从第四名开始的条目仅仅交换了位置。

说到年鉴中的属性，我想看看你们过去一年引用最多的是哪些

1. ::after / ::before
2. transition
3. box-shadow
4. scrollbar
5. justify-content
6. flex-wrap
7. gap
8. overflow-wrap
9. animation
10. white-space

顶部是一个伪元素，之后都是属性。很有趣，考虑到像 :has()、:is() 和 :where() 这样的关系伪选择器函数是新成员。

时事通讯

这里的数据过于混乱，无法得出任何有见地的结论。在迁移到 DigitalOcean 之后，我们不得不为了合规性而清理了 91K+ 订阅者的列表，结果订阅者数量骤降。如果你被从列表中删除了， 可以在这里重新订阅。

好消息是？我们仍在继续发布时事通讯！我们在经历了五个月的暂停后， 于 8 月份重新启动了它。我们曾经以每周的频率发布，但现在改为每月发布一次，因为我本人正在撰写它。我当然希望能够恢复到每周发布一次。（我想念你，Robin！）

网站更新

说实话，过去一年主要精力都放在维持网站的正常运行上。除了做了一些小的调整和维护之外，网站跟去年这个时候相比变化不大。

2023 年情况将发生巨大改变。如果你一直关注我们每月的《Behind the CSScenes》更新，那么你就会知道，我们计划将 CSS-Tricks 从 WordPress 迁移到 DigitalOcean 用于其所有（优秀的）社区内容 的同一个自制 CMS 上。

这项工作在几个月前启动，预计将在今年上半年完成。我们一定会随时向大家更新进展。除了全新的设计和新的后端之外，网站的运作方式应该保持不变。如果你对这项工作以及它对你最喜欢的前端出版物意味着什么有任何疑问，请在评论区留言或发送邮件给我。

如果你还没看到，这里有一些我们设计师 Logan Liffick 制作的设计稿

2021 年目标回顾

哎，我甚至有点犹豫要不要看。整合 DigitalOcean 并找到新的节奏所花费的所有努力占据了大家的大部分时间，留给实现 Chris 目标的时间少之又少，而他的目标是：

• ✅ 更注重 SEO。我给我们的表现打个及格分。事实上，在被收购之前，Chris 和我早已开始在这方面下功夫了。我们用 RankMath 替换了 Yoast SEO 插件，利用其编辑器内的工具帮助我们学习如何优化文章以提升搜索结果排名。需要明确的是：我们关注搜索引擎优化并不是为了吸引更多赞助收入，而是认识到搜索是读者找到我们的主要方式，并让你们更容易找到想要的内容。尤其是在 DigitalOcean 支持我们、我们不再像以前那样依赖赞助的情况下，这一点变得更加重要。
• 🚫 另一本电子书。彻底失败！好吧，我们实际上从未开始过，或者说根本没有踏上征程。（体育类比是不是这样用的？）Chris 在 2020 年出版了一本《The Greatest CSS Tricks》的书籍，并将其作为 CSS-Tricks 付费订阅用户的福利。今年的计划是再出版一本，但我们取消了付费订阅，并向所有人免费开放了《The Greatest CSS Tricks》。
• 🚫 更多社交媒体实验。没有！但这可能是最好的结果，考虑到 Twitter 目前的状况。明年，我们可能不得不在这个领域进行更多实验，这更多是出于必要而非兴趣。Twitter 一直以来都只是 CSS-Tricks 流量中微不足道的一部分；以至于投资它就像把鸡蛋放在错误的篮子里，或者说是桶里。我不知道。我的一部分只想静观其变，看看情况如何发展，然后再决定是否采取任何新的或不同的行动。

2023 年目标设定

新年新目标，对吧？让我替团队说几句话，并预测一下我认为我们在 2023 年的首要任务。

• 顺利完成网站迁移。没有什么比无缝迁移到 DigitalOcean 的架构更让我高兴的了¹。但说真的，我们都知道，在关键时刻总会出现一些问题。这个网站拥有 7000 多篇文章，这些文章是在 15 年的时间里撰写的，在这段时间里，网站经历了19 个版本的迭代。有如此多的自定义帖子类型、自定义字段、页面模板、功能插件、集成，以及一个超过 6GB 的数据库需要迁移并映射到现有的系统中。好在我们有一支由顶尖开发人员组成的团队来负责这项工作！
• 发布 1-2 个新的指南。事实上，我希望能设定更高的目标。我们从 2020 年的 9 个新指南减少到 2021 年的可怜的 1 个，以及去年发布的另一个指南：Miriam 的CSS 级联层完整指南。我有一个包含 10 个我想写的指南的清单，但考虑到我们最近的表现，我想我们会把目标定得很低。我之前提到过，我想把 Mojtaba 在《年鉴》中的工作整合到现有的 CSS Grid 指南中。这可不是一件容易的事，如果我们能做到，我会把它算作达成目标。
• 扩展《年鉴》。这是我的宏伟目标。我希望能在其中看到更多类型的文档。我们已经有了伪类和属性，这很棒，一直以来都是如此。但是，天哪，想想我们还可以添加多少其他内容：函数、At 规则、单位、选择器、属性值等等。我们只是触及了可以包含在其中的内容的皮毛！如果我们能实现其中的一项，我就会处于 place-self: heaven 的状态。

非常非常感谢！

这是我的梦想工作，如果没有像你们这样的读者，我将无法拥有它。我不敢相信我的第一篇文章发表已经八年了，而我仍然在这里，与从我们领域最聪明的人那里学习。我可以滔滔不绝地（比我现在说的还要多）谈论 CSS-Tricks 社区对我意味着什么，但归根结底是……谢谢，谢谢，谢谢。衷心感谢。

还要感谢 DigitalOcean 的所有工作人员，他们为 CSS-Tricks 提供了一个很棒的家。特别感谢 Haley Mills、Sydney Rossman Reich、Bradley Kouchi、Karen Digi、David Berg、Matt Crowley、Logan Liffick 和 Kirstyn Kellogg，他们让我快速融入团队，并让我感到非常受欢迎。这是一个很棒的地方。

前进！