论坛首页 Web前端技术论坛

关于竖线分隔的CSS trick

浏览 8170 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-08-13  
CSS
Taobao UED blog 上,刊载了段王爷的css日记一篇,我上去留言引起了一些讨论,记录于此。

段王爷的原文(摘录)
引用
现在就来说个淘宝首页上的一个小技巧。

类目之间的横线

从很久很久以前开始,类目间的横线无非都只有三种。

1、背景图
     在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
     缺点:最后一个还是要用class来隐藏掉背景。

2、符号
     在每个a标签之间用“|”符号来填充。
     缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。

3、a标签右侧的boder。
     同背景图一样,只不过使用border-right来代替。缺点也同上。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。


回复(摘录)
realazy 写道

虽然用border很方便,但有一个缺点:border的高度跟着盒子的高度(在这里是行高)走,如果能忍受这样的高度带来的不美观,那我也没有什么话好说

等ie6淘汰之时,就可以放心用 :first-child了,相权衡的话,我觉得给第一项加上class="first"也不失为实用主义做法。

aoao 写道
在每个a标签之间用“|”符号来填充。也不是没意义。。
只是选择使用li时它才是没意义。。。


我的回复 写道

首先加“|”并不是没有意义的做法。其次用margin-left的方法也不见得好。比方说也有border高度的问题。

我觉得有人跟风你也别得意。因为我觉得这个方法一点也不好。很简单的一个理由:这只是一个trick,只适合这特殊情况,假设你要换用“-”来分割呢?

作为插入分割符号来说,真正合理使用css的,我给一个例子:

li ~ li:before { content:'-'; margin:0.25em; }

优点:含义非常清晰,维护性极高。你可以换任何的分隔字符,可以设定字体,可以设定颜色、大小等样式,甚至可以换用图片作为分隔。

好了,下面说缺点。

唯一的缺点:IE不支持。没错,这就是为什么我们大部分开发者的css水平老是不长进的原因。

不过老是用这个借口也有点寒碜。毕竟Dean Edwards都给我们搞了一个开源的ie7(自从真的MSIE7出来后,它改名叫FixIE)。

当然,我承认DE的ie7在很多方面不适用于taobao这样的网站。对于taobao这样的,甚至裁剪使用ie7都是不可行的,需要有足够能力借鉴ie7自己搞一个替代方案——而这个很难。

所以我在这里的意思是,margin-left对于taobao也许还算一个比较合用的小hack,但拿出来现就有点误导大家了。


小马 写道
实用第一。

段王爷的回复 写道
楼上说的几种方法我都考虑过,只不过我选择了最实际的一种。只要ie还存世一天,只要我们的设计还是“|”,这个方法终究是最实用的。我想不明白,谈何误导大家呢?

Fenng 写道

方法都是拿来用的,没有好或者不好之分


我新的回复

我说段王爷误导,不是说你贡献的的方法不好,或者不实用,实际上作为taobao的设计师,你当然对于怎样权衡取舍最有发言权。

我说的是,你没有把权衡的前提条件说清楚,因此对读者有误导。特别是对于怎样写css有误导。抛开taobao的特定环境和限制性的需求,你对几个方案的比较,最后选择你现在这个,实际上理由并不充分,而且你也没有指出你自己方案的缺点。从一般角度说,相比较我所指出的缺点,前面三种方式所存在的缺点并不见得就更严重。

所以你的误导在于对整个取舍的过程,优劣的比较上。特别是你的方法,对于设计来说存在一些严重的约束,例如只能是竖线。技术是为设计服务的,而不是相反。(当然技术对设计有约束是正常的,但是要看是怎么样的约束。)

这里存在一个因果关系,对于你来说,可能因果是清楚的,有了taobao(竖线)需求的因,才有你选取这样的trick的果。但是对于其他人来说,就很可能混淆因果,将一个带有很大局限性的trick奉为圭臬,到时候也许你自己也会觉得可笑呢。

这里有些人讲什么“实用第一”,我建议应该好好反省一下。小马同志,按照这种逻辑,table布局很实用呢,font也很实用呢。也许你觉得冤枉,此实用不同于彼实用。Ok,这就是问题所在。你怎么分析到底实用与否呢?不能拿一句“实用第一”就搪塞过去了。那是废话。需时时警惕,不要用双重标准—— 对己有利的,就实用,对己不利的,就不实用。

还有恕我直言,拍王爷马屁,也要有点技巧。比如“方法都是拿来用的,没有好或者不好之分”的那位,段王爷不是在点评几种方法的好坏么,你这个马屁可拍歪了。

我在回过头来说说段王爷说的“最实际的一种”,你的实际,需要有一个判断标准,需要有前提的。你后面提到的“IE”和“竖线设计”就是你在原文中所遗漏掉的前提。

这些前提对你来说也许是自然的,但是不能想当然的就变成默认前提啊。那就变成绝对化的“最实际”了。“竖线”那个问题,我前面已经说过了,这里不再赘述。我这儿单说说IE。首先并非所有应用,所有网站都必须考虑IE。比如XUL应用,比如可以选择客户端部署的企业网站。

其次——这是我说的重点——为什么我们一定要确保所有浏览器里的样子是完全一致的呢?内容样式分离,以及css的内在之意,就包涵了graceful degradation的设计意图。在这个例子里,IE不显示分隔,的确不太完美,但并不损害用户对内容的理解和使用。

注意,我不是说taobao或者任何网站就应该采取我说的方法。这完全取决于各种外在条件下的权衡。我想要说的是,不要贸贸然的说“实际”和“实用”,还没有思考就预先排除了很多可选项。实际上绝大多数网站是可以采用graceful degradation的设计方法的。

再次,就算要同时做到“在IE下的完美呈现”,也不是没有其他方法。例如我说的Dean Edwards的ie7开源项目。它也许不适用taobao,但是可以适用于其他项目。

我个人比较喜欢的方式是,按照标准css2写,然后为ie单独写hack,通过css、css expression、behavior甚至一段script,都是可行的,包括对于taobao这种类型的(大型商业网站),我认为也是可行的。当然,这样一种方式,许多人可能不认同,认为太困难,或不如用一些更特例的trick有效。这个就看如何权衡了,需要另一篇文章来探讨。

最后顺便再对“实用论”说一点,关于table布局和实用主义的问题,在这个讨论(http://www.iteye.com/topic/95739?page=4)中,我有几小段思考,copy过来供大家批判:

引用
……Sure。昨天晚上我拿DHH原文看了一遍,我觉得他只是不满于Adobe/Microsoft摆出一副解救众生于Web水火中的姿态,而许多人高声应和。

另外,看看comments,也有许多人反对他的意见的——其中甚至包括一个Adobe的Flex Marketing Team的……多数人的论调是:工具么,各有擅场。老实说,这种实用主义论调还真是不可爱,难怪好多人(包括dlee)要对老是引用南方公园中的愤青 Cartman的粗口的DHH崇拜有加。

从技术美感的角度说,我不能隐藏我是如此喜爱xhtml/css/javascript……

……但是回到现实中,现有的标准,现有的实现,确实有太多不足了。也难怪人家鼓吹新的银弹么。

引用
……凡给定界面的都或多或少倾向于grid 布局,仅仅是复杂程度的问题。例如仿桌面的界面(蛮流行的)。因为桌面应用中,几乎大都使用各种类型的grid布局。我以前一直鼓吹在web上就应该使用 flow布局而不应使用grid布局。但是随着对交互设计的认识加深,我意识到应该从用户体验出发。从技术上说,flow布局的主要好处是灵活适应不同的 viewport,但是真正把一个1280*1024的界面转换到640*480或者更小的viewport里,不是那样简单的。他们的应用场景很可能有很大不同。理想上,我未来能使用css media query,来为不同的分辨率(应用场景)来设计,对布局乃至流程做完全不同的调整。但是理想不等于现实。无法实现或太晚实现……都可能导致我们不愿看到的情况。

另外一方面,我恰恰是想要完全否定table布局的,正是基于此,我认为出现这样讽刺的情况,即遵循标准的人活得比不遵循的人更累,是很有问题的。这种矛盾在我身上存在着,2001年的时候我在某bbs上发了个贴,大数table布局之罪,但是过了几天我又跑上去说table布局在某种情况下也可以用用。 dlee同志貌似到现在也跟我当时一样。如果你确实认为,table布局从实用主义角度无法被完全否定,那DHH同志采用实用主义的角度来力挺 html/css/js就也有点心虚,那个标题也就显得带点任性味道。。。


引用
……再说table吧,从实用主义角度说,谨慎的table布局也许更简单,因为它更好的映射到了grid模型上。如果你转用div/span,标签是清晰了,但是css是混乱的!!为什么?因为你无论绝对定位也好,float也罢,这些属性是分散的,css代码无法反映整体,无法记录你的grid 布局意图!这是为什么我们经常说我有一个css trick的原因,它是trick而已,是你达到最终目的的手段,但是你的目的,你的意图,没有好好加入文档的话,那维护起来恐怕也不见得轻松:

table布局 其他css样式 = 清晰的布局意图和内容的混合体
vs
div容器 css样式 = 内容样式分离,但是从css代码中很难看出布局意图

关于div/css布局还有一些误区,简单的把table标签换成div是没有意义的(若干层级的div可能比table更糟糕)。实际上我们希望的是语义标签。所以我们希望避免无意义或仅仅为layout或presentational的div标签,但是有时候居然是css hack的代价(比方说在某些css圆角实现中)!

也许归根到底是怪css还不够好,怪browser的实现还不够好。比方说你要在一行上放两个东西,实际上可能需要的是css column支持。。。但是还是那样,开发者的耐心是有限的,勾画的美好蓝图从来不如微软的甜蜜诱惑。特别是他们许诺通过更智能(更邪恶的宝葫芦的秘密?)的ide,也能提供你所说的web标准网站的可维护性的时候。对于他们来说,html css js,或者是flash,只是开发者看不见的 presentation层而已(据csdn新闻上元红岗同志的说法是不依赖於表现层的表现层),它帮你抹平了,你不用担心。按照这种逻辑,现在的 WYSIWYG工具只是不够智能而已而已。。。



   发表时间:2007-09-06  
hax,你这篇真的是非常有价值的文章。我2周前就想挖掘一下发表在InfoQ。
http://www.infoq.com/cn/news/2007/09/css_trick_to_be_or_not_to_be

感谢你的工作,希望我的mush up工作没有侵犯你的劳动成果,希望大家可以一起讨论。
0 请登录后投票
   发表时间:2007-09-08  
To Tin:
很好的总结啊。只是后半部分转折有点突兀。因为我的原文的后半部分是顺便总结一下先前与dlee等同志对于DHH文章的讨论。虽然与前半部分一样,同样是指出当前CSS实践中的一些困惑,但前者,我已经提出一些解决的思路,后者则还没有什么好的方法(除了等待遥遥无期的CSS3的高级布局模块)。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics