自定义列表样式

原文地址: 《Totally Custom List Styles"》

我从事前端开发 13 年有余，一直致力于研究现代 CSS 解决方案，这是我该系列文章的第 5 篇

本教程将展示如何使用CSS grid进行简单的自定义列表样式设计

• 作为伪元素内容的数据属性

• 有序列表样式

• 每个列表元素自定义变量

• 响应式多列列表

List HTML

首先我们需要ul和li标签来组成html，并填充内容用来检查，对齐，间隙和行高。

<ul role="list">  <li>Unordered list item</li>  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>  <li>Unordered list item</li></ul>
<ol role="list">  <li>Ordered list item</li>  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>  <li>Ordered list item</li></ol>

注意使用role="list"。起初，它可能看起来是多余的，但我们要用 CSS 去掉默认列表样式。虽然 CSS 通常不会影响元素的语义值，但对于一些屏幕阅读器来说，list-style:none可以删除列表的语义。最简单的修复方法是定义角色属性，恢复这些语义。你可以从 Scott O'Hara 的这篇文章中了解更多。

列表基本样式

首先，我们除了设置了display: grid; 与间隙之外也做了一些初始化的操作

ol,ul {  margin: 0;  padding: 0;  list-style: none;  display: grid;  grid-gap: 1rem;}

grid-gap 的好处在于增加了li之间的间隙，取代了之前的一些古老的方式比如 li + li { margin-top: ... }

接下来 item li 样式

li {  display: grid;  grid-template-columns: 0 1fr;  grid-gap: 1.75em;  align-items: start;  font-size: 1.5rem;  line-height: 1.25;}

我们还要将li设置display: grid;我们还升级了一个旧的hack写法，即使用padding-left来为绝对位置的元素留出空间，第一列的宽度为 0，网格间隙为 0。我们稍后再来看看是如何工作的。然后我们使用align-items: start代替默认的stretch，并应用一些类型样式。

UL: emoji 数据属性

现在，这可能不是一个可扩展的解决方案，但为了好玩，我们将添加一个自定义数据属性，定义一个表情符号作为每个列表项的自定义数据属性。、

首相我们更新html:

<ul role="list">  <li data-icon="🦄">Unordered list item</li>  <li data-icon="🌈">Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>  <li data-icon="😎">Unordered list item</li></ul>

为了将emojis用作项目符号，我们使用了一种非常神奇样式属性，其中数据属性可以用作伪元素的content属性的值：

ul li::before {  content: attr(data-icon);  // 略大于 li font-size  // 但是要小于 li grid-gap  font-size: 1.25em;}

结果如下， ::before 元素用来帮助说明grid是如何工作的

emoji仍然占据在可见的空间中，但实际上它位于grid-gap中,您可以尝试将第一个li grid列设置为auto使emoji位于li文本列表的间隙中。

OL：CSS counters 与 CSS custom variables

从IE8开始，CSS counters就已经是一个可行的解决方案了，但是我们要增加一个额外的效果，那就是使用 CSS 自定义变量来改变每个数字的背景颜色。

我们将CSS counter命名为orderedlist:

ol {  counter-reset: orderedlist;
  li::before {    counter-increment: orderedlist;    content: counter(orderedlist);  }}

这样就实现了下面的效果，但是看起来和默认的ol没什么区别：

接下来给数字一些基本的样式：

// Add to li::before rule{  font-family: "Indie Flower";  font-size: 1.25em;  line-height: 0.75;  width: 1.5rem;  padding-top: 0.25rem;  text-align: center;  color: #fff;  background-color: purple;  border-radius: 0.25em;}

首先，我们应用了一个 Google 字体, 然后设置行高为li行高的一半，（至少这个字体是这样的，这可能是一个有点神奇的数字）。它将数字对齐到我们想要的与主li文字内容相关的地方。

然后，我们需要指定一个显式的宽度。否则，即使文本将显示，也不会显示背景。

添加padding是为了文本与数字背景对齐。

添加后的效果：

background-color 添加自定义变量属性

ol {  --li-bg: purple;
  li::before {    background-color: var(--li-bg);  }}

再给其他li标签添加元素之前background-color将会使用默认的变量属性值

<ol role="list">  <li>Ordered list item</li>  <li style="--li-bg: darkcyan">Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>  <li style="--li-bg: navy">Ordered list item</li></ol>

ul 和 ol codepen 示例：

https://codepen.io/5t3ph/pen/WNQwEjz

多列列表

我们的示例只有 3 个短的列表样式，但不要忘记我们将网格应用于基本的ol和ul。

在以前我们在 PHP 中用modulus来拆分列表,并用额外的class等分多列列表

现在有了CSS grid，你可以在多行列表中灵活应用它，有了固有的响应性列数，并且兼容内容长度。

ol, ul {  display: grid;  // 根据上下文调整min值  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));  grid-gap: 1rem;}

应用在上面的例子中，（需要去掉li标签上 max-width）

通过修改$multicolumn变量来切换视图

注意：不仅仅是纯文本作为 li 内容

如果你在li内有超过纯文本元素像<a>标签这样的内容，我们的grid 布局就会崩溃。

然而，这是个很容易解决的问题,将li的内容用span包裹起来。我们的grid布局并不关心元素是什么，但它只期望有两个元素，其中伪元素算作第一个。