2007-08-28

《精通CSS》读书笔记（五）

续上篇。

第4章

本章讨论了链接上的样式。

关于A上伪类的顺序，应按照LoVeHAte（Link Visited Hover Active）。

此外，关于链接伪类补充如下：

根据CSS21，link和visited伪类是互斥的，也就是*:link:visited不可能选择到任何元素。而hover、active与新增的focus伪类，可以共存于一个元素上。因此可以有以下的样式：

a:link:hover { color:red; text-decoration:underline }
a:visited:hover { color:maroon }
a:link { color:blue; text-decoration:none; }
a:visited { color:navy; text-decoration:none; }
a:active { background:green; color:white; }
a:visited:hover:active { text-decoration:line-through }

另，hover、active等动态伪类不限于A，也可以在其他某些元素上。但是IE6不支持。

active伪类还有点问题，因为早期规范定义不清，各个浏览器实现稍有不同。其中IE最离谱，实际效果近似一个只在a上有效的:focus伪类。实际上，IE DOM中的名为onactivate/ondeactivate的事件，也说明了IE是把active看成是一种特殊的focus的。

关于给外部链接加上图标，以及区分下载类型，是属性选择器的极好应用，只是IE6不支持。

Pixy方法，即将若干图合并于一个图片的方法，减少了http请求的数量，也避免了hover切换时的延迟。许多其他trick可以使用pixy方法，例如上一篇里提到的sliding door等。

本书还指出了Pixy方法受到IE的cache bug影响会闪烁。但是书中并没有说清楚这个问题。但其实该bug是有条件的，即IE的cache设置为Every visit to the page，而不是默认的Automatically。基本上，只有开发者才会把cache设置为每次访问检查更新，所以这个bug其实不会影响真正的用户（根据我在winxpsp2的ie6下测试，虽然可能仍然调用了一次网络存取的api，但是并没有发生实际的请求，症状就是鼠标有极短时间的抖动，但是图像不会闪烁）。此外有人发现了一个未公开的方法来让IE对背景图进行缓存：
document.execCommand("BackgroundImageCache",false,true)
使用这种方法甚至避免了api调用，貌似是直接缓存在IE内存中。
详见：http://www.mister-pixel.com/。
BTW，我计划还要对这种方法做一些测试，看看是否能解决vml缓存问题。

最后关于visited：在已访问链接后加一个打勾的图标，是一个很有意思的设计，可资参考。

待续...
评论
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

hax
搜索本博客
存档
最新评论