CSS 技巧tips1

1. 给页面的body上指定class或id，这样可以在一个共享css中为特定页面指定特别样式。

评论：这适用于样式较少的情况，可以把整个站点的样式集中于一个样式表。例如只有一两个页面有一两条特殊规则，就不需要使用多一个单独样式表。当然，样式多的时候，还是应分成若干个样式表，根据情况在页面中import所需样式表。


2. CSS签名，如body id="www-sitename-com"，这样允许用户在用户样式表中为你的站点增加（或覆盖）样式。

评论：这个技巧很有意思，不过用户样式表很少被利用。为特定站点写特定样式，用user script之类的方法会更灵活。所以虽然初看时眼前一亮，但总的考虑下来，实用性不是很大。但是这给我一个启发，其实用用户样式表，加上IE7之类的库，就可以定制浏览器。


记录IE的bug：相对定位元素内若向右下进行绝对定位，需要设定相对定位元素的高宽。

模拟fixed的一个办法是使用脚本改变元素的绝对定位坐标，但是通常会导致抖动。实际上有两个小技巧可以模拟出不抖动的fixed。一个是使用css expression配合background-attachment:fixed。另一个（偶自行发现的）方法是使用ie的standard mode，然后html元素overflow:hidden，而body元素overflow:auto，这样body上绝对定位的元素在外层没有定位元素的情况下，会始终相对于html元素定位，从而达到和fixed定位一样的效果。这一方法是我在试图解决standard mode下scrollbar抢夺焦点的Bug（IE7似乎仍有这个bug）时偶然发现的。

关于containing block如何包围float元素（似乎有很多人以为这是FF的bug），需要额外的空元素来clear。为了避免引入无意义的标签，使用::after是个好方法，类似的，也许也可以用:last-child伪类，不过这两种方法无法用在IE上。但是IE可以用Holly hack，实际上就是让containing block获得hasLayout。

1. 固定宽度圆角框

实现：在外层元素（容器）上设定背景色和底部圆角图，在标题（内部第一个元素）上设定顶部圆角图。

限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

2. 固定宽度圆角框的变形

实现：在外层元素（容器）上设定纵向重复（repeat-y）的背景图，在内部第一个元素上设定顶部圆角图，在内部最后一个元素上设定底部圆角图。

限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内层至少有两个元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

注：固定背景色的限制可以通过增加位移来解决，例如：

代码

<div class="box">
    <div class="top">Heading</div>
    <div>Content...</div>
    <div class="bottom">Content...</div>
</div>

代码

.box {
    background:url(border-middle.png) repeat-y; width:120px;
    margin:12px 0;
}
.box .top {
    background:url(border-top.png) top no-repeat;
    margin:0;
    position:relative; top:-12px; padding-top:12px; margin-bottom:-12px;
}
.box .bottom {
    background:url(border-bottom.png) bottom no-repeat;
    margin:0;
    position:relative; top:12px; padding-bottom:12px; margin-top:-12px;
}

注意，由于使用了margin，需要注意垂直合并的情况，增加了样式的复杂度。


3. sliding doors 技巧
实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角图。
限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。

本质上，sliding doors技巧和前两个方式是一致的，都是通过多层block元素上的背景重叠来模拟总体效果。区别就是前面只需要两层——多数情况下，语义结构可以有两层元素，而几乎不可能出现语义结构需要四层元素的情况。

本书作者对此的看法是，如果只要少数地方，那忍受一下无意义标签也可以，但是如果有很多地方，那就需要考虑其方案。

我对此的看法有些不同。实际上，书中示例在容器宽度高度增大到超出图片宽高时，就会出现空白。如果要适应任意大小的容器，要么增大图片尺寸到一个很大的数值，要么增加更多层次，使用多达九层元素（相当于切分成井字形的九份）！

因此同样是忍受无语义元素，我宁可使用table构造一个井字布局来模拟border，这个方式比多层嵌套无语义div更清晰。

当然，最好的方案是使用CSS3的border-image和border-radius。在没有CSS3支持前，则是使用脚本自动插入辅助元素来实现。书中给出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。


1. 简单的CSS阴影和Clagnut阴影

实现：在外层wrapper上将阴影图设为背景。元素本身通过margin或者相对定位做向左上方的偏移（以展现右下方向的阴影）。

限制：
* 阴影元素需要一个外层的wrapper元素。

2. 模糊阴影

实现：添加两层container，分别应用阴影图像和蒙板图像。

限制：
* 需要两个外层元素
* 外层背景色是固定的（与蒙板颜色一致）。洋葱皮阴影无此问题。

注意，蒙板需要png的alpha透明特性，但是IE6不支持。书中给出了使用AlphaImageLoader的filter方式，但是问题在于，在IE中与其这样，不如直接在元素上使用DropShadow或Shadow的filter。

3. 洋葱皮阴影

实现：添加两层container，分别应用两个阴影末尾图。

限制：
* 需要两个外层元素
* 外层背景色是固定的，但稍作改进可以避免这一限制。

总的来说，上述的阴影实现，都不是很好的方法，最好还是借助脚本。

最后是图像替换。

关于图像替换，除了本书作者所说的screen reader问题外，另一个问题是，在许多浏览器上，图像不会跟文本一起缩放。所以我的观点是尽量避免使用图像替换。本书作者提出的“公司品牌策略要求特定字体”的例子，我认为不足为证。如果真的需要这样强的视觉强制要求，也肯定不以字体为限，最好直接使用flash。

此外，display:none或visibility:hidden（译本有疏漏）会造成screen reader失效，这其实很大一部分是screen reader本身的问题。因为本身CSS可以只针对media=screen指定图像替换样式。但是许多screen reader忽视了CSS规范（多数是基于IE的）。

所以目前最可靠的图像替换法，仍是利用脚本的，如本书中的IFR和sIFR。

另，在XHTML2中，不需要专门的图像替换法。因为所有元素上都支持src属性。如果src指向的资源可用，就会被替换成该资源的内容（如视频、图像等），否则会使用元素内部的内容。

关于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：在已访问链接后加一个打勾的图标，是一个很有意思的设计，可资参考。

关于列表，首先，由于list-style-image的位置各个浏览器实现的不一致，而且缩进使用padding或margin的不一致，所以本书后面的例子几乎完全抛弃了list-style，将padding和margin一律重置为0，然后从头重新定义。

BTW，关于列表缩进应该使用padding或者margin？我倾向于padding。理由另文撰述。

关于导航条，本书的例子有一个问题，就是需要对第一个li元素专设样式。对于支持CSS21的浏览器来说，使用一个first-child伪类即可，但是对于IE，需要额外的一个first类。有一些解决的方法，我之前也讨论过这个话题。

配合页面ID，可以设定页面特定的样式，例如本书中给出的在导航条中突出显示当前页面的例子。这是一个很有意思的技巧，沿着这个思路也可以有很多变化。

关于滑动门tab式导航，见上一篇关于sliding door的总结。幸运的是，在列表导航中，正好有li和a两层元素可供应用sliding door技巧。此外可以做一个简单的位移变形来支持边缘透明的tab。

关于图像映射，开始一段的译文有些歧义。我想作者是在说map和area，然后给出的是用CSS取代map的方法。我并不完全赞同作者关于map是将表现方式与内容混在一起的说法。在5.7远距离翻转的示例代码中，带有hotspot class的空span扮演的角色和area元素有何不同呢？实际上，map元素是有导航的语义的。xhtml2中新增的nl元素，就可以认为是map和ul的合体，在xhtml2中usemap所指向的也从map元素变成了nl元素。实际上，img等元素上的usemap属性提供了一种将对象（图像）与导航连接在一起的语义。

一个map的例子：

代码

<img id="fu-image" src="fu.gif" alt="Bei Jing Huan Ying Ni" usemap="#fu-map" />
<map name="fu-map">
    <area href="#beibei" alt="BeiBei" shape="circle" coords="25,43,20" />
    <area href="#jingjing" alt="JingJing" shape="circle" coords="62,46,18" />
    <area href="#huanhuan" alt="HuanHuan" shape="circle" coords="102,36,24" />
    <area href="#yingying" alt="YingYing" shape="circle" coords="142,45,18" />
    <area href="#nini" alt="NiNi" shape="circle" coords="178,45,18" />
</map>

 

又一个更语义化的例子（注：FF和Opera支持object上usemap，IE和Safari不支持object上usemap）：

代码

<object id="fu-nav" data="fu1.gif" type="image/gif" usemap="#fu-nav-map">
    <map name="fu-nav-map">
        <h2>Bei Jing Huan Ying Ni</h2>
        <ul>
            <li><a href="#beibei" tabindex="1" shape="circle" coords="25,43,20">BeiBei</a></li>
            <li><a href="#jingjing" tabindex="2" shape="circle" coords="62,46,18">JingJing</a></li>
            <li><a href="#huanhuan" tabindex="3" shape="circle" coords="102,36,24">HuanHuan</a></li>
            <li><a href="#yingying" tabindex="4" shape="circle" coords="142,45,18">YingYing</a></li>
            <li><a href="#nini" tabindex="5" shape="circle" coords="178,45,18">NiNi</a></li>
        </ul>
    </map>
</object>

使用CSS做的图像映射，实际上与第二个例子相当接近，区别在于CSS无法作出圆形和多边形的点击区域。
当然作者的例子所展示的CSS设计的整个过程是很棒的。