Roc's blog - (x)HTML&CSS

Firefox 3.5升级中6点值得注意的地方

a@b.com (rocchow) — Thu, 02 Jul 2009 11:23:01 +0800

今天刚刚把Firefox升级到3.5，配合着Win 7 RC的确让人神清气爽。看到Estelle很快写了点关于Firefox升级的东西，实在太开心了，省的去翻官方的通告了。快速翻了一遍，如下：

Firefox 3.5对于CSS 3选择器的支持

Firefox 3.5在6月的最后一天正式发布了。正如我在几个月之前用过的Beta版本一样，FF3.5全面支持CSS3选择器。点这里查看CSS3浏览器支持表。这个更新实在太伟大了，让我们不禁欢欣鼓舞，只有一点例外：这个消息意味着我之前在写的谷歌Chrome的hack同样将影响FF3.5。

我将CSS3浏览器支持表同步更新到FF3.5。放眼望去，FF3.5那一列被美丽的绿色背景填满，因为它全面支持CSS2.1和CSS3。

Firefox 3.5的CSS和HTML特性

1、@font-face

@font-face声明（与其说属性，它看起来更像是下载）允许你去定义一个字体，并且下载该字体，之后在整个站点页面范围内，你可以将其插入其他的font-family属性中去引用这个字体。

@font-face {  font-family: ;  src:  [,]*;  [font-weight: ];  [font-style: 
只有Google Chrome和Safari 3.1浏览器将段落显示为灰色（原文是red）。思路如下：
    页面只有一个body元素
    只有两个浏览器支持:nth-of-type() 伪类
    body:nth-of-type(1)只会匹配第一个，也是唯一个body元素。
可以使用body:nth-of-type(1)作为前缀，在之后使用更多的选择器去定义body下的子元素。

样式表贴图定位（CSS Sprites）：图像切片的死亡之吻

a@b.com (rocchow) — Thu, 04 Sep 2008 11:11:35 +0800

《CSS Sprites: Image Slicing’s Kiss of Death》是一篇旧文，于2004年3月5日发表于alistapart的第173期，作者是大名鼎鼎的CSS禅意花园的园主Dave Shea。之所以把它翻出来，是因为最近在看的关于页面优化的一些文章，都不约而同地提到了这项技术，温故知新~

有趣的是，关于CSS Sprites这个名称的中文翻译一直没有定论，如果依照词典直译成样式表精灵，恐怕没有几个人会同意这样的叫法。就好像有人把其后的image slicing直译成图像限制一样，会让人摸不着头脑~

和直译不同，也有人把它意译为CSS图像拼合，的确，整个css sprites的图像制作过程就是一种图像拼合，将页面所需的修饰性图像全部打包在一张图像中。但是对于如何用css层面上的positio定位来使用这个拼合的图像，这个名称就显得名不副实了。我倒是认为，这种css控制背景图像位置的技术和3D软件中的UVW贴图有神似的地方，暂且就叫它样式表贴图定位吧。说到底，叫什么不重要，了解它才是王道……

---------------------------------------- 开始正文的分割线 ----------------------------------------

原文如下：

回到电视游戏盛行的年代（我们这里讲的是8位游戏机的辉煌时期），那时的图像非常的简单，位图制成的二维形象和背景场景独立分开，这一点很像现在的像素艺术。成百上千的小图像成为构建整个游戏的视觉基石。

当游戏慢慢变得复杂，技术的提升使得管理众多的小图片成为可能，游戏画面变得流畅自然起来。其中一点就是，贴图定位技术的引入，在代码控制下抽出所需的图片，这些图片在主图层中被映射于各自位置的之上，并有选择性地将其呈现于屏幕上。

这和Web有什么关系？

三十年河东三十年河西，虽然3D游戏的兴起让贴图技术日落西山，但同时兴起的2D手机游戏让贴图技术有了焕发新生的可能。现在，通过一点点的数学计算以及完备的css技术，我们将这个基本概念应用于整个web设计之中。

确切地说，我们将用CSS方案取代陈旧的图像切片（加上JavaScript）技术。更进一步的阐述是：建立一种网格图像，采用一个方法将网格中的每一个独立小单元抽出。我们可以在这个主图层文件中放置按钮、导航以及一切元素，连同它们“初始”和“之后”的链接状态。

样式表贴图定位如何运作？

在css应用上我们只需要一点创造性思维，这就是全部了。

让我们从主图层开始。将其分成四等分矩形，在主图层图像中你将看到“初始”图像在上，“之后”的悬停状态在其下。现在4个链接之间并没有清晰的界线，现在想象一下每一块文字对应一个链接。（为了简单起见，在其后的文章中，我们依然把链接图像叫做“初始”图像，悬停状态下叫“之后”。对诸如:active,:focus以及:visited的链接状态，这里不展开讨论。）

熟悉Petr Stanicek（Pixy）快速翻转图像方法的朋友也许已经猜出我们将要做什么。感谢Pixy的这个样例，我们接下来的讨论都是基于它的基础功能。但是别高兴的太早了~

先来看HTML部分。每一个优秀的css技巧都力图在最简洁的代码块上添加视觉效果。本方法也不例外。

   1: <ul id="skyline">

   2:     <li id="panel1b"><a href="#1">a>li>

   3:     <li id="panel2b"><a href="#2">a>li>

   4:     <li id="panel3b"><a href="#3">a>li>

   5:     <li id="panel4b"><a href="#4">a>li>

   6: ul>

以上的代码将是我们这个例子的基础。简单的标记将使得代码在老旧的、对css支持差的浏览器中也得以运行，这也是行业中的一个良好趋势。对于我们力争要达到的目的，这是个很不错的主意。（我们在这里忽略了链接中的文字，你可以使用你所钟爱的图像替代法来隐藏最后添加的文字。）

CSS的运用

有了这些编写好的块元素，我们可以开始着手css。在开始之前有一点需要注意——由于IE的一个bug，我们需要让“之后”图像紧贴在“初始”图像之后，而不是一张取代另一张的做法。尽管当我们把它们排成一行时，并没有什么真正的视觉差别，但这样会避免一个我们不想见到的加载“闪烁（flicker）”。

   1:  #skyline {

   2:      width: 400px; height: 200px;

   3:      background: url(test-3.jpg);

   4:      margin: 10px auto; padding: 0;

   5:      position: relative;}

   6:    #skyline li {

   7:      margin: 0; padding: 0; list-style: none;

   8:      position: absolute; top: 0;}

   9:    #skyline li, #skyline a {

  10:      height: 200px; display: block;}

和想象中不同，我们没有把“初始”图像指定给这些链接，而是用

css的其他部分，分别给#skyline和列表项定义了尺寸、范围，给列表项定位，以及去除了不想要看到的默认列表样式中的圆点。

我们将链接作为一个透明的空层，通过父层级

来给它们定位。如果我们跳过
，直接定位这些链接元素，在老的浏览器上将会出现错误，所以我们不能这么做。
定位链接
元素被绝对定位，为什么它们没有出现在浏览器窗口的顶端？那是因为对于绝对定位元素有一个奇异（quirky），但却很使用的特性（roc：我不觉得有什么奇异的地方），绝对定位元素会以离它们最近的父级定位元素为基点，而不是浏览器窗口这个根元素。因为我们给#skyline定义了position: relative;属性，所以我们可以将
元素绝对定位于#skyline的左上角。
```
   1:  #panel1b {left: 0; width: 95px;}
```
```
   2:  #panel2b {left: 96px; width: 75px;}
```
```
   3:  #panel3b {left: 172px; width: 110px;}
```
```
   4:  #panel4b {left: 283px; width: 117px;}
```
因此#panel1不再独占水平位置，#panel2b基于#skyline水平向左96px，其他的也类似。我们将链接定义为display: block;使其高度和
相同，这样我们就可以填充这些
了。这正是我们想要得到的效果。
现在我们有了一个链接效果的基础图片，但悬停状态还没有设置。查看样例，加上边框也许可以看得更清楚些。
悬停
在过去，为悬停状态翻转一张新图片我们需要使用一些JavaScript。现在我们将所有的集中在一张图片上，我们需要一种有选择的抽出各种状态的方法。
如果我们在:hover状态下应用整张贴图，不附加其他值，我们只能看到左上角——这不是我们想要得到的，虽然我们的确希望依照链接的范围裁剪。我们需要以某种方式移动这个贴图的位置。
```
   1:  #panel1b a:hover {
```
```
   2:      background: transparent url(test-3.jpg)
```
```
   3:      0 -200px no-repeat;}
```
```
   4:  #panel2b a:hover {
```
```
   5:      background: transparent url(test-3.jpg)
```
```
   6:      -96px -200px no-repeat;}
```
```
   7:  #panel3b a:hover {
```
```
   8:      background: transparent url(test-3.jpg)
```
```
   9:      -172px -200px no-repeat;}
```
```
  10:  #panel4b a:hover {
```
```
  11:      background: transparent url(test-3.jpg)
```
```
  12:      -283px -200px no-repeat;}
```
这些像素位置值要如何放置？我来解释一下：第一个值用来设置水平位置，第二个用来设置垂直位置。
每一个垂直位置都是相同的；由于整张贴图的高度是400px，初始和悬停各占据上下一半，所以我们将很容易的计算出高度值。想要将整个背景贴图向上移动200px，我们需要给一个数量相同的负值。以这个链接的顶端或者说0高度作为原点，背景图将在这个原点200px之上，也就相当于说，我们将原点设在了-200px上。
同样的，如果每一个链接的左边界都是0，我们需依据
的宽度，给背景贴图一个偏移值，就像前面我们做过的那样。所以，第一个链接不需要偏移，因为它就是水平位置的原点。第二个链接需要的偏移值是第一个链接的宽度，第三个链接的偏移值是前两个宽度相加，而最后一个链接的偏移值则是之前三个宽度的综合。
这个过程解析起来有点绕，不是吗？但如果亲手去调试一下，你将很快理解它们的工作原理，一旦你对此熟悉起来，它们看上去就不那么难搞了。
看看我们得到了什么，一个单一图片翻转转化成为了一个无序列表。
按钮
在上面的例子里，并不是出于特别的原因，我们将链接彼此相邻。图像地图也许在有些地方比较合适，但把它们分开作为各自独立的按钮又会如何？我们可以给其添加边框和边距，
实际上，积木已经搭好了。我们其实不比对现有的代码大动干戈；最大的变动就是需要创建一个新的背景图片，而不是像上个例子中让链接彼此相连。由于我们不能给
- 代替，并且像上面讨论过的那样设置悬停状态下的偏移值。
  使用一张合适的图片以及给
- 之间添加些许边距，我们就得到了这些按钮。
  在这个例子里，我们添加了1px的边框，链接的最终宽度增加，这会影响到偏移值；我们需要增加2px的偏移值以抵消这一影响。
  不规则形状
  到目前为止我们都把精力放在不重叠的矩形形状上。如何将大量的复杂图像切片处理的就像是用Fireworks和ImageReady输出的那样简单呢？别紧张，我们同样可以做到。
  开始的部分，我们采用第一个例子中同样的方法。给
  - 定位；目的就是让这张图片上每一个图形被包裹住。
    因为我们相对于

从语义化谈网站导航菜单的分割线和水平居中问题

a@b.com (rocchow) — Fri, 08 Aug 2008 18:22:11 +0800

写这篇啰嗦的文章，缘由来自于Jorux Notebook的《什么是Semantics?》文章。

实际上，从《网站重构》一书开始在国内流行之后，Zeldman提出的语义化标记就已经在一定程度上流传开来。在抛弃table布局页面之后大家突然发现，原来这还不够，随意地使用

或者

来进行布局实际上和table布局一样的糟糕。

Jorux的例子（如下）：

我是老大 | 我是不好意思说 | 老三 | 老四在这里 | 老幺

Jorux指出，在这种极为普遍的导航样式中（通常是用于网站底部的信息导航，100个网站里有90个采用这样的模式），我们应该使用无序列表，而不是下面这种:

   1:  <p>

   2:  <a href=”home.html”>首页a> |

   3:  <a href=”about.html”>关于a> |

   4:  <a href=”blog.html”>博客a> |

   5:  <a href=”message.html”>留言a> |

   6:  <a href=”album.html”>相册a>

   7:  p>

甚至是使用了

   1:  <ul>

   2:  <li><a href=”home.html”>首页a>li>

   3:  <li>|li>

   4:  <li><a href=”about.html”>关于a>li>

   5:  <li>|li>

   6:  <li><a href=”blog.html”>博客a>li>

   7:  <li>|li>

   8:  <li><a href=”message.html”>留言a>li>

   9:  <li>|li>

  10:  <li><a href=”album.html”>相册a>li>

  11:  ul>

遗憾的是，内容与样式分离web标准化建设的推进道路总是充满了各种各样的阻碍。即使是新浪和淘宝在它们的页面底部也存在着上述的情况。

先来看新浪的截图：

代码（简略了内容）：

   1:  <div style="padding-bottom:6px;">

   2:      <a href="">新浪简介a> ┊

   3:      <a href="">About Sinaa> ┊

   4:      <a href="">广告服务a> ┊

   5:      <a href="">联系我们a> ┊

   6:      <a href="">诚聘英才a>

   7:  div>

为什么要这么做，有过网页制作经验的朋友大概会了解。网站底部的导航通常都是以比较简单的文本形式出现，居中，再附加一些修饰——大部分都是“|”和“·”或者“—”。html部分采用新浪的做法，节省了编写css的时间，最重要的是让一切水平居中显示将是非常简单的事情。只需要将

的text-align设置为center就万事大吉。

这里需要讨论的是，到底使用什么标记才算是语义化？

我们没有教科书，任何一本某某权威指南不会写着：你应该使用

，而不是
和
来制作导航菜单。也就是说，我认为如果考虑到实际项目的操作，使用前者或后者都不是一个严重到会出现违背XHTML准则的问题。
我们来看淘宝的底部：
在我看到，如果按照zeldman的思路，应该这样去写：
```
   1:  <dl>
```
```
   2:      <dt>全球阿里巴巴 - 阿里巴巴网络dt>
```
```
   3:      <dd>
```
```
   4:          <ul>
```
```
   5:              <li>中国站li>
```
```
   6:              <li>国际站li>
```
```
   7:              ......
```
```
   8:          ul>
```
```
   9:      dd>
```
```
  10:  dl>
```
但实际上，淘宝的代码是这样：
```
   1:  <div class="ali-group" style="width:680px;margin:5px auto;">
```
```
   2:  全球阿里巴巴 - 阿里巴巴网络：
```
```
   3:      <a href="">中国站a>
```
```
   4:      <a href="">国际站a>
```
```
   5:      <a href="">日文站a> | 
```
```
   6:      <a href="">淘宝站a> | 
```
```
   7:      <a href="">支付宝a> | 
```
```
   8:      ......
```
```
   9:  div>
```
为什么一个如此提倡标准化的UED小组所编写的淘宝代码中也有和Jorux说法相违背，不严格按照语义化标记来操作呢？
因为，这样的水平居中和添加“|”不会那么烦人。
烦人的分割线
不要小看这个“|”，加入这么一个小小的修饰线条，看似简单，实际上还是比较头痛的。
首先我们知道，这个竖线是分割线，是把一个个链接从视觉上分开的一种手段，有多种方式去实现这一个效果：
1、直接插入“|”实体，但这和用空的table来撑开空白一样，是不符合内容和样式分离准则。
2、使用border-right来给每一个链接加上一个1px宽的边框。缺点是这个边框线条的高度定义起来比较讨厌，作为行内元素的a，无法应用到上下内边距来控制高度，勉强使用行高line-height只会让你在实际应用中漏洞百出。
3、使用background来给每一个链接加上一个竖线的图片背景，这种方式在视觉效果上应用灵活，但缺点是会多制作一张图片（尽管你可以CSS Sprites或者你认为一条竖线的图片大小可以忽略不计），同样高度无法定义。
4、使用:after这样的伪类元素，如a:after { content: "|"; }。可以再添加font-size来稍稍控制高度。尽管这样的一种做法被一些css玩家所推崇，毕竟了解的人少，使它看上去比较的高深和复杂。实际上它的缺点也最多。首先，:after在版本8以下的IE中通通免谈，这就意味着大部分浏览者无法看到这样的效果。其次，看上去这一条“|”是由css来控制的样式，实际上它在html中实际生成了内容，本质上和直接在之后插入一个“|”没有区别。
综上所述，我们理应抛弃第一种做法，采用2、3、4中的一种来显示这个分割线效果。然而接踵而至的问题是，不管你用了哪种方法，你都要考虑如何去除最后一个“|”分割线。让导航看上是这样：
我是老大 | 我是不好意思说 | 老三 | 老四在这里 | 老幺
而不是这样：
我是老大 | 我是不好意思说 | 老三 | 老四在这里 | 老幺 |
常用的做法是给div中的最后一个a，或者ul中的最后一个li（或者都是第一个a和li，这取决与你css中的左右位置）添加一个id或者class，例如：
```
   1:  <ul id="menu">
   2:      ......    
   3:      <li><a href="#">王老五a>li>
   4:      <li class="last"><a href="#">老幺a>li>
   5:  ul>
```
然后在css添加对这个.last的单独定义，去除它的边框或者背景或者:after生成的content内容。
如此的繁琐，是不是已经开始头大了？
水平居中
从分割线的问题，我们往下讨论导航的水平居中问题。
淘宝的另一个底部导航采用了不让人头大的选择：
在这个例子中，HTMl如下：
```
   1:  <ul class="foot-nav" style="width:690px;_width:695px;">
```
```
   2:      <li><a href="">关于淘宝a>li>
```
```
   3:      <li><a href="">广告服务a>li>
```
```
   4:      <li><a href="">合作伙伴a>li>
```
```
   5:      <li><a href="">帮助中心a>li>
```
```
   6:      <li><a href="">诚征英才a>li>
```
```
   7:      <li><a href="">联系我们a>li>
```
```
   8:      <li><a href="">网站地图a>li>
```
```
   9:      <li><a href="">热门品牌a>li>
```
```
  10:  ul>
```
这里的采用了标准的写法，没有分割线，没有额外的id或class，没有上面讨论的烦人的各种问题。
然而这种写法意味着，如果将li的display设置block，text-align:center无法轻松的将这个导航水平放置在页面的正中，除非你给ul定义了一个宽度，在上面的代码中淘宝也的确是这样去做的。
如果，导航菜单中的项目数量不能够确定，整体的宽度势必也要成为变量——一个未知宽度。不断地去修改这个width，以确保margin: 0 auto;可以让这个导航水平居中无疑将让你的工作变得琐碎和困难。
未知宽度的水平居中
最简单的方法，就是让每一个li元素不要以block的形式float:left，以inline的方式让它们一字排开，给ul一个text-align:center就可以搞定这一切。
我做了这样一个例子，demo1。为了图省事，我没有做图，采用背景图片的方式显示分割线，而是使用了:after生成content的方法。
在css中的最后，我添加这样两行：
```
   1:  #menu li:before { content: "|"; padding-right: 10px; }
```
```
   2:  #menu li:first-child:before { content: ""; }
```
这样，在不支持:after的浏览器中，导航以最质朴的方式展现，在IE8和FF这样的浏览器中，分割线将显示出来，最后一个li的分割线将被删除。
上面的方法，在大部分时间还是比较好用的，但如果需要给导航菜单添加更多的效果控制，例如给每一个li添加一个按钮似的背景，我们就必须让li成为块级元素。这个时候，text-align:center就无效了。
好在Stu Nicholls给出了一个解决方案——Centering Float Left Menus。
我做了另一个例子，demo2。
在这样的基础之上，无论你或删或增导航菜单的项目数量，无论你是想给它添加简单背景色，还是添加复杂的圆角框，你都可以从容应对了。

刘翔、罗伯斯谁更快？

a@b.com (rocchow) — Mon, 21 Jul 2008 00:29:26 +0800

首先，我要向看了标题进来的朋友道歉，这不是一篇讨论当今田径赛场上两位悍将的体育文章。事实上，我要讨论的是一个关于css十六进制颜色渲染效率问题。

这个问题的由头来自52css的《书写高效的CSS - 漫谈CSS的渲染效率》，文章写得不错，网上转载无数，其中关于背景图片宽度不宜过小和避免使用IE滤镜，之前倒是了解，其他的都是些新观点，很是受用。只是，对于该文章的第一点有些疑问。摘录如下：

1、十六进制的颜色值对位数与大小写
　　编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
　　* 不赞成 - color:#f3a;
　　* 建议用 - color:#FF33AA;

我们一直倡导的css缩写，难道是在冒风险么？就像作者说的，找不到确实数据，很难证实。这里有我做的两个例子test1.html和test2.html，都是一个含有20个div的页面，不同的是前者用缩写原则定义css背景，后者反之，使用一个简单的js判断页面加载速度。你甚至都不需要打开这两个页面，都可以猜出结果，两者16ms的加载速度毫无区别(本地文件加载时间，实际网络加载时间在78ms~140ms之间)。也许页面的确太小、也许用于渲染的背景css太少，但实际应用中，在一个页面中定义20个层的背景色就算不是最大值，也应该是均值了。

在毫秒级的层面上，两者没有分出胜负，但是在文件大小使用缩写的test1的字节数是2027，而后者则是2085。大小上的输赢倒是显而易见了。

回到标题上，就像是罗伯斯的12秒87和刘翔的12秒88，凭肉眼我们难以分辨他们之间的差距，对于十六进制的颜色值到底是缩写快还是大写6位数快，除非了是极致的性能狂人，否则把它奉为您工作中的指南是不恰当的。

在这个小小细节上，我认为倒是可以顺其自然。使用DW或者其他可视化网页编辑软件的朋友都知道，使用代码提示，在css中输入了诸如color:、background:之后，可以在弹出的256色标准色表中直观选择你想要的颜色，dw cs4上关于这里的一处细微改进，也许表达了Adobe Dreamweaver开发团队对于十六进制颜色渲染效率的一个态度：

Roc's blog - (x)HTML&CSS

Firefox 3.5升级中6点值得注意的地方

Firefox 3.5对于CSS 3选择器的支持

Firefox 3.5的CSS和HTML特性

样式表贴图定位（CSS Sprites）：图像切片的死亡之吻

这和Web有什么关系？

样式表贴图定位如何运作？

CSS的运用

定位链接

悬停

按钮

不规则形状

优缺点

从语义化谈网站导航菜单的分割线和水平居中问题

烦人的分割线

水平居中

未知宽度的水平居中

刘翔、罗伯斯谁更快？