本月初，Firefox 68 发布，并加入了大量新的 CSS 功能和变更。在这篇博文中，我们将介绍其中一些可能在之前的公告中未提到的新功能。

CSS 滚动捕捉

本次发布的 CSS 重点功能是 CSS 滚动捕捉。我不会在这里花费太多时间，因为你可以在 博客文章 中阅读更多详细信息。Firefox 68 中的更新使 Firefox 的实现与 Chrome 和 Safari 中的滚动捕捉实现保持一致。此外，它还删除了之前滚动捕捉点规范中包含的旧属性。

::marker 伪元素

::marker 伪元素允许你选择列表项的标记框。这通常包含列表符号或数字。如果你曾经使用过图像作为列表符号，或者为了使列表项的符号和文本颜色不同而将列表项的文本包裹在 span 元素中，那么这个伪元素就是为你准备的！

使用 marker 伪元素，你可以直接定位符号本身。以下代码将使无序列表的符号变成热粉色，并将有序列表项的数字放大并变为蓝色。

ul ::marker {
  color: hotpink;
}

ol ::marker {
  color: blue;
  font-size: 200%;
}

使用 ::marker，我们可以样式化列表符号

查看 CodePen.

在 ::marker 上只可以使用几个 CSS 属性。这些属性包括所有字体属性。因此，你可以将字体大小或字体系列更改为与文本不同的值。你也可以像上面那样给符号着色，并插入生成的文字内容。

在非列表项上使用 ::marker

符号只能显示在列表项上，但你可以使用 display: list-item 将任何元素变成列表项。在下面的示例中，我使用了 ::marker，以及生成的文字内容和 CSS 计数器。这段代码会在页面中每个 h2 标题之前输出步骤编号，并在其前面加上 “step” 一词。 你可以在 CodePen 上查看完整的示例。

h2 {
  display: list-item;
  counter-increment: h2-counter;
}

h2::marker {
  content: "Step: " counter(h2-counter) ". ";
}

如果你看一下 ::marker 实现的 bug，你会发现它已经存在 16 年了！你可能想知道为什么一个浏览器会有 16 年之久的实现 bug 和功能请求。要了解更多信息，请阅读此问题，你可以在其中发现，最初并不清楚 ::marker 伪元素是否会包含在规范中。

有一些 Mozilla 特定的属性可以实现开发人员使用类似 ::marker 的东西所期望的结果。::moz-list-bullet 和 ::moz-list-marker 属性分别允许使用 moz- 供应商前缀来设置符号和标记的样式。

::marker 伪元素在 CSS 列表级别 3 和 CSS 伪元素级别 4 中被标准化，并从 Firefox 68 和 Safari 开始实现。Chrome 尚未实现 ::marker。但是，在大多数情况下，你应该可以使用 ::marker 作为支持它的浏览器的增强功能。你可以允许符号回退到与列表文本相同的颜色和大小，以确保在不支持它的浏览器中也能正常显示。

CSS 修复

当我们在不同浏览器中遇到支持但行为不同的功能时，会让网页开发者感到沮丧。这些互操作性问题通常是由网页平台的年代久远造成的。事实上，有些东西在如何运作方面从未完全被规范化。对 CSS 规范的许多更改都是由于这些互操作性问题造成的。开发人员依赖浏览器更新其实现以匹配澄清后的规范。

大多数浏览器版本都包含针对这些问题的修复，使得网页平台逐渐变得更好，因为你在使用 CSS 时遇到问题的可能性越来越小。最新的 Firefox 版本也不例外 - 我们修复了 ch 单位 和 列表编号 问题。

开发者工具

除了 Firefox 中 CSS 实现的更改之外，Firefox 68 还为开发者工具带来了一些很棒的新增功能，以帮助你使用 CSS。

在规则面板中，请查找新的打印样式按钮。此按钮允许你切换到文档的打印样式，使你更容易测试正在使用的打印样式表。

打印样式图标位于规则面板的右上角。

仍然在规则面板中，Firefox 68 会在任何无效或不支持的 CSS 旁边显示一个图标。如果你曾经花费大量时间苦苦思索为什么某些东西不起作用，然后才意识到你在属性名称中打错了字，那么这将会非常有帮助！

在这个示例中，我将 padding 拼写为 “pudding”。（遗憾的是）没有 pudding 属性，所以它被突出显示为错误。

控制台现在显示有关 CSS 错误和警告的更多信息。这包括使用该属性的位置的节点列表。你需要点击过滤器栏中的 CSS 来打开此功能。

我的 pudding 错误在控制台中被突出显示，我可以看到我在 body 元素上使用了它。

这就是我对 Firefox 68 中你可以开始使用的功能的简要总结。请查看 Firefox 68 版本说明，以全面了解 Firefox 68 带来的所有更改和新增功能。