自定义列表样式
原文地址: 《Totally Custom List Styles"》
我从事前端开发 13 年有余,一直致力于研究现代 CSS 解决方案,这是我该系列文章的第 5 篇
本教程将展示如何使用CSS grid
进行简单的自定义列表样式设计
作为伪元素内容的数据属性
有序列表样式
每个列表元素自定义变量
响应式多列列表
List HTML
首先我们需要ul
和li
标签来组成html
,并填充内容用来检查,对齐,间隙和行高。
注意使用role="list"
。起初,它可能看起来是多余的,但我们要用 CSS 去掉默认列表样式。虽然 CSS 通常不会影响元素的语义值,但对于一些屏幕阅读器来说,list-style:none
可以删除列表的语义。最简单的修复方法是定义角色属性,恢复这些语义。你可以从 Scott O'Hara 的这篇文章中了解更多。
列表基本样式
首先,我们除了设置了display: grid;
与间隙之外也做了一些初始化的操作
grid-gap
的好处在于增加了li
之间的间隙,取代了之前的一些古老的方式比如 li + li { margin-top: ... }
接下来 item li
样式
我们还要将li
设置display: grid;
我们还升级了一个旧的hack
写法,即使用padding-left
来为绝对位置的元素留出空间,第一列的宽度为 0,网格间隙为 0。我们稍后再来看看是如何工作的。然后我们使用align-items: start
代替默认的stretch
,并应用一些类型样式。
UL: emoji 数据属性
现在,这可能不是一个可扩展的解决方案,但为了好玩,我们将添加一个自定义数据属性,定义一个表情符号作为每个列表项的自定义数据属性。、
首相我们更新html
:
为了将emojis
用作项目符号,我们使用了一种非常神奇样式属性,其中数据属性可以用作伪元素的content
属性的值:
结果如下, ::before
元素用来帮助说明grid
是如何工作的
emoji
仍然占据在可见的空间中,但实际上它位于grid-gap
中,您可以尝试将第一个li grid
列设置为auto
使emoji
位于li
文本列表的间隙中。
OL:CSS counters 与 CSS custom variables
从IE8
开始,CSS counters
就已经是一个可行的解决方案了,但是我们要增加一个额外的效果,那就是使用 CSS 自定义变量来改变每个数字的背景颜色。
我们将CSS counter
命名为orderedlist
:
这样就实现了下面的效果,但是看起来和默认的ol
没什么区别:
接下来给数字一些基本的样式:
首先,我们应用了一个 Google 字体, 然后设置行高为li
行高的一半,(至少这个字体是这样的,这可能是一个有点神奇的数字)。它将数字对齐到我们想要的与主li
文字内容相关的地方。
然后,我们需要指定一个显式的宽度。否则,即使文本将显示,也不会显示背景。
添加padding
是为了文本与数字背景对齐。
添加后的效果:
background-color
添加自定义变量属性
再给其他li
标签添加元素之前background-color
将会使用默认的变量属性值
ul
和 ol
codepen
示例:
https://codepen.io/5t3ph/pen/WNQwEjz
多列列表
我们的示例只有 3 个短的列表样式,但不要忘记我们将网格应用于基本的ol
和ul
。
在以前我们在 PHP 中用modulus
来拆分列表,并用额外的class
等分多列列表
现在有了CSS grid
,你可以在多行列表中灵活应用它,有了固有的响应性列数,并且兼容内容长度。
应用在上面的例子中,(需要去掉li
标签上 max-width
)
通过修改$multicolumn
变量来切换视图
注意:不仅仅是纯文本作为 li 内容
如果你在li
内有超过纯文本元素像<a>
标签这样的内容,我们的grid
布局就会崩溃。
然而,这是个很容易解决的问题,将li
的内容用span
包裹起来。我们的grid
布局并不关心元素是什么,但它只期望有两个元素,其中伪元素算作第一个。
版权声明: 本文为 InfoQ 作者【寇云】的原创文章。
原文链接:【http://xie.infoq.cn/article/31d341a0bcdcdbcd77cad6c28】。文章转载请联系作者。
评论