写点什么

充满 Trick 的 CSS,两难的选择

  • 2007-09-06
  • 本文字数:2837 字

    阅读完需:约 9 分钟

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 不支持的选择符

能符合这两个条件的最简洁的写法,就是我们的目标。

2007-09-06 09:34972

评论

发布
暂无评论
发现更多内容

苹果电脑效率提升:Alfred 5 for Mac直装版 附Alfred5汉化包 支持M1

南屿

Alfred 5 Mac Alfred 5破解版 Mac效率办公软件

HTTP代理IP在什么情况下会请求超时?

巨量HTTP

代理IP http代理

赋能企业:释放加密货币代币开发的潜力

区块链软件开发推广运营

数字藏品开发 dapp开发 区块链开发 链游开发 NFT开发

权威认证!用友再获全球企业级应用软件市场10强

用友BIP

企业级应用软件

DAPP去中心化交易所系统开发|详情方案|规则逻辑

西安链酷科技

DAPP系统开发 DeFi流动性挖矿

Studio One 6 Pro永久许可证 附Studio One for Mac安装教程

南屿

Studio One 许可证 音乐制作软件 Studio One 6下载 Studio One 6破解

探析ElasticSearch Kibana在测试工作中的实践应用 | 京东物流技术团队

京东科技开发者

测试 Kibana ES 企业号9月PK榜

M3E/OpenAi+vearch内容查重实践 | 京东云技术团队

京东科技开发者

数据库 openai 企业号9月PK榜 内容查重 vearch

平台运营,让数智底座更安全更稳定更高效

用友BIP

数智底座 2023全球商业创新大会

专家观点∣基于数据驱动的设备预测性维护

用友BIP

数据驱动 设备维护

Affinity Photo 2 for Mac(专业修图软件) 2.2.0永久激活版

mac

修图软件 苹果mac Windows软件 Affinity Photo

什么是IoT数字孪生?

3D建模设计

IoT 数字孪生

功能强大的 PostgreSQL 没有 MySQL 流行的 10 个原因

NineData

MySQL postgresql 架构 品牌

GLTF编辑器如何快速重置模型原点

3D建模设计

编辑器 GLTF 模型原点

逻辑漏洞挖掘之XSS漏洞原理分析及实战演练 | 京东物流技术团队

京东科技开发者

信息安全 漏洞分析 xss攻击 逻辑漏洞 企业号9月PK榜

DApp交易所兑换底池模式系统开发|案例分析

西安链酷科技

Web3 游戏 链游开发

末流院校24届秋招逆袭之路!

王磊

Java java面试

后端开发需要安装哪些软件/插件?

小齐写代码

2023-09-20:用go语言,保证一定是n*n的正方形,实现从里到外转圈打印的功能 如果n是奇数,中心点唯一,比如 a b c d e f g h i e是中心点,依次打印 : e f i h g

福大大架构师每日一题

福大大架构师每日一题

PopClip for Mac(剪切板复制粘贴工具) v2023.9中文激活版

mac

苹果mac Windows软件 PopClip 文本操作工具

Appilot发布:打造面向DevOps场景的开源AI助手

SEAL安全

AI DevOps 企业号9月PK榜 Appilot

创新传媒行业的未来发展

百度开发者中心

#人工智能 生成式AI 千帆大模型平台

即时通讯技术文集(第21期):后端架构设计基础入门系列 [共15篇]

JackJiang

网络编程 即时通讯 即时通讯IM

GLTF编辑器如何合并相同材质的Mesh

3D建模设计

编辑器 GLTF 模型材质合批

覆盖8大领域,云投集团财务数智化管理平台全面上线!

用友BIP

财务数智化

鞍钢集团∣共和国钢铁工业长子的财务转型之路

用友BIP

财务数智化

别再纠结线程池池大小、线程数量了,哪有什么固定公式 | 京东云技术团队

京东科技开发者

cpu 线程池 企业号9月PK榜

量化交易/秒合约/合约跟单/交易所系统开发(成熟案例)

西安链酷科技

去中心化 花火交易所系统开发 合约交易所开发 区块链交易所开发

乌托邦UOT系统开发NFT技术实现

西安链酷科技

DAPP系统开发 PHA质押挖矿

VUE模块化开发是如何实现的?

FN0

Vue

当敏捷开发遇上固定交付……

敏捷开发

项目管理 敏捷开发 Scrum Master 固定交付

充满Trick的CSS,两难的选择_Java_田乐_InfoQ精选文章