CSS秘密花园: 斑马条纹背景的文本行

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

几年前,我们第一次接触伪元素:nth-child()/:nth-of-type()的时候,最常见的用例之一就是“斑马条纹”的表格。

斑马条纹背景的文本行

这在以前需要服务器端的代码,客户端的脚本,或繁琐的手工代码,现在它已经只需要简单的这几行代码就可以实现了:

tr:nth-child(even) {
    background: rgba(0,0,0,.2);
}

斑马条纹行的表格在UI设计(如上面展示的Mac OS X Yosemite文件列表)和印刷设计中非常常见,因为斑马条纹可以帮助我们的视线更容易地跟随一长行移动。

但是,对于为文本行应用相同的效果,而不是表格中的一行的时候,我们就变得无能为力了。这对于提高代码片段的可读性非常有用。很多作者最后都会用JavaScript来包装<div>中的每一行,这样它们可以和:nth-child()技术一样,在语法高亮中使用这种方法。这不仅是它减少了理论简洁的原因(JS不应该用于样式),还因为很多DOM元素会拖慢页面的加载,所以这是一个非常脆弱的解决方案(当你增加文字大小,还有某个换行时会怎样呢?)。还有更好的方法吗?

很多作者甚至给css工作小组发了请求,申请一个:nth-line()伪类,但是因为性能原因被否决了。

解决方案

除了伪元素应用一个较暗的背景颜色来代表行,我们以另一个角度来思考问题。为什么不可以为整个元素应用一个带斑马条纹的背景图像呢?这刚开始听起来可能比较可怕,但是我们可以直接在CSS中生成背景,通过CSS渐变并让它们以em为单位,这样它们可以自动适应font-size的变化。

让我们延伸一下这个想法,写出下图中的斑马条纹的代码。

斑马条纹背景的文本行

首先,我们需要创建横条纹,根据《CSS秘密花园:条纹背景》方案。background-size需要是line-height的两倍,因为每个条占两行。我们第一次尝试的代码如下:

padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(
                  rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;

效果如图所示

斑马条纹背景的文本行

结果和我们想要的是非常相近的。我们可以尝试改变字体大小,还有条纹收缩或扩张成我们需要的大小!但是,有一个很严重的问题:线条没有对齐,和我们的目的不符。这是为什么?

如果你仔细看看上图,你会发现第一个条纹是从我们容器的顶部开始的,正如我们希望从背景图像中得到的一样。但是,我们的代码不会从那里开始,因为这样看起来会非常丑。所以正如你看到的,我们应用了一个.5em的内边距,这使得它和我们的条纹偏移了。

解决这个问题的一种方法是使用background-position来让条纹相对于底部移动.5em。但是,如果我们决定后边调整内边距,我们还需要调整背景位置,这并不是非常DRY。我们可以让背景自动适应padding的长度吗?

我们回忆一下background-origin。这正是我们需要的:一个告诉浏览器使用内容框边缘作为基准来解决background-position的方法,而不是默认的填充框边缘。让我们把它添加到前边的代码中:

padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,
                  transparent 0);

如图所示

斑马条纹背景的文本行

这正是我们想要完成的斑马条纹效果的代码!因为我们在条纹中使用了半透明背景的颜色,我们可以调整背景颜色,斑马条纹仍然可以工作。基本上,这是非常灵活的,破坏它的唯一途径是改变line-height的值,而没有相应改变background-size的值。

这是假设我们正在处理代码片段。在一般情况下,如果有内联元素需要一个更大的行高的时候,它也可以被打破,比如有较大fontsize的图片或内联内容。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-secrets/zebra-strlped-text-lines.htmlnike air max 2019 black

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-secrets/zebra-strlped-text-lines.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部