使用 Unicode 符号的有序列表

有序列表是 HTML 中最古老、语义最丰富的元素之一。无论何时需要传达顺序或排名，<ol> 标签都能提供帮助。<ol> 标签的默认外观是在列表中的每个项目旁边显示数字。您可以使用 CSS 中的 list-style-type 属性将默认值更改为使用罗马数字或字母。如果您想尝试一些新奇的东西，甚至可以使用其他文化（如希伯来语或希腊语）的编号。可用值的完整列表记录完备且易于使用。

最近，我发现了一个机会，可以使用骰子代替数字，为我创建的一个 HTML5 游戏 （名为 Triple Score Bopzee）的几个有序列表解释其功能。为了实现我的目标，我首先尝试了一种现在很熟悉的技术，即使用小型图像文件作为列表中 li::before 选择器的背景。我对此常用过程进行的一项更改是，我决定避免使用 list-style-type: none，而是使用 list-style-type: decimal 并将 list-style-image 设置为 1×1 透明 GIF。这种细微的更改有助于页面通过辅助功能测试，因为屏幕阅读器仍会将列表视为有效的编号列表。

我创建了一个 Pen 来演示这种使用包含四种主要运动中使用的球的数字 GIF 的经典技巧。

查看 Pen 使用图像的有序列表，由 Steven Estrella (@sgestrella) 在 CodePen 上创建。

此技术可以满足我在 bopzee 网站上的需求，但我很好奇如何在不使用任何图像的情况下实现它。答案是使用 Unicode 符号 \2680 到 \2685 来表示六个骰子。我创建了一个名为“dicey”的类选择器，并使用 nth-child 和 before 伪选择器来定位和选择每个列表项的 Unicode 字符。我添加了一个指向 Normalize.css 库 的链接，以消除细微的浏览器差异。

这是完成的骰子列表的 Pen

查看 Pen 使用 Unicode 骰子的有序列表，由 Steven Estrella (@sgestrella) 在 CodePen 上创建。

所以对于这样的列表

<ol class="dicey">
  <li>I rolled a one.</li>
  <li>I rolled a two.</li>
  <li>I rolled a three.</li>
  <li>I rolled a four.</li>
  <li>I rolled a five.</li>
  <li>I rolled a six.</li>
</ol>

这就是诀窍

/* Still use a decimal based list for a11y */
ol {
  margin-left:40px;
  list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.dicey li:nth-child(1n):before {position:absolute;left:-1em;}

/* Actually set markers with pseudo element unicode */
.dicey li:nth-child(1):before {content: "\2680";}
.dicey li:nth-child(2):before {content: "\2681";}
.dicey li:nth-child(3):before {content: "\2682";}
.dicey li:nth-child(4):before {content: "\2683";}
.dicey li:nth-child(5):before {content: "\2684";}
.dicey li:nth-child(6):before {content: "\2685";}

最初，我没有指定将显示 Unicode 符号的字体。结果还不错，因为如今每个现代 Web 浏览器和支持 Web 的设备都至少可以访问一种包含来自名为“杂项符号”的 Unicode 块的必要符号的字体。外观有一些差异，但可以接受。但我知道，如果想要真正地控制，就必须找到一种免费的 Web 字体。我通过查看 字形表 中“杂项符号”块的支持字体列表，确定了一种名为 DejaVu 的字体可以使用。

一旦知道字体名称，我就可以 在 Font Squirrel 上创建 WebFont 工具包。创建 WebFont 工具包时，务必选择“不进行子集化”选项，以确保字体包含您所需的图标的所有 Unicode 元素。或者，如果您担心文件大小，可以下载原始的 TrueType 或 OpenType 字体，然后在专家模式下使用 Font Squirrel 的 WebFont 生成器仅包含 Unicode 范围 2600 到 26FF，它涵盖了名为“杂项符号”的 Unicode 块中的所有字符。

一旦开始使用 Unicode，乐趣就永无止境。我花了太多时间探索 DejaVu 字体中的许多图标（完整列表）。在那里我发现了扑克牌花色、占星术符号、箭头、项目符号、音乐符号、几何形状以及一大堆我无法一一列举的波浪线。因此，我选择了一些我喜欢的图标，并创建了一个包含几种不同类型的列表的 Pen。

完整的 Pen

查看 Pen 使用 Unicode 符号的有序列表，由 Steven Estrella (@sgestrella) 在 CodePen 上创建。

无序列表呢？

您可以使用此技术的修改版本为您的 <ul> 元素提供相同的 Unicode 效果。这是一个帮助您入门的 Pen

查看 Pen 使用 Unicode 项目符号的无序列表，由 Steven Estrella (@sgestrella) 在 CodePen 上创建。

未来会怎样？

有一个新的 CSS 规则称为 @counter-style，它将使我们能够更轻松地为有序列表创建自定义计数器样式，指定要使用的符号、列表的范围以及许多其他选项。CSS 计数器样式级别 3 规范现在是 W3C 的候选推荐，但截至 2017 年 5 月，只有 Firefox 支持它（存在一些问题）。我预计 Chrome、Edge 和 Safari 将很快添加支持，但 Internet Explorer 的最终版本（版本 11）可能永远不会支持它。因此，如果您必须支持该浏览器，则必须使用本文中描述的技巧，直到人们停止使用 IE11（也许是 2020 年？）为止。

请注意，@counter-style 规则未提供任何使用 CSS 设置计数器符号样式的方法。因此，即使它被所有浏览器采用，也可能存在对替代解决方案（如本文中介绍的解决方案）的使用案例。您可以阅读有关 MDN 上的 @counter-style 的更多信息。这是一个演示的 Pen。

请务必使用 Firefox 查看效果

查看 Pen @counter-style 演示（截至 2017 年 5 月仅限 Firefox），由 Steven Estrella (@sgestrella) 在 CodePen 上创建。

站在巨人的肩膀上

我们都从他人的工作中学习，并且希望感谢几位撰稿人的工作，我在准备这篇文章时发现他们的文章很有帮助。

• Jose Vargas：有序列表 CSS 样式
• Roger Johannson：有序列表数字样式
• David McFarland：自定义列表数字
• Chris Coyier：1x1px 透明 GIF 的 Base 64 编码
• Chris Coyier：样式化的编号

以下是一个 Pen，其中包含上面使用几种不同图标样式的无序列表！

查看 Pen 使用 Unicode 项目符号的致谢列表，由 Steven Estrella (@sgestrella) 在 CodePen 上创建。