来自 Kirupa Chinnathambi 的一个真正的 CSS 技巧。 为了使彩色阴影与元素的 background-image 中的颜色匹配，您将在伪元素中 inherit 背景，将其放在原始元素后面，然后模糊和过滤它。

继续阅读 →

我希望人们将 SVG 视为适合绘制事物的矢量格式。 有更多内容需要了解，但这里还有一个：SVG 适合组合。 您在 SVG 中以非常具体的坐标绘制事物，虽然它们可以缩放，但它们往往保持原位。 虽然 SVG 是一种矢量格式，但您可以在上面放置光栅图像。 这是我最喜欢的 Cassie 的“可滑动图像网格” 文章的一部分。 可滑动部分很酷，但组合更酷。

继续阅读 →

Jim Nielsen 引用 Eric Bailey

他引用了 Twitter 上的一个例子，有人指出您可以使用 <details> 元素来“创建一个原生 HTML 手风琴”，有人回应道：“这在没有 Bootstrap 的情况下也能工作？🤯”

这里的问题是什么？ 来自 Eric

这种情况下出现的问题是它教导人们先考虑框架。 当这种情况发生时，[web] 平台辛辛苦苦获得的、内置的互操作性以及重要的是可访问性都会被丢弃。 这也是一个复合问题：人们越是不使用提供给我们的元素，它们无关紧要的观念就越强烈。

我在 GitHub 上看到过人们对 <details> 感到惊讶，并认为它是一个特殊的 GitHub 功能。

读者们，

它

只是

HTML（哈哈）

说真的，我不确定学习 HTML 的最佳时间是什么时候。 肯定要尽早学习，但我不会责怪任何人没有先学习它。 我肯定是在 WordPress PHP 模板的背景下学习它的。 我确定现在很多人都在以 JSX 或 .vue 文件的形式学习它。 很好。 这就像在你了解键、音阶和和弦之前，先学习用吉他弹奏“(Sittin’ On) The Dock of Bay”。 但是，如果你从未回到基础知识，那么它就很有限，而对于 web 来说，它是有害的。

Robert Nyman 和 Philip Jägenstedt:

Google 正在与其他浏览器供应商和行业合作伙伴合作，修复 web 开发人员遇到的五个最主要的浏览器兼容性问题。 关注的领域是 CSS Flexbox、CSS Grid、position: sticky、aspect-ratio 和 CSS 转换。

[...] 2021 年的目标是消除五个关键关注领域的浏览器兼容性问题，以便开发人员可以放心地将它们作为可靠的基础进行构建。

我想说慢拍，但我不想听起来讽刺。 全面的、正常的鼓掌。

十到十五年前，web 设计师和开发人员的工作重点是思考、规划和处理跨浏览器兼容性。 如今，它仍然存在，但不再是像以前那样处理错误、怪癖和令人沮丧的实现差异。 它更多的是边缘情况，有更多明显的解决方法。 而且，当我们思考浏览器和设备环境时，我们是通过在用户所在的位置与他们相遇并拥抱这种环境的视角来进行的。 尽力而为。

如果当权者能够继续消除兼容性问题，那么这将进一步巩固 web 作为构建的正确位置。

我投票支持在 2022 年对可靠视窗单位进行某种适当的尝试，以某种方式合理地处理滚动条和其他浏览器 chrome。

这是 Jess B. Peck 在撰写关于 Google 的核心 Web 指标的文章

让我们退一步。 CLS 是指当你即将点击一个链接时，整个页面会发生偏移，而你点击了另一个链接。 它是指当你读到一篇博文的一半时，一个广告加载了，然后你就失去了位置。 它是指... 布局偏移。 至少，它试图测量的是——这两种偏移，它们发生的频率，以及由此造成的对用户的恼怒。

在阅读了 Jess 的文章之前，我并不完全理解累积布局偏移有多复杂。 正如 Jess 解释的那样

CLS 是机器人用来近似用户对不稳定性的感知的度量。 这意味着我们正在获得一个随时间推移的变化单位。 它是一个三维方程式，有很多因素会影响它。 [...] 我们的想法更多的是提醒开发人员出现问题，而不是完美地衡量页面有多令人讨厌。

我在 Google dot com 上遇到了这个问题，而且还在不断地点击屏幕上出现的元素，这导致我跳转到了错误的页面。

继续阅读 →

Page Laubheimer 说，如果你要使用粘性页眉...

1. 保持它小巧。
2. 与页面上的其他内容形成视觉对比。
3. 如果它要移动，保持它最小化。（我想说，尊重 prefers-reduced-motion。）
4. 考虑“部分持久页眉”。（Jemima Abu 将其称为智能导航栏。）
5. 实际上，也许根本不要使用它。

继续阅读 →

容器查询终于出现了！ 现在，您可以在最新版本的Chrome Canary 中使用一个标志进行体验，您可以尽情地进行实验。 哦，如果您不熟悉容器查询，那么请查看 Ethan Marcotte 关于为什么它们如此重要 的这篇文章。

继续阅读 →

毫无疑问，CSS 在 web 性能中发挥着重要作用。Milica Mihajlija 指出了确切的原因

当页面上存在 CSS 时，无论是内联还是外部样式表，浏览器都会延迟渲染，直到 CSS 被解析。 这是因为没有 CSS 的页面通常是不可用的。

浏览器必须等到 CSS 被下载和解析之后才能显示页面的第一次渲染，否则浏览 web 将会非常令人视觉上感到卡顿。 如果 web 原生就是这样的，我们可能会故意使用 JavaScript 延迟页面渲染。

继续阅读 →

<hr> 的默认浏览器样式非常奇怪。 它基本上是

border-style: inset;
border-width: 1px;

默认的 border-color 是 black，但边框实际上看起来并不黑，因为内嵌边框“在该行上添加了色调分离，使该元素看起来略微凹陷”。

继续阅读 →

这 是来自 Adam Argyle 的一个很棒的以 CSS 为中心的教程。 我真的很喜欢这里的“仅用于间隙”的概念。 网格非常强大，但您不必每次使用它时都使用它所有的功能。 在这里，Adam 为了非常轻微的原因使用它，例如将其用作 border 的替代方案，以及更通用的间距。 我猜他在兑现自己的承诺，即 gap 将取代 margin！

继续阅读 →