写点什么

自定义列表样式

用户头像
寇云
关注
发布于: 2020 年 05 月 28 日
自定义列表样式

原文地址: 《Totally Custom List Styles"

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

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

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

  • 有序列表样式

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

  • 响应式多列列表

List HTML

首先我们需要ulli标签来组成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 个短的列表样式,但不要忘记我们将网格应用于基本的olul

在以前我们在 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布局并不关心元素是什么,但它只期望有两个元素,其中伪元素算作第一个。


发布于: 2020 年 05 月 28 日阅读数: 88
用户头像

寇云

关注

前端工程师,远程工作者 2012.06.12 加入

还未添加个人简介

评论

发布
暂无评论
自定义列表样式