大约 15 年前，我在一家公司工作，我们为旅行社、机场工作人员和航空公司开发应用程序。我们还为 UI 组件和单页应用程序功能构建了自己的内部框架。 我们拥有适用于所有内容的组件：字段、按钮、选项卡、范围、数据表、菜单、日期选择器、选择和多选。我们甚至还有一个 div 组件。顺便说一句，我们的 div 组件非常棒，它允许我们在所有浏览器上实现圆角，无论你相信与否，这在当时并不是一件容易的事情。
我们的工作发生在我们历史上的某个时刻，当时 JS、Ajax 和动态 HTML 被视为一场带我们走向未来的革命。突然间，我们可以动态更新页面，从服务器获取数据，并避免导航到其他页面，这被认为是缓慢的，并且在两个页面之间的屏幕上闪烁一个大的白色矩形。 杰夫·阿特伍德（Jeff Atwood，StackOverflow 创始人）流行了这样一句话： “任何可以用 JavaScript 编写的应用程序最终都将用 JavaScript 编写。”—— Jeff Atwood
对于当时的我们来说，这感觉像是真正敢于去创建这些应用程序。感觉就像是对 JS 所做的一切都给予了全面认可。 所以我们所有的事情都用 JS 来做，我们并没有真正花时间去研究其他的做事方式。我们并没有真正感受到正确学习 HTML 和 CSS 功能的动力。我们并没有真正将网络视为一个完整的不断发展的应用程序平台。我们大多认为这是我们需要解决的问题，特别是在浏览器支持方面。我们可以投入更多的 JS 来完成任务。 花时间更多地了解网络的运作方式以及平台上的可用内容会对我有帮助吗？当然，我可能会删掉一堆并不真正需要的代码。但在当时，也许没有那么多。 你看，当时浏览器的差异非常显着。当时，Internet Explorer 仍然是占主导地位的浏览器，Firefox 紧随其后，但由于 Chrome 的迅速普及而开始失去市场份额。尽管Chrome和Firefox在网络标准上达成了一致，但我们的应用程序运行环境意味着我们必须长期支持IE6。即使我们被允许支持 IE8，我们仍然必须处理浏览器之间的许多差异。不仅如此，当时的网络还没有在平台中内置那么多功能。
快进到今天。事情发生了巨大的变化。我们不仅拥有比以往更多的这些功能，而且它们可用的速度也有所增加。 那么，让我再问一遍这个问题：今天花时间了解更多有关网络如何运作以及平台上提供的内容对您有帮助吗？绝对是的。今天学习理解和使用网络平台将使您比其他开发人员具有巨大的优势。 无论您是致力于性能、可访问性、响应能力，还是所有这些一起工作，或者只是交付 UI 功能，如果您想作为一名负责任的工程师来做到这一点，那么了解可用的工具可以帮助您更快更好地实现目标。 有些事情你可能不再需要图书馆了 了解了当今浏览器支持的内容后，问题是：我们可以放弃什么？ 2025 年我们还需要一个 div 组件来做圆角吗？当然，我们不这样做。目前所有当前使用的浏览器都支持 border-radius 属性超过 15 年。拐角形状也即将推出，适用于更精美的拐角。 让我们看一下现在所有主要浏览器中都可用的相对较新的功能，您可以使用它们来替换代码库中的现有依赖项。 重点不是立即抛弃所有你喜爱的库并重写你的代码库。至于其他一切，您需要首先考虑浏览器支持，并根据项目特定的其他因素做出决定。以下功能在三个主要浏览器引擎（Chromium、WebKit 和 Gecko）中实现，但您可能有不同的浏览器支持要求，导致您无法立即使用它们。不过，现在仍然是了解这些功能并可能计划在某个时候使用它们的好时机。 弹出窗口和对话框 Popover API、
当然，您的互联网连接速度可能也有所提高，但并非每个人都是如此。而且并非每个人都具有相同的设备功能。 相反，为您可以使用该平台执行的操作引入第三方代码，很可能意味着您发布了更多代码，因此接触到的客户比平时要少。在网络上，糟糕的加载性能会导致很高的放弃率并损害品牌声誉。 在设备上运行更少的代码 此外，如果您在客户设备上发布的代码在平台上使用较少的 JavaScript 抽象，则可能会运行得更快。默认情况下，它也可能响应更快、更易于访问。所有这些都会带来更多、更满意的客户。 查看我的同事 Alex Russell 的年度性能不平等差距博客，该博客显示，由于财富不平等，拥有数十亿用户的市场基本上缺乏高端设备。而且随着时间的推移，这种差距只会越来越大。
内置砌体布局 CSS Masonry 是即将推出的一项令我非常兴奋的 Web 平台功能。
让我首先解释一下什么是 Masonry。 什么是砌体 Masonry 是几年前 Pinterest 流行的一种布局类型。它创建独立的内容轨道，其中的项目尽可能靠近轨道的开头进行打包。
许多人认为 Masonry 是作品集和照片画廊的绝佳选择，它确实可以做到这一点。但 Masonry 比你在 Pinterest 上看到的更灵活，而且它不仅限于瀑布式布局。 在砌体布局中：
轨道可以是列或行：
内容轨道不必全部具有相同的大小：
项目可以跨越多个轨道：
物品可以放置在特定的轨道上；他们不必总是遵循自动放置算法：
演示 以下是我使用即将在 Chromium 中实现的 CSS Masonry 制作的一些简单演示。 照片库演示，展示项目（本例中的标题）如何跨越多个轨道：
另一个展示不同尺寸轨道的照片库：
新闻网站布局，其中一些轨道比其他轨道更宽，并且一些项目跨越布局的整个宽度：
看板显示可以将项目放置到特定轨道上：
注：之前的演示是使用 Chromium 版本制作的，大多数 Web 用户尚未使用该版本，因为 CSS Masonry 才刚刚开始在浏览器中实现。 然而，Web 开发人员多年来一直很乐意使用库来创建 Masonry 布局。 当今使用砌体的网站 事实上，Masonry 在当今的网络上非常常见。以下是我在 Pinterest 之外找到的一些例子：
还有一些不太明显的例子：
那么，这些布局是如何创建的呢？ 解决方法 我见过的一个技巧是使用 Flexbox 布局，将其方向更改为列，并将其设置为换行。 这样，您可以将不同高度的项目放置在多个独立的列中，给人以砌体布局的印象：
但是，此解决方法有两个限制：
项目的顺序与真正的砌体布局不同。使用 Flexbox，项目首先填充第一列，当填满时，然后转到下一列。使用 Masonry，物品将堆叠在有更多可用空间的轨道（或本例中的列）中。 而且，也许更重要的是，此解决方法要求您为 Flexbox 容器设置固定高度；否则，不会发生缠绕。
第三方 Masonry 库 对于更高级的情况，开发人员一直在使用库。 最知名和最受欢迎的库就是 Masonry，根据 NPM 的数据，它每周的下载量约为 200,000 次。 Squarespace 还提供了一个布局组件，可以呈现 Masonry 布局，作为无代码替代方案，许多网站都使用它。 这两个选项都使用 JavaScript 代码将项目放置在布局中。 内置砌体 我真的很高兴 Masonry 现在开始作为内置 CSS 功能出现在浏览器中。随着时间的推移，您将能够像使用 Grid 或 Flexbox 一样使用 Masonry，即不需要任何解决方法或第三方代码。 我在 Microsoft 的团队一直在 Chromium 开源项目中实现内置 Masonry 支持，Edge、Chrome 和许多其他浏览器都基于该项目。 Mozilla 实际上是第一个在 2020 年提出实验性实现 Masonry 的浏览器供应商。Apple 也对实现这种新的 Web 布局原语非常感兴趣。 标准化该功能的工作也在取得进展，CSS 工作组内部就总体方向，甚至新的显示类型显示：网格通道达成了一致。 如果您想了解有关 Masonry 的更多信息并跟踪进度，请查看我的 CSS Masonry 资源页面。 随着时间的推移，当 Masonry 成为 Baseline 功能时，就像 Grid 或 Flexbox 一样，我们将能够简单地使用它并受益于：
更好的性能， 更好的响应能力， 易于使用和更简单的代码。
让我们仔细看看这些。 更好的性能 制作自己的类似 Masonry 的布局系统，或者使用第三方库，意味着您必须运行 JavaScript 代码才能将项目放置在屏幕上。这也意味着这段代码将被渲染阻塞。事实上，在 JavaScript 代码运行之前，要么什么也不会出现，要么东西不会位于正确的位置或大小不正确。 砌体布局通常用于网页的主要部分，这意味着代码将使您的主要内容比原本可以出现的时间晚，从而降低您的 LCP（即最大内容绘制指标），该指标在感知性能和搜索引擎优化中发挥着重要作用。 我使用简单的布局并通过在 DevTools 中模拟慢速 4G 连接来测试 Masonry JS 库。该库不是很大（24KB，gzip 后为 7.8KB），但在我的测试条件下加载需要 600 毫秒。 下面是一个性能记录，显示 Masonry 库的加载时间长达 600 毫秒，并且在此期间没有发生其他渲染活动：
此外，在初始加载时间之后，需要对下载的脚本进行解析、编译，然后运行。正如前面提到的，所有这些都会阻止页面的渲染。 通过浏览器中内置的 Masonry 实现，我们将不需要加载和运行脚本。浏览器引擎只会在初始页面渲染步骤中执行其操作。 更好的响应能力 与首次加载页面时类似，调整浏览器窗口大小会导致再次渲染该页面中的布局。不过，此时，如果页面正在使用 Masonry JS 库，则无需再次加载脚本，因为它已经这里。但是，需要运行将项目移动到正确位置的代码。 现在，这个特定的库在页面加载时似乎可以非常快地执行此操作。然而，当项目需要在窗口调整大小时移动到不同位置时，它会为项目设置动画，这会产生很大的差异。 当然，用户不会像我们开发人员那样花时间调整浏览器窗口的大小。但这种动画调整大小的体验可能会非常不和谐，并且会增加页面适应新尺寸所需的时间。 易于使用且代码更简单 使用 Web 功能的容易程度以及代码看起来的简单程度是可以为您的团队带来巨大变化的重要因素。当然，它们永远不会像最终用户体验那么重要，但开发人员体验会影响可维护性。使用内置网络功能在这方面具有重要的好处：
已经了解 HTML、CSS 和 JS 的开发人员很可能能够轻松使用该功能，因为它的设计目的是与 Web 平台的其他部分很好地集成并保持一致。 该功能的使用方式不存在发生重大变化的风险。 该功能被弃用或不再维护的风险几乎为零。
对于内置 Masonry，因为它是一个布局基元，所以您可以从 CSS 中使用它，就像 Grid 或 Flexbox 一样，不涉及 JS。此外，其他与布局相关的 CSS 属性（例如间隙）也可以按照您的预期工作。没有任何需要了解的技巧或解决方法，您学到的东西都记录在 MDN 上。 对于 Masonry JS 库，初始化有点复杂：它需要具有特定语法的数据属性，以及隐藏的 HTML 元素来设置列和间隙大小。 另外，如果您想跨越列，您需要自己包含间隙大小以避免出现问题：
<风格> .轨道大小调整器， .项目{ 宽度：20%； } .gutter-sizer { 宽度：1rem； } .项目{ 高度：100px； 边距块结束：1rem； } .item:nth-child(奇数) { 高度：200px； } .item--width2 { 宽度：计算（40% + 1rem）； }
让我们将其与内置 Masonry 实现进行比较： <风格> .容器{ 显示：网格车道； 网格车道：重复(4, 20%)； 间隙：1rem； } .项目{ 高度：100px； } .item:nth-child(奇数) { 高度：200px； } .item--width2 { 网格列：跨度 2； }
更简单、更紧凑的代码，可以只使用间隙之类的东西，其中跨越轨道是用跨度 2 完成的，就像在网格中一样，并且不需要您计算包括间隙大小的正确宽度。 如何知道哪些内容可用以及何时可用？ 总的来说，问题不在于是否应该使用内置 Masonry 而不是 JS 库，而是何时使用。 Masonry JS 库非常棒，多年来一直在填补 Web 平台的空白，让许多开发人员和用户感到满意。当然，如果将其与内置 Masonry 实现进行比较，它有一些缺点，但如果该实现尚未准备好，那么这些缺点并不重要。 对我来说，列出这些很酷的新网络平台功能很容易，因为我在浏览器供应商工作，因此我倾向于知道即将发生什么。但开发人员经常在一次又一次的调查中表示，跟踪新事物很困难。保持信息灵通是很困难的，而且公司并不总是优先考虑学习。 为了帮助解决这个问题，这里有一些资源，它们以简单而紧凑的方式提供更新，以便您可以快速获取所需的信息：
Web 平台具有浏览器站点： 您可能对其发行说明页面感兴趣。 而且，如果您喜欢 RSS，请查看发行说明提要以及基线新可用和广泛可用提要。
网络平台状态仪表板： 您可能会喜欢它的各种基线年份页面。
Chrome 平台状态的路线图页面。
如果您有更多时间，您可能还会对浏览器供应商的发行说明感兴趣：
镀铬 边缘 火狐浏览器 狩猎之旅
如需更多资源，请查看我的 Navigating the Web Platform Cheatsheet。 我的事情还没有实现 这是问题的另一面。即使您确实找到了时间、精力和方法来进行跟踪，但在让您的声音被听到并实现您最喜欢的功能方面仍然会感到沮丧。 也许您多年来一直在等待某个特定错误的解决，或者某个特定功能在浏览器中发布但仍然缺失。 我要说的是，浏览器供应商确实会倾听。我是几个跨组织团队的一员，我们一直在讨论开发人员的信号和反馈。我们会查看许多不同的反馈来源，包括每个浏览器供应商的内部反馈以及论坛、开源项目、博客和调查中的外部/公开反馈。而且，我们一直在努力为开发人员创造更好的方式来分享他们的特定需求和用例。 因此，如果可以的话，请向浏览器供应商提出更多要求，并向我们施压，以实现您需要的功能。我知道这需要时间，而且也可能令人生畏（更不用说进入门槛很高），但它也有效。 您可以通过以下几种方式让您（或您公司）的声音被听到： 参加年度 JS 现状、CSS 现状和 HTML 现状调查。它们在浏览器供应商如何优先考虑其工作方面发挥着重要作用。 如果您需要跨浏览器一致地实现特定的基于标准的 API，请考虑在下一个 Interop 项目迭代中提交提案。这需要更多时间，但请考虑一下 Shopify 和 RUMvision 如何分享他们对 Interop 2026 的愿望清单。这样的详细信息对于浏览器供应商确定优先级非常有用。 有关影响浏览器供应商的更多有用链接，请查看我的 Navigating the Web Platform Cheatsheet。 结论 最后，我希望这篇文章能给您留下一些值得思考的事情：
Masonry 和其他即将推出的网络功能令人兴奋。 您可能想开始使用的一些网络功能。 您可以删除一些自定义或第三方代码以支持内置功能。 跟踪即将发生的事情并影响浏览器供应商的几种方法。
更重要的是，我希望我已经让您相信充分利用网络平台的潜力的好处。
