CSS雕虫小技:八卦五行布图法介绍

本质和优点



先申明一下,这里不是在谈玄论道,说八卦五行,我只是利用了一下这几个数字传统的知名度,以及阴阳说中问题归纳和状态演化的技法。

这里所说的布图,就是一种将诺干背景小图片合并在一起(传说中的CSS滑动门技术);这里说的布图说的就是如何组织这些零散的小图片。

口诛笔伐:糟糕的绝对位置布图法:

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中,比如【0,0】放置一个编辑按钮,【0,40】放置一个删除按钮【0,60】放置一个保存按钮。等等。

如此最大的问题是:无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。

那么,我们如何更好的布图呢?

首先,让我们抛弃我们使用绝对位置的习惯,理由是:

1.绝对位置不便记忆:

绝对位置都是一些数字标示,非常难记,相对位置是个有限集合,绝对位置有无限的状态。

2.绝对位置不便适应需求的变更:

比如我们一个小图片,最初是 18*18,于是,我们布图的时候,间隔为20.

但是后来开发了一套大图标皮肤,小图标的大小变成21*21,溢出了。。。,改吧,慢慢改吧,我们有的是时间。。。

3.绝对位置在编辑的时候也比较麻烦:

而相对位置,你可能只要打开你的布局管理器,轻轻点击几下对齐图标。

如果有一些小调整,绝对位置布局的时候,我们要小心的计算出新的布局位置,更新文档,更新相关代码,通知相关工程师。。。。

4.增加沟通成本:

因为绝对位置的无穷性,我们无法给数值表示的相对位置赋予通用的适合的语意,无穷的状态我们需要依赖无穷的文档。

(我们估计没有这种文档,一旦需要调整,打电话问吧,希望你能找对人。。。)。

而相对位置,只有有限的状态,我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性:

这点不必解释,绝对布图法根本就不具备这一特征。



太极生两仪,两仪生四相,四相生八卦。

最朴素的图标只有一个状态,这很简单,我们制作一张很朴素的图片即可。

然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候,我们可以采用左右两端布图。

之后呢,鼠标按下去是不是也要有一个新的状态?哦,还差点忘了,更重要的,功能禁用了我们也需要一个状态。至此四大天王到齐了,各自找个角落呆着吧。

我们常见的也就是这四种状态:

1.正常:

2.鼠标放上

3.鼠标点击

4.禁用

如果我把这四种状态自左上起,顺时针排列,我们还可以达到一个惊人的自适应性。

当我们只准备了一个图标的时候,吧他做成整幅度的图片,那么四种状态都显示为正常的图标。

需要增加状态2的时候,只需要扩展右段新图片。同样,一切正常(disablle状态不被支持,显示为正常状态,按下和鼠标移上效果一致也是一个理想的巧合)。

当需要鼠标按下的时候,扩展下方图标。同样,一切正常。

这四种状态的组合,我称之为斜四相。对应样式单为 “.quad-x-”

但是,我们的八卦可是有八个方位的,不要轻易浪费了,怎么办呢?

老子说了:”万物负阴而抱阳,冲气以为和”。

这是我们客观世界普遍纯在的规律。

比如,我们有一个展开的图标,那么我们极有可能需要一个关闭的图标。我们有一个保存按钮,那么,我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联,完全应该安排在一起。

于是,我们吧原来的布局位置,顺时针旋转45度,一个正四相产生了。对应样式为:“.quad-y-”

待续。。。。

Haslayout真的会成为历史咩?

http://www.ctba.cn/blog/entry/2338

在搜索 haslayout 的触发条件时搜到 这个八卦,Markus Mielke 在针对“Internet Explorer 8 and Acid2: A Milestone”讨论的公开邮件中回复道:“I do not think I am disclosing too much by saying that HasLayout will be history with IE8 (it was an internal data-structure to begin with and should have never been exposed).”

想想,haslayout 确实该被称作 internal data-structure,毕竟它没有一个可指定的 css 属性,必须通过设置元素的其它属性来触发他,而触发或关闭它的条件有那么零碎,实在是2。这里是 M$ 官方对于 haslayout 的 详细说明,我把触发条件单总结出来,在 IE8 尚未普及出现更好的解决办法前,haslayout 还是常用到的:

属性 激活 取消

display inline-block

(max-)width/height

auto 以外任何值 none

position absolute | fixed static

float left 或 right none

writing-mode tb-rl lr-t

overflow hidden | scroll | auto

zoom 有值就可以 normal 或为空

这么一列也就比较清楚了,像笔记中提到的 Holly Hack,就是用的 height 的激活:height: 1%,同样还有经典的 zoom: 1(但这个并不似乎推崇,有更好的选择)

ps, 在琢磨 alibaba 08 的一道在线笔试题

第一题是用三个 div 画出图上的布局,比较简单,注意 ie6 3px bug 就可以。一般来讲,我会用4个 div 描述这个布局,也就是将左侧统一包一层,这样左侧层中可以使用流式布局,不必重复考虑宽度问题,也能避免 3px bug;所以题目中强调使用三个 div 实现也算是个小地雷。

第二题如 gif 所示。难点不在这个动作上,在于,如果不是用绝对定位(position:absolute)这三个层,比如使用浮动定位,该如何实现这个效果。