小麦的自习教室

关于界面的价值观与方法论

IE里关于CSS的优先级的bug（三）

分类: 网页标准 | 时间: 2008-6-29 11:08 pm | Tags: , , ,
29
June
2008
.orange_link .orange_link .orange_link a { color: orange; }
.orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
.orange_link a { color: orange;}

根据上次的结论：在IE6里，“a:hover”的优先级比“.orange_link a”高。说起来，a:hover还真是终极霸王的感觉～哈。

但是呢，很好玩的事情来咯。在IE6里面，“.orange_link .orange_link a”的优先级和“a:hover”一样高。请在IE6里面看下面的代码：


提示：您可以修改代码之后再运行

可以看到，“.green_link .green_link a”在“a:hover”后面，于是就生效了，而“.orange_link .orange_link a”在前面，就没生效。所以，它们是一个优先级的哦。

好了，最诡异的来了。我们试试看“.orange_link .orange_link .orange_link a”和“a:hover”的优先级。


提示：您可以修改代码之后再运行

结论是：IE6里，“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高。
以上的结论在:visited和:active也成立，但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。

最后再补充一点就是，IE6中，“a#blue_link”或是“#blue_link”的优先级比a:hover要高。这点上它没有出错。

所以，在IE6里面关于链接伪类的bug真的很疯狂～～大家一定要小心。为了避免这种优先级的bug，在写CSS的时候，尽量用显式的:hover来定义样式，不要指望只用.class a就能改变a:hover。

总结一下IE6里链接伪类（:hover，:visited，:active）的优先级的bug：

a#id  或 #id
    大于
.class .class .class a
    大于
a:hover
    等于
.class .class a
    大于
.class a
本文地址 | 给点评论吧[0]

IE里关于CSS的优先级的bug（二）

分类: 网页标准 | 时间: 2008-6-29 10:23 pm | Tags: , , ,
29
June
2008

IE里面关于CSS优先级的bug其实挺多，所以这里还得来个第二篇。可预见的还有个第三篇，大家耐心。

这次讲的是有关链接伪元素的。CSS2.1规范里有明确的提到，类名和伪元素的个数是合并在一起计算的。换句话说，:hover的优先级，应该和如.highlight一样高。但是在IE 6里并不是这样的哦。看下面两个定义

a:hover{ /* 优先级 [0,1,1] */
    color: red;
}
div.green_link a { /* 优先级 [0,1,2] */
    color: green;
}

OK，注释里我已经写清楚了，“div.green_link a”的优先级比较高。但是请在IE 6里看下面的代码：


提示：您可以修改代码之后再运行

大家会发现，在IE6里面，a:hover的优先级比div.greenLink a高。并且，同样的结论在:visited和:active里面也有，但是:link却没有这个问题。另外，IE7和IE8beta1没有这个问题。

本文地址 | 给点评论吧[2]

IE里关于CSS的优先级的bug（一）

分类: 网页标准 | 时间: 2008-6-20 10:23 pm | Tags: , , ,
20
June
2008

CSS优先级的知识大家应该都比较了解了（如果不了解可以参看《详解CSS的优先权》）。但是，注意哦，这只是W3C的CSS2.1规范自己声称的。而事实上，确实有“极少数的浏览器”并不一定按照这个规则来办。这个“极少数浏览器”我就不点名了哈。

今天介绍一个最简单的。

div.colorful {color: red;}
div .colorful {color: green;}

按照CSS2.1规范里的规则，这两个CSS选择符应该是相同的优先级，应该以最后的为准。但是，在IE里并不是这样哦。

在IE（随便哪个版本）和FF（或Opera）里看这段代码：


提示：您可以修改代码之后再运行

看到了没？标准浏览器里是绿色，而IE里是红色哦。

同样的问题还会出现在：

.colorful div {color: red;}
div .colorful{color: green;}

IE认为，“.colorful div”比“div .colorful”的优先级高。自己去试试看。

但是呢，它会认为“.colorful div”和“div.colorful”的优先级一样。所以结果是

.class html = html.class > html .class
这个结论在IE5.5、IE6、IE7、IE8beta1里面都成立。

是不是有点晕了？哈哈～～实在记不住就算了吧～

本文地址 | 给点评论吧[0]

“银弹”Hack（IE6、7、8beta1）

分类: 网页标准 | 时间: 2008-6-17 6:41 pm | Tags: , ,
17
June
2008

拿到IE 8 beta 2的 Search Partner Build Invitation。于是下午花了点时间先在网上搜寻了一下关于IE 8对CSS的支持，以及如何对它做Hack。

我是个懒人，最不喜欢去记那些复杂的hack，所以总是希望能找到一个“银弹”Hack，也就是“能搞定一切的通用方法”。下面是我能找到的最好的一个：

.indicator{
    background: red;             /** 只对FF Opera和Safari有效 **/
    #background: blue;           /** 只对IE7有效 **/
    _background: green;          /** 只对IE6有效 **/
    /*/background: orange;*/     /** 只对IE8有效 **/
}

说明一下：

  • 上面的顺序不要去改动它，也不可以少写某一行。因为事实上以上各句的有效性应该是：
    第一行是对所有浏览器有效（废话！）
    第二行只对IE6和IE7有效（FF和IE8无效）
    第三行只对IE6有效（FF和IE7、IE8无效）
    第四行只对IE8有效（FF和IE6、IE7无效）
    很抱歉，没有单独为IE7使用的对属性的hack，淘宝UED Team上有一个，但要重写选择符，我觉得形式太烦，不喜欢。
  • 请不要用以前区分FF和IE6的hack方式，即在FF那一行加上!important，因为IE 8认得出这个单词（英语水平提高的原因？？哈）
  • 除了我在注释里面写的几个以外，其他浏览器的效果我全部都不知道。若是想要做什么IE5.x或是IE/mac的hack，我建议你再另外单独写一个ie5_hack.css之类的，毕竟那是对少数族群的关怀。
  • 再次说明，这是为像我这样记性不好的懒人使用的，而且这样写出的CSS是非常好理解的。如果你想为更全面的浏览器做Hack，或是想只针对某一个浏览器做hack，请用你自己的方法，只要你记得住。

最后，给大家一个测试页面，像试纸一样可以比对页面在不同浏览器上的效果

本文地址 | 给点评论吧[2]

HTML 5第二份草案发布啦~

分类: 网页标准 | 时间: 2008-6-16 12:18 pm | Tags: , , ,
16
June
2008

（图片引用自Deviant Art）
昨天在W3C看到，6月10日发布了新的HTML 5 草案（Working Draft）。粗略的读了一下它提供的新版本说明文档，作了一点笔记：

HTML 5草案并没有成为正式标准
Publication as a Working Draft does not imply endorsement by the W3C Membership.

作为“草案”发布并不意味着已经得到W3C成员的背书（支持）。

The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification.

HTML 5规范要等到有至少两个软件对其实现了之后，才会宣布定案。

XHTML 1是1999年就发布了，经过了两三年才得到全面支持，而直到近十年之后的最近才得到全面推广。所以等HTML 5得到支持（尤其是那位“非主流”的浏览器的支持），还得有一段日子。根据W3C的HTML工作组的时间表，要到2010年才会有正式的定案。

简单到惊奇的DOCTYPE声明 
<!doctype html>

就这么简单，哈。而且，没有大小写之分。值得说明的是，规范要求，如果声明了这一个DOCTYPE，则可以用所谓的“‘custom’ HTML syntax（定制的HTML语法，我也不知道为什么叫这个）”，亦即以前那种不需要标签闭合的HTML语法。同时它仍然允许XHTML那样的XML格式语法，这样的话就要声明xml文档的DOCTYPE而不用上面这个。

向前兼容性

HTML 5规范没有“deprecated”的元素，原因就是它一方面要求设计师不要试用某些元素，另一方面却要求浏览器必须支持这些元素。这样的话，以我的直觉，它是想支持以前所有的用HTML或XHTML编写的网页。这对设计师来说算是一个福气，终于不用再受XHTML严苛语法的限制了。

被删去的元素

当然，这些元素是相对于HTML 4而言的，但是也可以看得出HTML 5并不是一个单纯的向HTML 4的倒退，它仍然秉承了XHTML的一些重要精神，比如纯粹的界面表现元素应该抛弃，而采用CSS等。

以下元素“因为是纯粹的界面表选元素，应该用CSS来代替（because their effect is purely presentational and therefore better handled by CSS）”，所以抛弃：

basefont / big / center / font / s / strike / tt / u

以下元素“因为对可用性与可访问性不利（because their usage affected usability and accessibility for the end user in a negative way）”，所以抛弃：

frame / frameset / noframes

以下元素“因为不怎么经常使用、引起混淆或是被其他元素代替（because they have not been used often, created confusion or can be handled by other elements）”，所以抛弃：

acronym / applet / isindex / dir

这里我要说明一下的是：

  • acronym被推荐由abbr代替。但貌似在IE下，abbr反而不如acronym好用。详见http://www.mikkolee.com/3里的HTML测试文档。
  • applet改用object。这个标签早就改抛弃了。不过当年我学HTML的时候每一本书都会提到这个applet，那时候大家都对java applet充满了憧憬，而如今却黯然退出历史舞台，还是挺感慨的。
  • isindex 和 dir。这里两个就不讲了,HTML 3的时候就不推荐了。
更多新元素

HTML 5推出了很多新元素，我这里就不罗列了。请参看
http://www.ibm.com/developerworks/cn/xml/x-html5/。
如果你对HTML 5有更多兴趣，这篇文章底部还罗列了一些相关文章，也可以看看。

本文地址 | 给点评论吧[2]

大家都对vertical-align的各说各话

分类: 网页标准 | 时间: 2008-6-15 11:47 pm | Tags: , ,
15
June
2008

最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。

vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下：

p {
    font-size: 18px;
    line-height: 36px;
    font-family: Tahoma, sans-serif;
}
img {
    vertical-align: bottom ;
}

然后大家看一看这段CSS在各个浏览器中的效果（图片是我故意做成那个样子，为了可以看清楚相对位置）：

呃，这个结果其实很让人匪夷所思，一般我会认为Firefox会比IE解释得更正确，但是看过Opera之后发现它和IE是一样的，而Safari/Win是站在Firefox那边。说实话，我不知道这是怎么回事。

仔细学习了《CSS权威指南（第二版）》，甚至还去查阅了W3C，然后自己做出一个关于vertical-align的图：

按照W3C的定义，当内联元素的vertical-align设置为：

  • baseline, top, bottom的时候，都是该元素的baseline（或middle, top, bottom）对其周围元素的相同位置，如图片的top和周围文字的top对齐。
  • text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。
  • 长度（%, em, ex)的时候，是基于baseline往上移动，所以正数往上，负数往下。
  • middle的时候，是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。

但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。

最后给大家一个测试页面，可以方面的看看各个浏览器对vertical-align不同值的解释结果。

http://www.mikkolee.com/weblab/001_vertical/
本文地址 | 给点评论吧[2]

由吊扇的图案联想到的两点

分类: 用户体验 | 时间: 2008-6-11 10:31 pm | Tags: , ,
11
June
2008

“吊扇”这个东西现在也渐渐少看到了。我前几天望着天花板发呆的时候忽然注意到吊扇上的一个设计。先拍下来给大家看看（手机拍的，效果不好，将就看吧～）：
吊扇

注意中间那个亮亮的螺旋图案。是不是经常在各种吊扇上看到？所以为什么都用这个螺旋的图案放在吊扇的中间呢？

首先，吊扇是要转的，如果放一朵花在中间，转起来就看不到了。所以第一个结论是：装饰图案一定要在产品使用的时候也能很好的表现。有一个很常见的例子便是笔记本外壳的LOGO。当你把你的笔记本合上，从正面看，LOGO一定是倒过来的，因为笔记本外壳上的LOGO在更多的时候是在你立起盖子使用时展示给你对面的人看的。我花了很大力气在网上找到一个古老的Acer机型，它的LOGO很小，在合上的时候看起来是正的：

设想你在做presentation的时候，观众看到的你的笔记本LOGO一直是倒着的，是不是有点小小的滑稽？

回到吊扇，其实如果是同心圆的话，也可以保证转的时候图案不会看不清，但同心圆会一直不变，或许这样会觉得缺乏动感。而螺旋有个好处就是，它看上去是往外（或往内）扩散，而不是转动。所以无论电扇转动多块，它变化的速度都足以让我们看清楚。可能这点对于吊扇有点太多余（我们可以通过扇叶转动的声音来判断电扇的速度），但是扩展的想一下，其实这个设计很妙，用一定的斜率可以让图案变化的速度低于载体移动的速度，或是改变图案运动的方向。这在一些特殊的地方会可以有很好的应用。比如，呃，好吧，随便设想有一个金属的棍子，它会快速的转动（可能是某种机械里的轴承），我们需要知道它转动的速度，那就可以在它的表面设计出如下的花纹：

这样通过有斜度的花纹就可以降低视觉上移动的速度，从而得到关于转动速度的反馈。

本文地址 | 给点评论吧[1]

HTML测试文档

分类: 网页标准 | 时间: 2008-6-10 11:10 pm | Tags: ,
10
June
2008

这是去年在复习HTML标签的时候顺便制作的一个文档，里面包含了(几乎)所有的HTML标签。一方面是作为一个归纳，可以通过这个看到哪些其实可以用但是被我们忽略掉的标签，另一方面也是用来测试一些对HTML定义默认样式的样式表，可以把你自己定义的默认样式表放进去测试一下，看看是不是所有的HTML标签都定义到了。

当前版本号是1.2。全部代码在下面的文字框内。也可以点此处下载该htm文件。


提示：您可以修改代码之后再运行

P.S. 用来测试了一下著名的YUI里的reset.css，有一点点小问题。哈~

本文地址 | 给点评论吧[3]


小麦的自习教室 采用WordPress v2.5.1. Copyright @ 2005-2008 mikkolee.com. All Rights Reserved. 沪ICP备08021547号