BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

充满Trick的CSS,两难的选择

| 作者 田乐 关注 0 他的粉丝 发布于 2007年9月7日. 估计阅读时间: 9 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

javaeye的hax最近在他的blog上进行了一场关于如何写css的讨论,其中反思和讨论了一些关于基于标准或trick进行设计的选择问题,这个问题也是David Heinemeier Hansson对于XHTML/CSS/Javascript标准进行RIA开发话题的一个延展。我们可以从中思考如何在不完美的技术中选择一条相对完美的技术路线?

讨论的起因是淘宝网的UED团队成员段王爷在他的blog上发表了一篇关于淘宝网页面设计上的小技巧(Trick)的介绍,这个技巧是为了让一些条目之间的分隔线完全使用css生成,不使用多余的class,段王爷还对比了其它三种常见实现方法。实现方法如下:

从很久很久以前开始,类目间的横线无非都只有三种。
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点:最后一个还是要用class来隐藏掉背景。
2、符号
在每个a标签之间用“|”符号来填充。
缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。
3、a标签右侧的boder。
同背景图一样,只不过使用border-right来代替。缺点也同上。

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

上面提到的使用border的传统方式需要在第一或者最后一个元素上面添加class来隐藏border,Realazy也在他的blog中给出了一种不错的解决方案,他推荐这样做:

导航项目间的竖线,我们往往通过border或者background来实现。特殊需求是,第一项左边无竖线或最后一项右边无竖线。按照一般的编程方法,控制第一项要比控制最后一项容易得多。

区分第一项的还有一个好处是,CSS有一个:first-child的伪元素(pseudo element)可以让我们轻而易举的选择第一个子元素。遗憾的是,当前全球占有率最高的浏览器,IE6,并不支持这个伪元素。我们可以手工给第一个元素加上class然后再定义它。等ie6淘汰之时,就可以放心用 :first-child了,相权衡的话,我觉得给第一项加上class="first"也不失为实用主义做法。

Realazy提出的方案的思路是使用基于标准的css选择器(selector),这种方法的好处是可以实现完美的内容与表现分离。但是现实的问题是并非所有的浏览器都基于标准实现,这也正是基于标准的RIA开发面对的最大问题,尤其以CSS和Javascript问题最大。javaeye的hax在他的blog中提出了自己对于这个Trick的不同意见:

因为我觉得这个方法一点也不好。很简单的一个理由:这只是一个trick,只适合这特殊情况,假设你要换用“-”来分割呢?作为插入分割符号来说,真正合理使用css的,我给一个例子:
li ~ li:before { content:'-'; margin:0.25em; }

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

好了,下面说缺点。唯一的缺点:IE不支持。

hax给出的方案在IE中无法使用,其实对于大部分网站来说这就相当于绝大多数用户都无法看到这种表现,这就意味着失败。淘宝UED的小马提出“实用第一”,从这种观点上说hax的方案就是不实用的。但是hax提出可以使用Dean Edwards的IE7 Javascript库

IE7是一个可以让IE像标准浏览器一样工作的Javascript库。它修正了很多CSS问题,让PNG在IE5和IE6下正常工作。

IE7这个库动态的实现了很多IE原本不支持的伪类(Pseudo Classes),让完全基于标准的css选择器(使用伪类)成为可能。随后,hax在他的另外一篇blog“面向未来的CSS实践”中作了如下设想:

我推崇一种面向未来的CSS实践。即大胆采用CSS2.1甚至部分CSS3的特性。因为绝大多数特性,Firefox、Opera、 Safari等都已经很好的支持了。MSIE7也改进了许多,将来IE也无疑终究会完全支持CSS2.1。对于目前的IE,除了graceful degradation的方式(实际上整个内容样式分离的原则和良好的CSS设计可以确保这点,比如淘宝以前的“裸体”所体现的),可以考虑通过特定手段来patch之。

在这点上,我必须说,我原来也是一直坚持只用ie6的selector的。是什么改变了我?就是Dean Edwards的IE7!它的出现不仅在于实践价值——即提供了一个对于IE的补丁,让开发者可以直接写CSS2甚至CSS3。

hax提出的这种方式是比较激进的,他还在“面向未来的CSS实践”中进一步的描述了通过脚本修正的方式解决IE不支持标准伪类和多class问题的设想,他的核心想法就是让CSS的开发可以遵循标准,减少为了优雅退化(graceful degradation)而向最低支持(浏览器)兼容造成的表达方式限制。但是hax自己也提出了这种思路面临的尴尬,它举了table布局的实用性价值为例:

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

“遵循标准的人活得比不遵循的人更累”这句话说出了很多坚持基于标准进行CSS设计的开发人员的心声,这其实是实用性和坚持标准之间的一些交换,现实世界中两个方面如何平衡正是广大XHTML/CSS/Javascript开发者需要认真思考的,关键的问题,还是目的要明确。盲目的遵循标准,例如很多开发者着迷于使用div布局代替table,但是却没有明确的目标就会迷失,hax这样评价:

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

table布局 其他css样式 = 清晰的布局意图和内容的混合体

div容器 css样式 = 内容样式分离,但是从css代码中很难看出布局意图

关于div/css布局还有一些误区,简单的把table标签换成div是没有意义的(若干层级的div可能比table更糟糕)。实际上我们希望的是语义标签。

我们应该看到,CSS的意图是将表现分离。从设计的角度就是实现语义化的html结构,让html/xhtml尽量只表达纯粹的数据结构。但是此时css里面的布局意图是比较难以被记录的(难以被理解就难以维护,难以重构),有其在充斥了大量Trick的情况下,这正是广大程序员/设计人员需要解决的,我们是否应该通过不断地重构来找到这个矛盾的平衡点呢?欢迎大家讨论。最后附上淘宝UED团队的小马总结的淘宝CSS编程原则:

  1. 尽量不使用hack
  2. 尽量不使用ie6不支持的选择符
能符合这两个条件的最简洁的写法,就是我们的目标。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

最后这个原则还是在国内用用就好了 by 铭 刘

关注一下全世界的非IE使用量,在欧洲和美洲的比重都是很高的,已经不是可以忽略的量了,所以现在如果做一个网站,都应该先考虑是不是需要面向全世界,如果是的话,尽量不使用ie6不支持的选择符就必须有个前提,就是不影响firefox的表现

Re: 最后这个原则还是在国内用用就好了 by 霍 泰稳

特别是在开发者社区中,包括在国内,使用Firefox的人群所占的比重更大。虽然整体的数据不大,但开发者确实能影响一大批人。

Re: 最后这个原则还是在国内用用就好了 by 田 乐

网站当然要兼容多个浏览器,这个是前提。这些CSS Trick也正是为了达到兼容的目的。
目前Firefox的占有率在欧美也是12%,根据如下市场调查:
www.onestat.com/html/aboutus_pressbox53-firefox...
IE目前的确是比较大,这个在中国和全世界都是现实。所以,问题就在于我们如何面对这个现实了。淘宝的说法还是中肯的,但是相信标准的人还是应该坚持走自己的路,所以说,这是两难的选择。

Re: 最后这个原则还是在国内用用就好了 by 霍 泰稳

虽然说现在很多网站说自己的兼容性非常好,但使用起来还是在IE下面效果更好一些,而且有时会发现同一个网页在IE上浏览竟然会比在Firefox上浏览多出一些功能,很有意思。我想“兼顾标准,侧重IE”应该是多数网站在开发时选择的标准。

前一段时间不由有自由软件组织声讨招商银行网上银行不支持Firefox吗?但就国内目前FF的使用率,招商银行在设计时应该是考虑到了这么一群人,只是后来算了一下投入和产出不划算,然后就作罢了吧。所以说,商业因素也是应该考虑在内的。

用标准多省钱啊 by 随随 米

想想百万级或更高的网站,用标准要省多少带宽和流量啊,产品的扩展性也加强了,多好啊,哈哈哈

我觉得限制标准发展最大的问题还是工具的支持 by Xie Fengbo

从编代码的角度看,使用标准技术是非常优雅的。但是还没有主流的开发工具很好的支持。大部分网页原型还是photoshop来做的,美工很习惯切割一下输出,要想再改成div布局是很费劲的一件事情。所以用标准的人更累。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

6 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT