关于优秀 HTML 列表的新知识

由柏拉图重新发布

关注： 0

HTML 列表很无聊。他们不 do 很多，所以尽管它们被广泛使用，但我们并没有真正考虑它们。我们仍然能够做我们一直做的同样的事情来定制它们，比如移除标记、颠倒顺序和制作定制计数器。

但是，在使用列表时需要了解一些“较新”的东西——包括危险。危险大多是轻微的，但比你想象的要普遍得多。我们将讨论这些，加上我们可以用列表做的一些新事情，甚至是处理旧解决方案的新方法。

澄清一下，这些是我们正在谈论的 HTML 元素：

有序列表
无序列表
说明列表
交互式列表

有序列表、无序列表和交互式列表包含列表项 (

) 根据我们正在处理的列表类型显示。有序列表（

) 在列表项旁边显示数字。无序列表 (

) 和菜单元素 (

) 在列表项旁边显示项目符号。我们称这些为“列表标记”，并且他们甚至可以设计风格使用 ::标记伪元素。描述列表使用描述术语 (

) 和描述细节 (

）代替

并且没有列表标记。它们应该用于显示元数据和词汇表，但我不能说我在野外见过它们。

让我们从简单的事情开始——如何正确（至少在我看来）重置列表样式。在那之后，我们将先看看几个可访问性问题，然后再阐明难以捉摸的问题

元素，你可能会惊讶地发现……实际上也是一种列表！

重置列表样式

浏览器会自动应用自己的用户代理样式，以帮助开箱即用的列表视觉结构。那太好了！但是如果我们想从没有样式意见的空白板开始，那么我们必须先重置这些样式。

例如，我们可以很容易地删除列表项旁边的标记。这里没有什么新鲜事：

/* Zap all list markers! */
ol, ul, menu {
  list-style: none;
}

但是现代 CSS 有新的方法来帮助我们定位特定的列表实例。假设我们要清除所有列表中的标记，除非这些列表出现在长篇内容，如文章. 如果我们结合新的 CSS 伪类函数的力量 :where() 和 :not()，我们可以隔离这些实例并在这些情况下允许标记：

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

为什么使用 :where() 而不是 :is()？的特异性 :where() 始终为零，而 :is() 采用其选择器列表中最具体的元素的特殊性。所以，使用 :where() 是一种不太有效的覆盖事物的方式，并且可以很容易地被覆盖。

UA 样式还应用填充以将列表项的内容与其标记隔开。同样，在某些情况下，这是一个非常好的开箱即用功能，但是如果我们已经像上面那样删除了列表标记，那么我们也可以删除该填充。这是另一个案例 :where():

:where(ol, ul, menu) {
  padding-left: 0; /* or padding-inline-start */
}

好的，这将防止无标记列表项出现在空间中。但是我们有点把婴儿和洗澡水一起倒掉，并在所有情况下都去掉了填充物，包括我们之前在

. 所以，现在那些带有标记的列表有点悬在内容框的边缘。

请注意，UA 样式应用了额外的 40px 到

元件。

所以我们要做的是防止列表标记“挂”在容器外面。我们可以用 list-style-position 属性：

或者不是……也许归结为风格偏好？

较新的列表可访问性问题

不幸的是，在列表方面存在一些可访问性问题——即使在更现代的时代也是如此。一个问题是应用的结果 list-style: none; 正如我们在重置 UA 样式时所做的那样。

简而言之，Safari 才不是读取带有样式的有序和无序列表 list-style: none 作为实际列表，例如使用屏幕阅读器浏览内容时。换句话说，删除标记也会删除列表的语义。这修复此修复它应用一个唱腔 list 名单上的角色和 listitem 对列表项的作用所以屏幕阅读器会把它们捡起来：