Nada Rifki 演示了scroll-snap-type和scroll-snap-align CSS 属性。我喜欢演示显示滚动容器中的项目可以具有不同的尺寸。重要的是这些子元素的边缘，而不是某个固定的捕捉距离。

我也喜欢Max Kohler 的报道，其中包括一个演示，其中捕捉可以在多个方向上发生。

这是那些如果你不知道，值得为 CSS 给予热烈掌声的事情之一。

这是来自 Max Böck 的一个绝妙的想法。他创建了一个样板项目，用于构建适合单个 HTTP 请求的网站。这对于包含公共安全关键信息的网站来说极其重要。正如 Max 所写

在紧急情况下，许多组织需要一种快速发布关键信息的方法。但现有的 (CMS) 网站通常无法处理流量的突然激增。

继续阅读 →

来自 Dave 的真话

我，Dave Rupert，一个关心网页性能的人，一个阅读网页性能博客的人，一个花费大量时间试图跟上最佳实践的人，一个共同主持每周播客讨论如何制作网站并与网页性能专业人士交谈的人……不知何故搞砸了，并在他们的页面加载中增加了 33 秒。

即使你非常关心，这些事情也很难。这 33 秒来自字体预加载，而不是font-display的一行奇迹。

我也关心制作快速的网站，但我的网站并没有赢得任何速度奖，因为我每天都会选择实用和可维护而不是巅峰性能。（对不起，世界）

在这篇文章中，Eric Meyer 认为性能比以往任何时候都更重要——尤其是在包含公众关键信息的网站上。

继续阅读 →

深入探讨来自 Ahmad。我喜欢对vmin和vmax的介绍，我认为我并没有像我应该的那样经常使用它们。

我正在考虑，如果你正在做一些高度方向性的东西（例如全出血技巧），那么直接使用vw是必要的。另一方面，如果你正在进行计算，其目标是通常考虑视口大小（如流体边距/间隙或流体字体），那么使用vmin可能更合适。例如，如果用户有一个当前非常宽但非常短的浏览器窗口，他们可能不需要像vw仅计算可能产生的那样巨大的标题文本。

那不是一回事。

但它有点是！

Bram介绍了.bar:nth-child(2)有多么令人沮丧。它不是“选择类.bar的第二个元素”。而是“如果它也具有类.bar，则选择第二个元素”。好消息？有一个真正的选择器可以执行前者。

:nth-child(2 of .bar) { }

仅限 Safari。以下是Chrome和Firefox的工单。

Ben Myers 介绍了一些 CSS 完全改变某些屏幕阅读器宣布内容的清晰示例。例如，某些屏幕阅读器会看到按钮标签上带有text-transform: uppercase;的“添加”并将其读作缩写“A.D.D.”。

CSS 干扰我们的屏幕阅读器公告的这些情况最初令人震惊、困惑，甚至令人震惊。毕竟，它们似乎与我们对 CSS 的心理模型相冲突，这种模型可能是从我们开始学习 Web 开发以来就灌输给我们的：HTML 用于内容，CSS 用于视觉外观。这是内容和表现的分离。在这里，通过更改屏幕阅读器宣布的内容，感觉 CSS 正在侵犯内容领域。

这更证明了我们必须实际测试事物。我在 VoiceOver 中测试了上面的示例，果然，“A.D.D.”。

Tyler Gaw提醒我们，mask-image可以像background-image一样重复、调整大小和移动，这很有趣可以结合和玩耍。我可以看到它成为<hr>的一个有趣选项，就像 Sara正在做的那样。

继续阅读 →

Michael Scharnagl:

曾经想过在手机上轻松地将图像转换为灰度图像吗？我有时会这样做，这就是为什么我使用 Web Share Target API 构建了一个演示来实现这一点。

为此，我使用了 Service Worker 方法来处理数据。一旦数据在客户端收到，我就会使用画布上的drawImage来在画布上绘制图像，使用灰度过滤器将其转换为灰度图像并输出最终图像。

因此，您像 PWA 一样“安装”小型微型网站，然后您本地“共享”图像到它，它会以编辑后的形式返回。聪明。目前仅限 Chrome 上的 Android。

让我想起了这个“浏览器函数”想法的反面。那是一个服务器，它做浏览器可以做的事情，这是一个浏览器做服务器通常做的事情。

要在 JSX 中的元素上添加内联样式，您必须使用此对象语法，例如

<div style={{
  fontSize: 16,
  marginBottom: "1rem"
}}>
  Content
</div>

这对我们这些习惯了 CSS 语法的人来说可能看起来有点奇怪，在 CSS 语法中，它是font-size（而不是fontSize），margin-bottom（而不是marginBottom），以及分号（而不是逗号）。

继续阅读 →