感谢 (2021 年版)

一年即将结束，是时候再来一次年终总结了。 最重要的信息是：感谢。（thankyouthankyou）

感谢您光临并阅读本网站。 如果您没有，我可能已经失业了，而我非常喜欢这份工作，所以这一切都要归功于您。 就像一封家庭节日贺卡，请允许我分享一下我们从自己的角度对这一年的回顾，既有数字，也有感受，然后回顾一下我们的目标。

总体流量分析数字

今年网站的页面浏览量为8800 万，比去年的 9300 万下降了 6%。 在过去 4-5 年中，流量一直在波动，但这次的 6% 下降幅度有点令人担忧，我不希望看到这种情况。 这些数字来自 Google Analytics，我自己的一些研究 表明，今年访问本网站的 20%-30% 的访客实际上屏蔽了我在使用的传统客户端 JavaScript 驱动的 Google Analytics。 因此，真实的流量可能更高，但由于分析实现完全相同，并且我认为没有理由在过去一年内阻止行为突然激增，因此这种下降趋势似乎是真实的。

有机搜索流量下降了约 3%，这在很大程度上导致了流量下降。 这是一个很大的数字，因为搜索占所有流量的74.6%。 这表明我们并没有很好地满足人们的搜索需求。 直接流量增长了 36%，表明品牌知名度相当不错，但直接流量只占总体流量的5%，因此与搜索引擎流量相比，它的影响并不大。 推荐流量下降了，社交流量上升了，但它们现在都只是一小部分，不足以改变局面。

您可能会想，嗯，内容会随着时间的推移而老化，搜索引擎对现有内容的流量会随着时间的推移而下降。 这是真的，但我们每年都会发布大量新内容，并维护和改进现有内容，因此我们对此感到担忧。

我们每年都会在新的和更新的内容上投入数十万美元。 因此，看到流量下降令人沮丧。

但嘿，这有时就是游戏的规则。 我怀疑这是开发者写作领域竞争激烈的原因，这对我们所有开发者来说都是有利的，所以这并不是什么坏事。 我们将继续学习，尽最大努力扭转这种局面，以维护本网站的健康状况。 我已经有了（数着手指和脚趾）一百万个想法了。

尽管如此，虽然我认为页面浏览量对于使用广告作为主要商业模式的网站来说是一个有趣且相关的指标，但还有许多其他指标。 今年的独立访客数量2630 万，比去年的 2580 万有所增加，这表明今年访问本网站的不同的人更多，这很好，只是他们没有在网站上花费那么多时间，或者没有那么频繁地回来。 每位访客浏览的页面数非常稳定，为1.35，这意味着大多数人来访，阅读，然后离开。 这并不奇怪。 主要是要解决“回来”这个问题。

移动流量的又一次大幅跃升

今年移动设备的使用量大幅增长！

2021: 20%
2020: 15%
2019: 15%
2018: 12%

五分之一的流量非常有趣。 2018 年之前，尽管移动流量当时也在激增，但我们还不到个位数，我一直认为嗯，这是一个用于编码的参考网站，人们在台式机上进行编码。 但显然，这种情况正在改变，也许人们以一种更新闻的方式阅读本网站，我喜欢这种方式。 多年来，我一直希望将这个网站打造成一个既充满参考性长篇内容，又可以订阅获取新闻的网站，就像一本行业杂志。 目前为止一切顺利。

内容数字

您可能会认为，如果我们今年在新的内容上没有达到目标，那么也许其他一些更好的年份会超过 2021 年撰写文章的流量，但事实并非如此。 在 2021 年撰写的文章在 2021 年为本网站带来了最多的流量（占总体流量的 13.5%）。 以下是2021 年撰写的 2021 年按页面浏览量排名前列的文章。

1. VS Code 的 HTML 扩展 — Chris Coyier
2. 如何使用 CSS 创建霓虹灯文本 — Silvia O’Dwyer
3. 使用 Lottie 动画 — Idorenyin Udoh
4. 您知道 :has CSS 选择器吗？ — Robin Rendle
5. 一个既有粘性标题又有粘性第一列的表格 — Chris Coyier
6. 比较新一代的构建工具 — Hugh Haworth
7. 我作为工程经理犯过的错误 — Sarah Drasner
8. 让我们创建一个自定义音频播放器 — Idorenyin Udoh
9. HTML 输入和标签：一段爱情故事 — Amber Wilson
10. 前端测试适合所有人 — Evgeny Klimenchenko

我几乎不应该发布这些列表！ 看看 Daniel Aleksandersen 发生了什么事.

上面的这些文章的页面浏览量从 10 万到 7.1 万不等。 有趣的是，如果你将所有页面浏览量达到 4 万或以上的文章分组，共有 44 篇，总计约250-300 万次页面浏览。 我认为这很酷——这里的“中等尾巴”内容相当丰富。 仅 flexbox 指南页面就获得了670 万次页面浏览，所以它仍然是一个巨兽，但它被所有 2021 年发布的内容超越，后者达到了 1180 万次页面浏览。 因此，内容投资是有效的，只是需要调整，以便我们不会出现总体下降。 也许这意味着对新内容和旧内容进行 SEO 调整。

以下列出了 2021 年的 11-20 名，仅供娱乐。

11. 对大脑来说，阅读计算机代码与阅读语言不同 — Geoff Graham
12. 赞美明确的点击菜单 — Mark Root-Wiley
13. aspect-ratio — Geoff Graham
14. 使用 React 和 styled-components 进行主题和主题切换 — Tapas Adhikary
15. 使用 CSS Grid 实现圣杯布局 — Chris Coyier
16. 在 Git 中创建完美的提交 — Tobias Günther
17. 如果… 您可以在浏览器开发者工具中使用 Visual Studio Code 作为编辑器？ — Geoff Graham
18. CSS 是一种编程语言吗？ — Chris Coyier
19. 致 HTML & CSS 的情书 — Ashley Kolodziej
20. CSS 中的 JSON — Chris Coyier

以下是无论年份如何，但仍然局限于 2021 年流量的前 10 名。

1. Flexbox 完整指南
2. Grid 完整指南
3. 完美全页面背景图片
4. 使用 SVG
5. CSS 的形状
6. 标准设备的媒体查询
7. box-shadow
8. CSS 三角形
9. 如何在 CSS 中使用 @font-face
10. 如何缩放 SVG

我乐于看到年鉴不仅整体表现良好，而且一些单独的页面本身也成为热门页面。

评论

今年网站上的有效评论约为4320条，几乎与去年的数量完全相同。 太奇怪了！

这似乎很多，特别是考虑到我们只批准了……我猜是大约一半……的评论者。 存在许多垃圾帖子（例如，“好帖子！”之类的东西，我们不会发布，以免打扰作者收到无用的新评论电子邮件通知，也不打扰读者看到无用的内容）。 我们只是删除这些垃圾帖子（也就是说，在第一时间不批准它们）。

当然，还有垃圾邮件。 我们已经超过了200 万条垃圾邮件评论门槛，但通过结合使用Akismet 和 Anti-Spam，并没有太多垃圾邮件能够通过，而且很容易在批准前被删除。

从心理上来说，我对评论的态度就像过山车一样。有时候它们很棒也很有帮助。有时候它们充满了粗鲁、仇恨和愤怒。那些需要被查看和删除，这意味着评论成为了所有负面情绪进入我大脑的入口。我的一部分认为我们应该直接关闭它们，如果人们有重要的事情要说，我们可以鼓励他们使用自己的博客（创建博客并不难！）来评论，如果评论内容不错，我们会链接到他们的博客。

但随后我又想到了所有那些有用的评论，以及帮助我及时了解最新信息的评论。实际上，我刚刚从 Kyle 的评论中得知 Chrome 正在推迟所有关于移除 alert() 的内容 via a comment from Kyle，否则我可能就错过了这个消息。再加上今年有4,320 条评论通过了审核，感觉平衡向保留评论倾斜了。

时事通讯

今年结束时，我们的时事通讯订阅者数量约为 **91,000**，比去年的 81,000 增长了。这是一个不错的进步，很有可能我们在 2022 年某个时候会达到 100k 的里程碑。

对 Robin 带领的 时事通讯及其精彩的写作表示衷心的感谢。我认为他在今年的时事通讯中找到了自己的声音和步调。

我们没有错过任何一个星期。帮助我们按时发布的一部分原因是，时事通讯有赞助商，因此存在明确的义务要按时发布它们，但我觉得更像是我们有了 一个系统，并且这个系统运作良好。

我真的很想增加时事通讯的订阅数量，因为我认为这实际上是一份很棒的周刊读物，而不是出于任何特定的商业原因。

视频

感谢 Dave 的想法，我们让 ShopTalk 更多地转向视频，我们一直在使用 CSS-Tricks YouTube 频道，因此在视频发布方面取得了丰收的一年！**35** 个全新的视频！

网站更新

今年的设计略有变化，但没有太大的改变。通常在每年的这个时候，我的手指都会因为想要一个新设计而发痒，相信我，已经有 Figma 草稿在酝酿中了，但我还没有时间或灵感来做真正的 v19。

因此，网站背后的技术没有重大变化，但有很多细微的改进。例如

• Yoast SEO 插件给我带来了一些问题。它非常频繁地更新，我想这很好，但是更新过程中经常出现问题，导致核心插件或专业版插件无法正确更新（甚至导致网站崩溃），并且更新过程中设置会变得混乱。有一段时间，我把插件完全关闭了。但后来我开始听到关于 RankMath 的好消息，所以我正在尝试使用它，到目前为止一切顺利。它让我有点想更认真地对待内容 SEO。Yoast 在网站的其他地方也有一些影响，例如，它提供了一个非常好的目录块，我还在寻找解决方案（也许它即将出现在 核心代码库中？）。它也有非常好的面包屑导航，并且不得不切换到 Breadcrumb NavXT。
• Jetpack Boost 是今年网站上的新插件，我对它处理关键 CSS 的方式印象深刻。 Jetpack（完全披露：长期赞助商）通常非常有用。我特别喜欢网站搜索功能，它就是开箱即用的 Jetpack Instant Search。
• 今年我们真的优化了 社交媒体图片。
• 我们也优化了电子商务的情况。MVP 支持者会员资格解锁了网站上的额外内容，我现在可以 以电子书格式提供这些内容。所以我已经准备好了制作更多这类内容。

目标回顾

🚫 发布三本指南。我认为这很容易，因为去年的目标是 2 本指南，我们发布了 9 本！但今年我们只发布了一本：自定义属性完整指南。我们确实发布了一些其他非常大的系列，例如 Tobias Günther 的 9 部分高级 Git 系列，以及 Jay Hoffman 的 网页历史系列中的另外四篇。

🚫 专注于我们擅长的技术类文章。这有点接近了。我们并没有发布很多技术类文章。但我认为我们失败了，因为我不认为我们全年都非常重视这个目标。我们并没有说“我们擅长这种类型的内容，所以我们将会重点关注这些内容”，就像这个目标暗示的那样。

🚫 完成所有缺失的年鉴条目。我不想把这个标记为失败，但我这样做是因为它的措辞是“所有”。我认为我当时的想法是，要完成的年鉴文章数量是有限的，我们只需要完成这些就行了。我认为这比这要含糊得多，部分原因是编辑的选择（例如，你是否为每个 逻辑属性 发布一个独特的条目，还是将它们分组）。

而且，我们是否应该创建一个专门的 SVG 部分？我们是否应该为所有 @at 规则创建一个新部分？很难说年鉴何时会“完成”，所以我不希望这样做。这个页面确实需要清理，但是它里面有很多想法，需要做更多工作/委托，如果有人有兴趣的话。

不过，我们确实在发布新条目方面做得不错——比任何最近几年都要多！

年鉴条目	已发布
scale	2021-11-10
translate	2021-11-09
rotate	2021-11-08
mask-border	2021-11-03
padding-inline	2021-09-23
overscroll-behavior	2021-09-14
border-block	2021-09-02
outline-color	2021-09-01
accent-color	2021-08-26
block-size	2021-08-25
outline-style	2021-08-16
outline-width	2021-08-10
text-emphasis	2021-08-04
::backdrop	2021-08-03
hyphenate-limit-chars	2021-07-15
:fullscreen	2021-07-14
mask	2021-07-02
content-visibility	2021-06-21
place-content	2021-05-13
mask-composite	2021-05-10
:empty	2021-04-27
:where	2021-03-23
justify-self	2021-03-18
mask-type	2021-03-02
place-self	2021-03-02
:current	2021-02-23
:future	2021-02-23
border-boundary	2021-02-09
mask-mode	2021-02-03
caret-shape	2021-01-27
caret	2021-01-27
aspect-ratio	2021-01-20
margin-inline	2021-01-14
margin-inline-end	2021-01-14
margin-block-start	2021-01-08
margin-block-end	2021-01-08
margin-block	2021-01-06

设定 2022 年目标

• 更加关注 SEO。过去我一直几乎避开 SEO。部分原因是 HTML 最佳实践似乎非常简单和显而易见，而且我的收件箱里充满了完全是垃圾链接的构建者，我希望他们用自己的时间去做其他任何事。但是。我只是对此一无所知。我认为从更理性的角度看待像这样内容网站的 SEO 最佳实践，并努力改进它将会很有趣、很有意思，而且可能有用。相关目标是：网页浏览量流量增长 10%。今年我们损失了 6%，所以我认为 10% 将会让我们回到正轨并继续上升。但这是一个很大的目标，所以我已经开始感到紧张了。
• 另一本数字书籍。所有基础设施都已到位，我也有了一些想法。我只需要写好并实施就可以了。
• 更多社交媒体实验。这是一个很宽泛的目标，但无论如何，我们在其他方面都很有压力。就像 SEO 一样，过去几年，我有点避开针对 CSS-Tricks 品牌的专门社交媒体工作。主要是因为当我查看流量数据时，来自社交媒体的流量很少，尤其是考虑到过去我们花了多少时间在社交媒体上。我们并没有从品牌社交媒体中获益太多，那么为什么要费心呢？好吧，也许我是在以错误的方式思考这个问题。也许我们不在乎它能带来多少流量，而是关注与读者在社交媒体上的直接联系。如果我们在社交媒体上更加有趣和有意思，也许我们就能继续建立对我们在这里所做工作的信任。也许这有助于推动销售，如果我们完成了第二个目标的话。也许它更容易直接盈利。

感谢

特别感谢 Geoff！如果你不知道的话，他是我们这里的首席编辑，让整个网站平稳运行。如果你在这里进行任何 客座写作，你将会与 Geoff 合作。

特别感谢我们最大的年度赞助商 Automattic 和 Frontend Masters。 我们的年终系列既是对读者表示感谢，也是对他们表示感谢。

祝大家新年快乐！

🙏