有关内容可见性的更多信息

CSS 的 content-visibility 属性：性能提升与可访问性挑战

2020 年 8 月，CSS 的 content-visibility 属性开始在 Chrome 浏览器中使用，Una Kravets 和 Vladimir Levin 曾撰文介绍过它。为了充分发挥其性能优势，需要将其与 contain-intrinsic-size 属性结合使用，后者需要对页面中大块内容的高度进行预估。这其中最奇怪的部分在于，你需要对这些大块内容的高度进行一个近似的猜测。

我之前曾提出疑问：仅仅猜测高度？如果猜测错误会怎样？是否会影响性能？如果大屏幕和小屏幕之间的差异很大，是否（或应该）在不同的视口更改此值？

Jake Archibald 和 Das Surma 最近制作了一个视频，对这些问题进行了澄清。在视频的 7 分 30 秒左右，你可以看到这有多么令人困惑。Jake 使用了一个大型 HTML 规范页面作为演示，并为大块 HTML 内容添加了包装器，并应用了以下代码：

section {
  content-visibility: auto; /* 延迟绘制 */
  contain-intrinsic-size: 1px 5000px; /* 内容大小的猜测，宽度无关紧要 */
}

显然，5000px 不是元素的高度，而是该元素内容的大小。这很重要，因为它会将父元素的高度增加到这个数值，除非父元素通过自身的高度属性覆盖它。其神奇之处在于浏览器只会绘制第一个 section（视口高度很可能小于 5000px），并推迟其余部分的绘制。这有点像延迟加载，但作用于所有内容，而不仅仅是媒体。它假设下一个 section 高度为 5000px，但一旦其顶部可见，它就会被实际绘制，并确定正确的高度。因此，如果你的页面只是大型块状内容堆叠在一起，使用一个非常大的数字应该可以正常工作。如果你的网站比这更复杂，那就自求多福吧。

这是一个很好的视频，你应该看看： 视频链接

这又是另一个需要你向浏览器提供网站信息以便它能够提升性能的例子。浏览器本身 可以 找出这些信息，但只有在执行了具有性能成本的操作之后才能做到。因此，你必须提前告诉它，从而避免某些类型的额外工作。对于响应式图片，如果我们使用 srcset 属性提供图像并提前告诉浏览器它们的大小，包括一个包含 CSS 行为信息的 sizes 属性，它就可以提前进行计算，只下载最佳图像。同样，对于 CSS 中的 will-change 属性，我们可以在提前告诉浏览器我们将进行移动操作，以便它能够进行预优化，否则它无法做到这一点。这是可以理解的，但有点令人厌烦。这就像我们需要一个 stuff-you-need-to-know.manifest 文件在浏览器执行任何其他操作之前提供给它——但这将是一个额外的请求！

可访问性问题也很重要。Steve Faulkner 对将 content-visibility: auto 应用于图像和段落进行了测试：

内容在视觉上是隐藏的，但在 JAWS 和 NVDA 中，都会宣布隐藏的图像，但元素的内容不会被宣布。这与图像和段落元素的内容在浏览器辅助功能树中的表示方式有关：图像在辅助功能树中以 alt 文本作为辅助功能名称显示。段落元素的内容不在辅助功能树中。

他指出，根据规范，以这种方式隐藏的内容不应提供给屏幕阅读器。我可以理解这两种情况，例如像 display: none 一样隐藏所有内容，这意味着没有任何内容在辅助功能树中。或者，将所有内容都保留在辅助功能树中。现在它处于一种中间状态，你可能会在辅助功能树中看到一堆孤立的图像，除了它们的 alt 文本之外没有任何其他上下文。这是一个有趣的例子，说明新技术在推出时可能比你希望看到的更粗糙。

说到 alt 文本，我们都知道当它们代表需要向无法看到它们的人描述的重要内容时，它们不应该是空的。Dave 说它们应该像段落一样：

我终于建立了最简单的联系：alt 文本就像一个段落。文字图片。我知道这很基本，但这有助于我理解如何编写好的 alt 文本以及我的代码的源顺序。

我不想在这里过于负面！为设置具有 content-visibility 属性的长滚动页面而获得的性能提升是巨大的，这太棒了。能够用两行代码告诉浏览器哪些内容可以不绘制是很好的。

1. 我一直说“绘制”，但我不知道这是否真的是正确的术语，或者它是否意味着更具体的含义。规范中提到诸如“允许用户代理在需要之前潜在地省略大量布局和渲染工作”（强调我的）之类的内容。

以上是有关内容可见性的更多信息的详细内容。更多信息请关注PHP中文网其他相关文章！