2007年3月18日星期日

你有 < table / > 强迫症吗?

上次讲到“欲练 CSS ,必先宫 IE”,如果你宫了IE然而还是觉得不得要领,那就该怀疑自己是不是有传说中的table强迫症了。

CSDN社区上,时不时能够看到一些页面整体布局的问题,要求用div做一些table才能做到的,否则就以此为把柄说XHTML+CSS布局方法不好。其实,首先要做的是改变思维,以适应XHTML+CSS的布局。

面向页面设计而非面向浏览器设计

XHTML+CSS能够实现的是一种流布局,也就是随着内容的长度自动增长区域,并且最终导致整个页面增长,这时候浏览器就必须显示滚动条。table强迫症的一个征兆就是极力避免流布局,希望以浏览器的可视区域为布局目标,要求在可视区域中划分内容区域而不是在页面上划分内容区域。实际上XHTML是无法针对浏览器设计的,因为它仅仅包含语义,或者说是内容,而浏览器如何去表现这些内容是我们无法确定的。CSS提供了我们控制表现方式的一种途径,但这仅仅是针对主流浏览器的,而且浏览器支持的“指令集”还有稍为的差别(说到这,我真希望能够为一个浏览器写CSS然后编译为全平台兼容代码),最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此,如果你决定要开始写符合语义的XHTML并且仅仅用CSS控制布局,首先就要把思路转变为面向页面(或者说是文档)的布局控制,而非面向浏览器可视区域的布局控制。

接下来肯定有人要说,“那你就是承认了有些布局老方法很容易做到,但新方法很难做到啦”。这是当然的,然而这不成为我们继续使用table的理由。这时候要反过来探讨原始目标了,我们是为什么要控制布局?低层次的需求是为了美观,谁都希望同样的内容能够以更好的视觉效果展示在用户眼前;高层次的需求是为了控制受众的浏览方式,让他们能够按我们预先设计好的方式来区分页面内容的轻重点,按我们的期望优先浏览某些内容,同时也帮助他们更快的找到他们想要的内容,而不会在我们的网站内感到沮丧。既然我们确定了这时控制布局的目标,那么我们再来看看CSS是不是“没办法把事情做好”。首先,CSS也能做出美观的页面,虽然某些布局做不到,但是在CSS的限制下做到同等美观程度的页面是肯定没问题的。其次,CSS也能让设计变得友善,不会说CSS的设计就肯定是“干净”到用户无法一眼找到他想要的功能。因此,虽然CSS无法实现某些特定的布局效果,但对于设计师来说它能够达到老方法所能达到的同等效果,这就足够了。

从XHTML中去掉内容无关的视觉元素

另一个table强迫症的征兆就是,习惯为每一个视觉上的元素对应一个XHTML元素。在table中,无论视觉效果有多复杂,我们总能不停的切割table,甚至table套table,直到准确定位每一个特定的元素。然而应用了CSS之后,这就是不必要的,甚至会给设计师带来麻烦,因为XHTML+CSS就是为了内容和布局分离,所以如果一个视觉元素与内容无关,那么它就不应当出现在XHTML中,自然也就不会对应一个XHTML元素。

例如有一个网站当前栏目的徽标,这个徽标没有任何的语义,而XHTML中也有文字内容描述当前栏目了,那么这个徽标就并不一定要对应一个<img />元素。如何让徽标显示出来呢?它可以是当前栏目文字描述区域的background-image,同时通过一些定位技巧让它显示出来。如果你认为有这个徽标就不需要文字描述时,你还可以通过定位技巧将文字隐藏掉,这样单纯看XHTML或者在不支持CSS的浏览器上就只见文字描述,而在支持CSS的浏览器中则看见会标。从这个例子,我们可以看得到一个视觉元素不一定要对应XHTML中一个实实在在的内容元素,或者对应一个文本元素而非图形元素。XHTML包含的是内容,那就不应该包含与内容无关的视觉元素描述,而通过CSS你可以事后增加有关的视觉元素。

又例如:before和:after这两个伪选择器,允许你创建插入在匹配元素前后的元素,这样就能够实现非内容视觉效果仅在CSS中插入。常见的用法包括,插入clear到浮动元素之后以确保父元素的完整包含,又或者是引用语句的前后自动加上引号。事实表明,CSS是很适合于将非内容的元素从XHTML中分离出来的,因此我们在设计XHTML时就不能够总想着要有什么效果,而应该单纯想着信息的组织形式。

最后,如果要我为table强迫症开处方的话,我还是会选择《CSS Mastery/精通CSS》。看完之后,你自然能够解除上述的烦恼,理解到CSS布局带来的便利,从而选择开始用纯CSS的思维来进行设计。如果你关注CSS方面的内容,可以考虑订阅我的blog:

将来我会和大家分享更多关于CSS的思考,以及使用CSS的技巧。

没有评论:

发表评论