Latest from ghostzhang: Ghostzhang

有趣的PNG优化 ... 1 replies

ghost@vip.qq.com (Ghostzhang) — 2010-08-28T05:05:32Z

译文地址：http://www.csspeople.cn/archives/86
原文地址：http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques

引言

做为一名网页设计师你或许已经对 png 格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替 gif 图像格式。但是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。

每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够针对不同图像格式进行相应处理，以得到高品质的图像和高压缩率，这是图像优化的关键所在。

png 被称为开源的 gif 图像格式，它们之间有很多相同的地方（如：索引色），但 png 在每一个方面都要强于 gif。它介绍了一些非常酷的功能，图像封装和压缩，但对网页设计师来说最重要的还是线性过滤（也称为“三角过滤”）。

什么是线性过滤？

这里来介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色）

通过上图你会发现相同的颜色都是在垂直方向上扩展，而不是水平方向。这样的图片如果用 gif 格式将很难获得高压缩率，它只压缩水平方向扩展的颜色（图像尺寸越大，越能说明问题）。让我们看看线性过滤是怎样将这类图像压缩的：

以数字2为标识的每一行都经过了“Up过滤”，“Up过滤”向 png 解码器发送信息：“对于当前的像素，提取上方像素的值，并将其添加到当前值”。图中2-5行垂直方向都拥有相同的值。所以它们的值都是0，如果这样的图片越大那么压缩比率也越大。

在理想情况下，“Sub过滤”能提供更好的结果：

以数字1为标识的每一行都经过了“Sub过滤”，它发送信息给解码器：“当前像素提取左侧像素的值，添加到当前值”。例子中的值全为1，我想你大概也猜到这样的数据肯定能被有效的压缩。

线性过滤是非常重要的概念，尤其是在图片处理时可以针对过滤特点进行处理以便得到更好的过滤效果。有5种过滤器：None（无过滤），Sub（当前值减去左侧像素的值），Up（减去上方像素的值），Average（减去左侧和上方像素的平均值）和Paeth（替换上方，左边或者上方的左边像素值，并重新以Alan Paeth命名）。

通过比较下面的图片，我想大家应该都能明白“线性过滤”的魅力所在。

gif：2568字节

png：372字节
图片类型

png 是一种存储元数据信息的图片类型。如果你是 Photoshop 用户，你应该已经对 png8（索引图像）和 png24（真彩色图像）非常熟悉，如果你是 Fireworks 用户，或许已经知道 png32（真彩色透明图像）。但是 Photoshop 的 png24 格式也能存储真彩色透明图像，其实这些命名都不是官方的，所以在 png 图像格式说明面并不能找到这些概念，为了方便起见，在这次讨论中我们采用Photoshop 的命名方式。

png 可提供5种图片类型：灰度，真彩色，索引色，带alpha通道的灰度，带alpha通道的真彩色。遗憾的是 Photoshop 只能导出3种图像类型：带透明的索引颜色，真彩色，带透明度的真彩色。这就是为什么大家一直认为 Fireworks 是 Png 图像最好处理工具。其实不然，Fireworks 并没有足够的工具来处理导出的 png 图像，它仅仅是在导出时做一些微小的优化工作。

那还有没有更好的 png 压缩工具呢？答案是肯定的。OptiPNG 和 pngcrush 都是非常有效的工具，从本质上来看，这些工具主要做以下优化：

1. 1.选择最合适的图像类型（例如：如果图像中没有太多的颜色，真彩色图像会被转化为索引色图像）
2. 2.选择最合适的过滤方式
3. 3.选择最合适的压缩策略以及选择性的减少颜色深度

所有这些操作都不会影响到图像质量，却能减小 png 图像文件的大小，所以我强烈建议您每次保存 png 图像时都使用这些工具。

下面来介绍几种处理图像的方法，使图片更好的执行“线性过滤”。

1.色调分离

色调分离的优化方法已经广为人知。在 Photoshop 中打开样例图片，点击图层面板中的“

”，并选择色调分离：

选择尽可能小的数值（通常40就够了）并保存图片：

原图：84K

压缩后：53K

优化原理：有效的减少色彩数，合并相似的颜色，创建出色调区域，更好的执行“线性过滤”，得到高压缩率。

这种方法有一定的局限性，尤其是优化的图片与 html 背景融合的情况下须慎用（蓝色为 html 背景）。

2.多余的透明

看看下面的图片：

75K

30K

两张图片都是用 Photoshop 导出的，而且没有经过任何优化。即使对比图中的每个像素，你都不会发现它们之间存在任何区别。但是为什么前者居然是后者的2.5倍大？

在探寻奥秘之前，你必须安装一个“Remove Transparency”的 Photoshop 插件才可以看到隐藏的细节。

在 Photoshop 中打开上面的两张图片，选择 Filer -> Photo Wiz -> Remove Trasparency。现在，你就可以看到保存在图像中的真实像素信息了：

这是怎么回事？其实很简单。带 alpha 通道的真彩色图像每个像素都用了4个字节来表示：RGBA。最后一个是 alpha 通道，控制该像素透明度：值为0则完全透明，255则完全不透明。这意味着每一个像素（任何RGB值）只要 alpha 值设为0就可以完全隐藏。但是这些 RGB 数据仍然存在，而且，它不利于 PNG 编码器对数据流进行有效的封装和编码。因
此，我们必须在导出图像前删除这些隐藏数据（例如上图中填充的黑色）。下面是一个比较便捷的方法：

1.在 Photoshop 中打开上面例子中第一张图片；

2.Ctrl+单击（Mac系统中为？+单击）图层面板中的缩略图，建立选区 -> 单击选择栏目 -> 选中反向。

3.切换到快速蒙版模式，按Q键：

4.我们已经建立了一个半透明图像的蒙版，但我们只需要完全透明的图像。图像 -> 调整 -> 阈值，并将阈值色阶滑到最右端，从而使选区完全透明：

5.退出快速蒙版模式（按Q键），并用黑色填充选区：

6.再次反选（选择 -> 反向），点击图层面板的“

”图标，添加蒙版。

对于上述这些操作我们只须了解即可，因为png二次压缩工具内已经内置了该项操作。
3.透明分离

有时候因为图片中存在一些半透明像素，你不得不保存一个“重量级”的PNG-24文件。如果将此类图像一分为二，一部分是不透明像素，另一部分则为半透明，然后各以适当格式保存。比如你可以用 PNG-24 格式保存半透明像素，而不透明像素则用 PNG-8 甚至 JPEG 格式保存。这样操作下来在实际应用中你将会节省很大的图片流量。看一下实际案例：

PNG24 62K

1.在图层面板中 Ctrl+单击（或？+单击）图像缩略图建立选区：

2.在通道面板中选择“将选区存储为通道”：

3.取消（Ctrl+D 或？+D）选区，选择新建的通道，然后打开阈值（图像 -> 调整 -> 阈值）。将滑块尽量向右拖动：

4.我们已经为不透明的像素创建了蒙版。现在利用这个蒙版来分离原始图层。Ctrl+单击（或？+单击）alpha1通道，转到图层面板，选择原始图层层，打开图层 -> 新建 -> 通过剪切的图层。这样我们就分离出了不透明和半透明像素。

现在你需要将这两个文件分别存储为不同的文件格式：不透明像素保存为 PNG-8，半透明像素保存为 PNG-24。针对半透明像素图层你还可以使用色调分离技术让文件变得更小。

PNG-8 17KB

PNG-24 色调分离（色阶=35） 6KB

最终对比结果：

原图：63K

优化后：23KB

优化后的图片大小几乎只有原图的1/3，在原来的基础上能够节省2/3的流量。但是这种方法有一个明显的缺点：将一个图片分成两个图片，增加了重构人员的工作量，减少图片大小的同时却又增加了 Http 连接数。

这里只是介绍些优化方法，在实际应用中请大家多去尝试，发现不同方法的应用规律，总结出来大家一起分享！

在原文中Sergey Chikuyonok提到还会有第二部分的内容，将进一步探讨更高层次的技术，会谈到灰度模式的图像，使用更少的颜色，降低细节，并讨论进一步优化 PNG 的小技巧，以及 PNG 优化的实例。让我们一起期待下一篇大作。

Google Chrome 浏览器支持的 CSS 选择器 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-08-12T03:40:13Z

《Google Chrome Browser CSS Selector Suppor》

原文地址：http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

边框样式的写法总结 ... 2 replies

ghost@vip.qq.com (Ghostzhang) — 2009-08-12T02:21:53Z

原文地址：http://www.cssforest.org/blog/index.php?id=52

今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：

<?php border : border-width || border-style || border-color ?>

复制代码
border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如：

<?php border:1px solid #FF00FF

复制代码
这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多：

/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}

/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border-width:1px 2px 1px 1px;
border:solid #FF00FF;
}

/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

复制代码
还有就是有些边框是没有的，比如只有底边：

.div1{
/*错误的*/
border:none;
border-bottom:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:none none solid;
}

复制代码
注意：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

10 astonishing CSS hacks and techniques ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-08-05T02:29:41Z

原文地址：http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

1 - Cross browser inline block

Source: Cross browser inline-block property

2 - Disable Textarea resizing for Safari

/ * Supports: car, both, horizontal, none, vertical * /
textarea }
resize: none;
}

3 - Cross browser rounded corners

.rounded{
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
}

Source: Border-radius: create rounded corners with CSS!

4 - Cross browser min-height property

<?php selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Source: Min-height fast hack

5 - Image Rollover Borders That Do Not Change Layout

#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;
}

#example-one a:hover {
    border: 3px solid black;
}

#example-one a:hover img {
    margin: -3px;
}

Source: Image rollovers that do not change layout

6 - Cross browser transparency

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Source: CSS transparency settings for all browsers

7 - Lighbox in pure CSS: No Javascript needed!

Source: Lightbox effect in pure CSS: No javascript needed!

8 - Cross browser pure css tooltips

Source: Easy CSS Tooltip

9 - Set color of selected text (Firefox/Safari only)
[img]http://www.cats
whocode.com/blog/wp-content/uploads/2009/03/text-selection.png[/img]

::selection {
background: #ffb7b7; /* Safari */
}

::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Source: Use CSS to Override Default Text Selection Color

10 - Add File Type Icons next to your links

<?php a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}

Source: Add File Type Icons next to your links with CSS

JPEG 优化技巧 ... 2 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-31T03:22:01Z

译文地址：http://hi.baidu.com/jjmaxer/blog/item/aa4c5bdd0db825d08c102905.html
原文地址：http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

当人们讨论图像优化时，他们只注意到一些流行软件提供的那几个仅有的参数调节工具，例如“质量”滑块，颜色数调板，抖动等。此外，少数专门的软件，如OptiPNG和JPEGtran，设法压缩一些多余的数据来优化图像。所有这些都是非常有名的工具，它们为网页开发者和设计师提供简单直接的方法来优化图像。

在本文中，我们会向您展示一种不同的方法来优化图像，这种方法是源于“图像数据在不同图片格式中的储存原理”。我们从JPEG格式开始，这里有个基础技术称“8像素栅格” (原文：eight-pixel grid )

eight-pixel grid

就如你已知的，JPEG图像由一系列8px × 8px区块组成，当您吧JPEG的图像质量调的太低的时候，这些区块尤其明显。这些东西如何帮助我们优化我们的图像呢？请观察下面的例子：

32x32 px, 图片质量:10（PS中），396 bytes

两个白色小方块都是8x8 px。虽然都是低质量，但右下角看起来失真更加的严重了（正如您预料的一样），而左上角的却非常的干净。这是怎么回事？要回答这个问题，我们需要看看这个衬在网格下的图像：

正如你看到的，左上角的小方块正好对齐在“eight-pixel grid”，这样就确保小方块保持是锐利。

当保存的时候，图片会被分成许多的8x8 px的区块，而软件是对每一个区块进行独立优化的。由于右下方的方块并不匹配这些区块（也就是这个方块跨越了几个区块，正好落于区块的交接线上），优化器在寻找索引的时候就会在黑色和白色之间寻找平衡（在JPEG里，每一个8x8 px的区块都是依据正弦算法来进行编码的
原句：in JPEG, each 8×8 block is encoded as a sine wave）。这就解释了失真的原因了。许多专门的JPEG优化软件都有选择性优化的功能，它能根据图像的不同区域设置不同的优化质量，以达到保留更多图像信息的目的。

这项技术对在保存含有有矩形图形的图片时尤其有效。我们一起来看看在实际中是怎样应用的：

13.51 KB.

12.65 KB.

在第一个图像里，微波炉的位置是随机的，在保存第二个文件之前，我们把图像按照eight-pixel grid来对齐。质量一样都设置在55。让我们把图像放大看看（红线标示出区块的边界）

正如你看到的一样，我们只是调整好图片的位置就已经缩小了1kb的空间。当然，我们也把图片变得“干净”了！

优化颜色

这项技术相当复杂而且仅适用于某些类型的图像，不过我们会继续下去，我们只是学习它的道理。

首先，我们需要知道JPEG使用哪一种颜色模式。大多数的图片格式都是使用RGB颜色模式，但JPEG格式也可以是YcbCr，这是一种广泛用于电视的颜色模式。RGB类似于HSV模式（大多数设计师都熟悉HSV模式）。HSV由三部分组成，色彩（H），纯度（S），明度（V）。其中在这里最重要的就是明度（也称为亮度），优化图像的时候通常是压缩颜色通道，但尽可能保持高亮的亮度通道，因为人们对它最为敏感。Photoshop有一个叫Lab的颜色模式，这有助于我们对图像做出预处理，以便使JPEG优化有更好的效果。

我们继续使用微波炉来作为我们的例子。在微波炉的门上有一层很小的网纹，这是一个很好的例子来演示我们的优化颜色方法。经过一个简单的压缩后，图像质量调节到55，文件体积是64.39KB。

990×405 px, 图像质量: 55 (PS中), 64.39 KB.
浏览大图
在Photoshop中打开上面的大图，然后转换成Lab模式：图像>>图像>>Lab颜色。

Lab模式与HSV或YcbCr非常接近，但不完全相同。亮度通道包含了图像里的亮度信息。A通道显示了图像包含了多少的红色和绿色信息，而B通道则控制图像的黄色和蓝色部分。尽管有些区别，但这个颜色模式使我们避免了很多多余的颜色信息。

转到通道面板，查看A通道和B通道，这时候我们很明显能够看到网纹的纹理，并且我们能看到它是由三种不同亮度的色块组成的。

我们继续做一些颜色上的优化，为了保留原来的文件，先复制一份，这样在一个独立的窗口里编辑会非常有用。我们的目的在两个颜色通道里是光滑这些颗粒状的纹理。这样就能有更多简化的数据来让优化器处理了。你可能会奇怪为什么我们选择这样的一块区域（微波炉的门）来处理呢？很简单，因为这个部分是由黑色像素和橙色像素相间而成的。黑色意味着0亮度，这个信息已经被保留在了亮度通道里了。所以～如果我们在颜色通道里将这个区域完全变为橙色，我们将不会损失任何的信息。因为亮度通道决定了那些像素应该是黑色的，而在这样的纹理上，纯黑色和暗橙色则显得十分的含糊。（这里的意思大概是在亮度通道中的对比更强一些，容易看清楚）

转换到A通道，单独选择每一区块，为每个区块分别应用：滤镜>>杂色>>中间值，半径应该尽可能的小（直到纹理消失为止），这样不会损失太多的眩光效果。在此图中，第1区块半径应调节成4，第2区块为2，然后第3区块调节成4。现在，这个门看起来应该是这样的：

浏览大图

现在，图片的饱和度比较低，我们需要去改善它。为了使颜色的变化能够实时地显示出来，所以这里我们复制一个活动窗口：窗口>>排列>>新建窗口。在新的窗口里，点击Lab通道查看图片，现在你的工作界面应该像下面这样了：

右边的是原始的图像，左边的是复制出来的副本，底下的是工作现在的工作空间。
在A通道里把三个区块都选择上，打开色阶窗口（Ctrl+L 或图像>>调整>>色阶）。将中间的滑块向左边移动，这样副本里的微波炉的颜色就和原始的图像非常接近了（这里我把中间的滑块移到1.08的位置）。B通道进行同样的处理，现在的效果应该是这样的：

[img]http://media1.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/optimized-previ
ew.jpg[/img]
990×405 px, 图像质量: 55 (PS中), 59.29 KB
浏览大图

正如你所见，我们又减少了5 KB的大小（之前是64.39 KB）。虽然这项技巧看似非常得复杂麻烦，但是它仅需要你用上一分钟就能完成：转换到Lab颜色模式，选择颜色通道里的不同部分应用中间值滤镜，然后做一些饱和度修正。如前面说的一样，这个技巧比它的理论更来的有用，我常常使用这个技巧来调整一些大型广告图片，使他们看起来干净而锐利。

常规的JPEG优化技巧

本文将以以下的JPEG优化技巧作为尾声。

每次你选择压缩图片的时候，请仔细选择你的压缩软件，JPEG标准非常严格的，它只决定如何在转换的时候减少图片的体积，而软件的开发商却决定了该怎样正确利用JPEG优化器。（这里的意思大概是每个软件的优化算法都不同）

例如，有些商家使他们的软件做出做大程度的优化，允许您将文件压缩到很小的体积但依然保持高质量的设置，而photoshop则保存出来一个比这个大了一倍的文件。不要依赖这样的软件，每个软件都有他们的价值观来决定哪些信息是有用的，他们会根据这些标准来设定他们的优化算法。

唯一的判定标准是图像的质量和图像大小之间的比。如果你在Photoshop中保存一个质量55到60的文件，它可能跟在其他软件里把质量设置在80的时候输出的质量和体积差不多。

不要保存质量为100的图片。这个并不是最高质量的图片，只是一个数值上的优化底线，最终你会得到一个不合理的大文件。事实上把质量设置在95以上就已经足以防止丢失信息了。

记住，当你在Photoshop中把质量设置低于50的时候，它就会执行另一个叫做“降色采样（原文：color down-sampling）”的优化算法，它会在8个像素周围平均采样，这样会在边缘产生杂色：

48×48 px, 图像质量: 50 (PS中), 530 bytes.

48×48 px, 图像质量: 51 (PS中), 484 bytes.

因此，如果图片很小而且对比很大，建议在Photoshop中不要设置质量低于51。

在以后的文章里，我们将继续讲解一些PNG格式的压缩技巧。
（al）

HTML5相关资源 ... 2 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-31T03:19:42Z

W3C HTML5 规范： http://www.w3.org/TR/html5/
HTML5 与 HTML4的差异：http://www.w3.org/TR/html5-diff/
Opera dev: Improve your forms with HTML5： http://dev.opera.com/articles/view/improve-your-forms-using-html5/
Comparison of layout engines（HTML5）：
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
HTML 5 中的新元素：http://www.ibm.com/developerworks/cn/xml/x-html5/
如何在 IE 中使用 HTML5 元素 http://www.planabc.net/2009/06/13/how_to_use_html5_elements_in_ie/
Preparing for HTML5 with Semantic Class Names http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names
A great beginning overview of HTML 5 Yes, You Can Use HTML 5 Today!
A basic overview from Wikipedia Wikipedia: HTML 5
A great quick guide to HTML 5 as a printable PDF HTML 5 Cheat Sheet
A great set of demos. Just view the source to see how they work. HTML 5 Demos
An example of how to use Drag-n-Drop in HTML 5 HTML 5 Drag and Drop + Microformats = a whole world of possibilities
See what’s possible with HTML 5 HTML 5 Gallery
A powerful demo of how forms work in HTML 5 HTML 5 Forms Demo
A great general resource on HTML 5 HTML 5 Doctor
A good article from HTML 5 Doctor on the Header element Headers in HTM 5
A useful article from HTML 5 Doctor on the Video element Video elements
A tutorial on how to build a blog in HTML 5 Designing a blog with html5
Another great article from HTML 5 Doctor How to get HTML5 working in IE and Firefox 2
The whole spec, in all it’s scary technical detail HTML 5 – Draft Standard
An opinion piece from A List Apart Semantics in HTML 5
Some quick thoughts on accessibility problems with the Canvas element Thinking About HTML 5 canvas Accessibility
A post by Zeldman on the HTML 5 Nav element HTML 5: nav ambiguity resolved
A great list from Molly about which HTML 5 features are supported by which browsers A Selection of Supported Features in HTML5
The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec The WHATWG Blog
A great in-depth tutorial on how the HTML 5 Canvas element works HTML 5 canvas
A demo of how the Drag-n-Drop functionality works. Native Drag and Drop
A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology. Bespin
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies When can I use…[
/url]
A good resource from Wikipedia[url=http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29]Comparison of layout engines (HTML 5)
http://media2.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
HTML 5 canvas —— 基本语法 http://kb.operachina.com/node/190

To Sprite Or Not To Sprite ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-30T01:42:48Z

原文地址：http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

CSS Sprites have been around for a while, and keep coming up as a way to get blazing fast speed to your site. Steve Souders just showed off SpriteMe! at Velocity '09 (speaking of — why use the CSS Sprite Generator or other server-based tools when you can use <canvas> and toDataURL and generate sprites on the fly?). However, there are a number of misconceptions about CSS Sprites, the main one being that they have no downsides.

The basic idea of CSS Sprites is to combine a number of images used on your site into a single image, thus reducing the number of HTTP requests that need to be made to your site. The image is rendered using a CSS background and background-position (which, incidentally, means that your markup becomes more complex; the image to use is specified in CSS, not in a plain <img> tag).

The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV's web site, where this image is used as a sprite. Note that this is a 1299x15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don't render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4). If the image didn't have any alpha transparency, this could be maybe optimized to 1299 * 15000 * 3, though often at the expense of rendering speed. Even then, we'd be talking about 55MB. The vast majority of this image is blank; there is nothing there, no useful content whatsoever. Just loading the main WHIT page will cause your browser's memory usage to go up by at least 75+MB, just due to that one image.

That's not the right tradeoff to make for a website.

Another (but much less important) downside is that if a sprite-using page is zoomed using the full-page zoom feature that's present in many browsers, the browser may need to do extra work to get the correct behaviour at the edges of these images — basically, to avoid adjacent images in the sprite from "leaking in." This isn't a problem for small images, but can be a performance hit for bigger ones.

There are cases where CSS sprites are clearly beneficial; the main example is combining a bunch of small similarily-sized images into a single one. For example, a bunch of 16x16 icons used as indicators for various things on your site, or a bunch of 32x32 icons used as category headers or similar. But combining images with vastly different dimensions, especially when there are skinny and tall images in the same sprite as wide and short ones is almost never a good idea.

However, sprites do improve page load time (at least initial page load — on subsequent page loads, the browser hopefully has the images cached). What's the alternative? Unfortunately, there isn't one, yet. Many browsers have support for offline manifests already; it might be possible to extend that to allow downloading one file (like a jar/zip file) that contains a manifest of resources and equivalent URLs that are contained inside it. But any such work won't show up on the web for some time yet.

So, when deciding whether to sprite or not to sprite, keep in mind that there are factors in play other than raw page load performance. As a general rule of thumb, if most of your sprite doesn't contain real image content, you should probably avoid using it. Also, keep an eye out for future solutions that will preserve both the page load speed, as well as avoiding the negative memory and performance impact of sprites.

CSS Sprite 的细节优化 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-30T01:37:37Z

原方地址：http://lifesinger.org/blog/2009/07/css-sprite-performance/

CSS Sprite 最大的好处是：减少 HTTP 链接数。

页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图：

需要的包越少，意味着速度越快。

例子：淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。

也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。

类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox 下，同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下：

当链接数从 6 的整数倍增 1 时，下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时，尽量减少到偶数，是一个不错的优化守则。

参考资料
◦CSS Sprites: Image Slicing’s Kiss of Death
◦CSS, Image Sprites, Background Images and Website Optimization

CSS类命名的语义化VS结构化方式 ... 7 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-29T07:11:48Z

原文地址：http://blog.bingo929.com/css-coding-semantic-naming.html

一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

CSS-语义化-结构化

　　…而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

　　换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

CSS3属性选择符详解 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-29T05:13:09Z

原文地址：找不到原出处，知道请告知。

CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型列表模块超连结方式语言模块背景和边框文字特效多栏布局等。
　　首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

注：文中所有说的浏览器支持均未包括IE7、IE8和Firefox3这三个版本的浏览器。在IE8和Firefox3中，文中的大部分选择符已经被支持如果我们再向前看一点，在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了CSS3），但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下Css 3新增选择符是如何使用还是有益处的。
　　本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在Css的第3个版本中出现，但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿，那么现在你应该再去看一下是不是已经出现了最新版本了。

这里我不打算去解释Css选择符工作的基本原理。如果你想重要复习一下的话，最好从《细说Css2.1中的选择符》开始。
首先，快速浏览一下CSS3中新增的选择符：

css3　
CSS3选择符语法概览：

如果对上面的描述还不是很清楚的，请不要担心。本文下面的部分将会对他们进行更加详细的讲解，并且提供例子来演示他们是怎么使用的。

子串匹配的属性选择符

　　这一组的选择符都新加的，他允许开发者对属性中的子字符串来进行匹配。
　　假设HTML文档中包含下面的代码结构：

　　通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。
　　下面的规则将为id以“nav”开头的div元素设定背景颜色：
　　

<?php div[id^="nav"] { background:#ff0; }

　　上例中选择符会匹配div#nav-primary和div#nav-secondary。
　　要找到id以primary结尾的div元素，可以使用下面的规则：
　　

<?php div[id$="primary"] { background:#ff0; }

　　这时选择符将匹配div#nav-primary和div#content-primary。
　　下面的规则将会匹配到id中含有content子字符串的的div中：
　　

<?php div[id*="content"] { background:#ff0; }

　　受影响的元素有：
　　div#content-primary、div#content-secondary和div#tertiary-content。

　　子串匹配的属性选择符已经在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用，但是如果IE中还不支持的话，我们最好还是先不要使用他们（作者在写这篇文章时IE还在开发中，如今IE7、IE8都支持这些选择符）。

目标伪类

　　含有识别标识的url（一个#后面紧跟锚点名称或者元素的id）指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识，:target伪类将不会匹配任何元素。

　　还是以上面提到的代码结构为例，如果URL中包含content-primary标识时，现在的规则将会在他外围增加一个边框：
　　

<?php div#content-primary:target { outline:1px solid #300; }

URL是类似这样的形式的：
　　http://http://www.52css.com/index.asp#content-primary
　　基于Mozilla和Safari的浏览器已经支持:target伪类。

UI元素状态伪类

　　ENABLED伪类和ISABLED伪类在浏览器允许改变表单控件外观的前提下，:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素（表单元素）的显示样式。下面的规则将会根据单行输入框是否可用设定不同的背景颜色：

<?php input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

:CHECKED伪类

　　:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的Css规则将会使选中的radio和checkbox元素显示一个绿色边框：
　　

<?php input:checked { border:1px solid #090; }

　　UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。
　　要注意的是，许多浏览器对于开发者对表单控件样式的改变有着严格的限制。

结构性伪类

　　结构性伪类允许开发者根据文档树中表明的结构来指定元素，而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大，但是不幸的是现代浏览器仅提供了有限的支持。

:ROOT伪类

　　:root伪类指向的是文档的根元素。在HTML中，文档的根元素始终是HTML，也就是说现在的两条规则其实是一样的（大体上说来:root要比html更专业点）。

:root { background:#ff0;}html { background:#ff0;}

:NTH-CHILD()伪类

　　:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数，可以是一个数字，也可以一个关键字或者一个公式。数字b指是的第b个子元素。

下面的规则将会应用到父元素下所有p元素中的第三个中：
　　p:nth-child(3){ color:#f00; }关键字odd（奇数）和even（偶数）可以用来匹配序号为奇数或者是偶数的子元素。

第一个元素的序号为1，因为下面的规则将会匹配第1、3、5…了子元素p：
　　

<?php p:nth-child(odd){color:#f00;}

下面的规则则匹配第2、4、6…个字元素p：
　　

<?php p:nth-child(even){color:#f00;}

表达式an+b可以用来创建更加复杂的循环模式。

在表达式中，a代表步长，n是一个从 0开始的计数器，b代表偏移量。其中，所有的数值都必须是整数（这里，n是从0开始的，和js等中的循环不同的是，至于到多少结束取决于元素的个数决定，如文档中有20个元素，3n(n=1,2…)就会分别选择第3、6、9、…18个元素，n此时为6 ）。

为了更好理解如何使用表达式我们先看几个代码实例：
　　下面的规则将会匹配序号数为3的倍数的所有p元素。在第一行中，b等于0，因此可以忽略不写（见第二行）：
　　p:nth-child(3n+0){color:#f00;}p:nth-child(3n){color:#f00;}偏移量可以用来指定样式的循环是从哪个元素开始应用的。如果有一个20行的表格，我们希望从第10行以后的奇数行开始使用不同的背景颜色，就可以使用下面这条规则：
　　

<?php tr:nth-child(2n+11) { background:#ff0; }

由于n是从为开始的，因此第一个受影响的tr元素的序号是11（
2*0+11＝11）。接下来就是第13行（2*1+11=13）再接下来就第15行（2*2+11＝15），以此类推。

　　那么，对于这样有用的一个选择符又有哪些浏览器支持它呢？很糟糕，据我所知，没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正（Firefox3和IE8目前是否支持？）

:nth-of-type()

　　:nth-of-type()伪类和nth-child()伪类找使用方法十分相似，只不过他匹配的是规则中指明类型的元素。

下面的规则将会匹配每个属于父元素中第三个子元素的p元素（属于第3个子元素的p在一个该当中可能会有很多，只不过他们位于不同的父元素下）：
　　

<?php p:nth-of-type(3) { background:#ff0; }

当你想确定是否已经指向了第三个p元素，这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的，但是nth-child(3)会把所有的子元素都计算进来，因此结果可能就会不一样，除非p所有的所有兄弟元素也都是p元素。

:nth-last-of-type伪类

　　:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth－last-child伪类一样，它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中（注意：是兄弟、同级别的节点）：
　　

<?php p:nth-last-of-type(2) { background:#ff0; }

:last-child伪类

　　:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。
下面的规则匹配所有属于父元素中最后一个子元素的p：
　　

<?php p:last-child { background:#ff0; }

:last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类，在Safri中存在bug（上面的规则会匹配到所有的p元素）。令人稀奇是的它可以在OmniWeb（测试版本5.1.1）中正常使用，尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归，因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。

:first-of-type伪类

　　:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。
　　p:first-of-type { background:#ff0; }:first-of-type伪类目前还没有浏览器支持。

:last-of-type伪类

　　:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last-of-type(1)是一样的。
　　

<?php p:last-of-type { background:#ff0; }

nly-child伪类

　　nly-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的（后者不够专业、简明）。
　　

<?php p:only-child { backgound:#ff0; }

nly-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child（上面的规则会被匹配到文档中所有第一个子元素p中）。

nly-of-type伪类

　　nly-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同（后者专业性不够）。
　　

<?php p:only-of-type { background:#ff0; }

:empty伪类

　　:empty伪类指向没有任何子元素的元素。其中包括text节点，因此下面的示例只有第一行是空元素。
　　<p></p><p>text</p><p><em></em></p>下面的规则只匹配第一行的p元素：
　　

<?php p:empty { background:#ff0 }

:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。

否定伪类

　　否定伪类写成:not(s)，参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如，下面的Css将会指向所有不是p的元素：
　　

:not(p) { border:1px solid #ccc; }

否定伪类目前只有基于Mozilla的浏览器支持。

::selection伪类

　　::selection伪类匹配指定元素中处于选中或者高亮状态的部分。其中一个应用就是用它来控制选中文本的样式。

　　下面的规则会使选中的文本颜色变为红色：
　　

::select { color:#f00; }

::selection伪类目前可能基于Safari的浏览器支持。但是在使用上会出现不可预料的情况，因此Safari还需要一点改进。基于 Mozilla的浏览器要使用-moz-prefix: ::-mozi-selection来实现。这种prefix可能最终会被去掉。

通用兄弟元素选择器

　　通用兄弟元素选择器通过两个简单选择符通过波浪号（~）分隔组成。它匹配第二个简单选择符中所匹配的元素，而且与第一个简单选择符中匹配的元素要出现在他的前面。这两个元素必须具有同一个父元素，但是第二个元素不一定必须紧跟在第一个元素之后。这条Css规则将会匹配所有p元素之后ul元素：
　　

<?php p ~ ul { background:#ff0; }

通用兄弟元素选择器目前有Opera和基于Mozilla的浏览器支持。

亟需更好的浏览器支持

　　部分CSS3选择符已经被广泛支持。但是，大部分非常有用的选择符在现代浏览器中或者未被支持或者使用受到限制。这就使得本文中介绍的很多选择符在今天的Web或多或少失去了用武之地。但是不必害怕去尝试它，你仍然可以在支持他们的带来超前体验的高级浏览器中使用他们。

CSS3选择符在现在浏览器（Firefox 2、Firefox 3、InternetExplorer 7、Internet Explorer 8、Oper9.27）中的支持程度

原来PPT还能这样做 ... 2 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-24T01:45:26Z

【译者的话】在幻灯片上写满文字是一种费力不讨好的设计，也没有一个观众能够记住你上面的那些数据及文字。而用图片来进行演讲能够达到更好的沟通效果，也能够产生更大的视觉冲击力。本文将探讨使用图片来安排幻灯片版面时所涉及的几个基本原则。

在幻灯片的演示中，照片比图表及文字能让你的观众与你的演示内容产生更加密切的联系。

我们都喜欢数据！6次射门，23个遭弃养的小孩，3级台风。我们喜欢在幻灯片上摆弄这些数据，分析数据，然后又用各种各样的图表来表达这些数据——无论何时何地，我们总是怀着喜悦的心情在向那些昏昏欲睡的观众展示这些“翔实的数据”。

但问题是，单独的数据其实没有什么价值，只有与真实的生活联系起来时这些数据才变得有意义。

而与真实生活情景最好的联系是“故事”，所以请将你的那些文字及图表拿掉。而为了讲一个故事，我们需要有照片的帮助。照片能够与观众产生多渠道的联系。它们能够无声但却非常有力地将观众的注意力引入到你的演示内容中来，让观众产生一种情绪上的共鸣，并且也让听众对你要讲的内容有一个心理上的准备。

我们很容易就能够找到大量快乐的图片，但一般不多见的悲伤图片却能够更有力的冲击观众的情感。
如果你所演示的项目是象上图一样与儿童收容所有关，首先你要想的并不是这个收容所的资金情况及它的社会功能，也不是什么统计数据，而是：“谁是你要帮助的对象？为什么？”这是首要的问题，找一张图片来表达这个问题即可。

你是演示的主角

关于演示，你要明白的第一件事就是你是整个演示的主角。你的观众大老远来到这里是为了听你的讲话，而不是为了看幻灯片。
采用一张图片来让观众对你所讲的主题有个大概的了解，而细节则是通过你的口说出来。

（主题：Thompson集团收购Trax公司的情况介绍）

太多东西了！这张幻灯片基本上就象你所写的一个便条，但在视觉上，它毫无作用。

（主题：2008年我们收购TRAX公司）

只用一张主题图片，相关细节应该由你自己说出来！

使用象征性图片

有很多主题，比如说，保险业的规章制度，你很难去用一张很真实的照片去反映这种抽象的主题。在这种情况下，或许就可尝试用一些在视觉上有某种象征意义的图片。在上面这个例子中，使用的就是一种具有“比喻”意义的图片。你可以将你要讲的话想象成多个章节，然后每一个章节就用一张图片去表达，图片产生了一种吸引观众的作用，也让观众将你讲的话与这张图片产生了某种联系。
避免使用一些毫无特色的照片。文字应该“最少化”，并且使用中性的语调表达。

一次表达一个观点
每一张幻灯片只表达一个观点，就算你有足够的空间放其它东西也一样。这可以让观众有充分的空间来思考你所讲的内容。其中的关键是能够产生良好的沟通。

（主题：交通管理系统）

飞机、火车、巴士及的士，589000,377800,320900,218600——谁会记得住这些数据？
我们可以将上述的四组数据分别用四张幻灯片来表达，每一张只表达一个主题，每一张都配合一张与主题相关而且全屏显示的照片。

令人眼睛一亮
我们的思维受到惯性的束缚，经验往往成为我们认知某一个物品的准则。而让人眼睛一亮，其实就是打破这种惯性，重塑观众对某一个物品的认知。

（主题：不同品牌的显著区别）

沉闷的设计：这样的幻灯片随处可见，我们谈论的主题是“区别”，但在这里我们看不出“区别”在哪里，它只是列几个要点，毫不吸引。

（主题：是什么让你与众不同？）

橙在苹果中，这就是我们所说的令人眼睛一亮，打破我们一般熟悉的认知。一个简单的问题（而不是一种陈述）引导观众思考，并且在心理上做好准备听你的演讲。
上面的图片，橙和苹果是两种比较相似的水果，相似是很重要的，要给人一种在不经意中产生惊讶的感觉，如果后面放的不是橙，而是一个面包，其实这种效果就完全消失了。

搞笑
每个人都喜欢笑。在演示时一些小小的技巧就能够达到这种效果，或者让观众更享受你的演讲，这比仅仅的幽默感更有效。

（主题：六月份存货量）

实事求是的说，上面这张幻灯片已经做得非常不错了，完全可以拿得出手，图表简单清晰，表达的趋势一目了然。
但，慢点，我们还可以做得更好：

精心挑选的图片，既表达出“存货量不足”这个含义，同时也展现出一种“故事”情节。可以想象：前面那张虽然漂亮的幻灯片并不会让人记住多久，而这一张，却能够在哄堂大笑中让人长久回味。更重要的是，由于其有趣，你更能获得观众的认同感，如果你需要他们的帮忙来解决问题，这样的沟通方式也更有效。

发现美
美会触发我们内心深外的渴望。一张漂亮的照片可以让观众摆脱日常的单调而引起他们的注意力，也可以将他们带进一个丰富多彩的世界。无论你的主题是什么，都要学会发掘美。

（主题：安吉是中国最大的竹种园）

这是一个吃力不讨好的版式。这幅人工痕迹很强的图片放在不对称的两色背景上，给人的感觉很生硬，呆板而缺乏美感。
其实在设计幻灯片时，要思考的是：我们需要的是故事，而不是数据。

（主题：中国安吉竹种园有288个品种）

漂亮的照片带出一种感官上的体验，而且也很容易设计。青葱繁茂的竹林让观众好象走进了一座绿色森林（“哇，这才是真正的竹子！”）。单行的文字及漂亮的字体低调地让图片发挥最大的视觉力量。

戏剧化
戏剧就是电影院。指的是一张图片创造出某一种效果，如兴奋、期待、深刻等。
戏剧化的设计就是突出强调某一种感受：将动作变得更夸张，让对比显得更强烈，让差异显得更突出。

（主题：了解你的目标）

关于PPT，有很多免费的模板可以利用。但上面所用的模板其实也说明了相当一部分模板所在的问题。地球及渐变的天空单独看起来不错，但如果放在你的幻灯片上，就显得有点碍眼，就好象在镜头前总有另一只手在摆动的感觉。同时，他们还分散了观众的注意力。而你那些文字及信息被这些图片消融了一干二净。

（主题：了解你的目标）

留意上面这个版面：有视觉支撑点（人物），暗色的背景及及上方明亮的光线，每一条线都呈同一角度，拍摄的角度也很特别，还有长长的阴影。这是一种舞台效果——在真实的生活中并不常见，整个画面也给人一种超现实的感觉。这样的视觉效果同样具有很强的冲击力。

展现脸部
脸部是我们人类在所有图片中最熟悉的画面，脸部的表情特写也往往最容易触动我们的心扉。
采用脸部作为表达，你已经不需要再用另外的强调了。脸部表情可以多种多样：高兴的，悲伤的，紧张的，焦虑的等等。

（主题：SPCA宠物收养项目/2007年有1220只狗被收养）

上面这个版面有什么问题？它只是表达了一种事实，再加上数据，仅此而已。

（主题： 1220个领养的客户）

脸部传达更多信息：达个版
面中，更少的数据，连SPCA也没有提起，但版面传达更多信息。每一个观众看到这张图时都产生更大的情感上的反应，这个时候，你的文字就给人更多的感受，而不仅仅是传达一个事实或数据。

logosky.net设计师陈汉聪编译 http://www.xici.net/b861562/d70199654.htm

换种角度看“语义化” ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-23T12:52:49Z

原文地址：http://www.cssforest.org/blog/index.php?id=142

《页面重构中的语义化》所表达的好像不太好理解，我们可以换一个角度来看看。

在“表格布局”1 的时代，大家所使用的布局方式都是表格，没有其它的方式可以选择， Dreamweaver的可视化操作大大的简化了页面制作的过程，而且当时虽然网络情况比现在差得多，但并没有多少人会去关注页面性能这块。搜索引擎对于表格布局也无能为力，只能过复杂的算法去把内容抓取出来，而且很难知道哪些内容是重点，因为会正确使用标签的页面太少了。那搜索引擎如何得知页面的重点呢？没错，就是页面头部的信息，在这个区域，标签是有语义的，明确的指出页面的标题、主要内容、作者、版权等等信息。

接着，WEB标准进入了国人的视野，它带来了颠覆性的改变，从页面制作方式到思维方式的种种改变。推荐使用“CSS布局”2 代替原先的“表格布局”，让原先让人遗忘的许许多多HTML标签重新被认识，并以较严格的方式使用，在一定程度上规范了页面书写的形式，像“标签闭合”、“标签、属性使用小写”、“使用DTD”等等。搜索引擎也很支持这种方式制作的页面，因为算法不用像以前那么复杂了，可以很简便的得到内容的主次，提高抓取的质量。这也是为什么WEB标准会更利于 SEO 。

那么，如果标签足够表达内容的语义，页面内容的语义就能以标签的方式被传递给更多的用户。因此，所谓语义化，就是尽可能的理解要表达的内容，选择适合的标签，将内容转换成浏览器认识的语言，通过浏览器传达给用户。可以理解为将内容的语义通过标签的方式表现。

写过 XML 的同学可能体会会深些，在XML中，标签是可以自定义的，但这些标签的定义都是为了让读取更容易，或许可以看下常见的RSS，它就是一个标准化的XML格式，但RSS里使用的标签都是有语义的，你可以通过标签很清楚的看出哪部分是代表什么的。虽然(X)HTML看起来比RSS复杂得多，但在搜索引擎看来，好的页面不就是一个XML？

做为对《页面重构中的语义化》的一个补充，欢迎讨论。

1 使用表格单元格的划分来进行页面布局的方式。
2 使用样式的定位属性进行布局的方式。

页面重构中的语义化 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-23T12:39:10Z

原文地址：http://www.cssforest.org/blog/index.php?id=139

在想什么是“模块化”的时候，HTML部分的模块化也让我烦恼了一段时间，其中引出了另一个问题，就是“语义化”，本文想与大家探讨的内容。

“语义化”的知名度应该不亚于“模块化”，WEB标准在国内推广后，其中一个亮点就是“有利于 SEO ”，而“语义化” 也就被提出来了。目前讲“语义化”的文章基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，大多是洗脑文。

做了几年的页面，听了不少人讲“语义化”，也讨论了几年的“语义化”，可是到现在，大部分人都还是不清楚到底“语义化”要怎么做，这几年间我也试着去理清相关的内容，只是有些点始终无法想透，特别是那些没有嵌套错误的标签，如列表（li），可以使用的标签十分广泛（可包含标签： %Flow; ），加上对“列表”理解上存在差异，导致在一定程度上的滥用。

我一直使用的方法是，将页面样式去掉，看页面是否以一种文档格式显示，并且是容易阅读的。使用这个方式可以让你对“语义化”的理解在短时间内有所提升。当然有些标签在浏览器中并无具体的表现，或表现与其它标签一样，不过方便用户读取内容，不正是“语义化”的意义吗？好像很对，在森林的聚会上被allan问到做语义化到底为了什么？时，我一时无言了，只是为了“祼奔”1 时好看？有多少用户会看到“祼奔”的页面，并且看下去？当时我是用了“盲文阅读器对不同标签所发出的声音是不同的，以此来传达信息的重要性”来说服allan，只是，连我自己都说服不了。

另外一个例子，关于标题的，“是否所有的块都需要添加一个标题？”小志的《列表模块是否需要标题》讨论了这个问题。我们经常使用隐藏的文字将内容放到页面上，这种做法我们一般也称之为“语义化”；选择要使用什么标签，我们也称之为“语义化”。选择标签是件很痛苦的事，比如一个电影列表页面

看上去是一个列表，是列表就使用 li ，很多同学都是这种思维，这个角度偏重于标签的语义。我们再从内容的角度来看，什么是列表？我记得之前看过的解释是“一些简短、有某种关联性的内容排列在一起，称之为列表”（准确的解释现在不好找了，百度和google也有找不到的东西），应该是区别于段落的，从这点上看，列表中放标题、段落、块等等都是不合适的。很多时候我们都只是关注到其中的一方面，比如我们在写代码的时候，更多的关注到当前部分应该使用什么标签，而不是关注到这个内容在整个页面中应该是什么语义的。
前段时间重新思考了这个问题：“什么是语义化”。发现一直以来都很纠结，因为我们把两个思维混在一起了，因此我提出了“内容语义化”和“代码语义化”，在一定程度上能让思维清析些，之后发现，其实“内容语义化”和“代码语义化”并不是独立的东西，我们是根据内容的语义去选择标签的，这时标签的语义也就代表了内容的语义。

所谓语义化，就是尽可能的理解要表达的内容，选择适合的标签，将内容转换成浏览器认识的语言，通过浏览器传达给用户。从这个角度来说，我们更像是“翻译”。我们要做的还不只是简单的翻译，毕竟我们的“听众”并不是单一的。

目前来说，做语义化的确还不能体现出它的优点，可能的原因是：
1.除了专业的人外，没人会去看我们的标签是否使用得有语义
2.HTML的标签还不足以表达所有可能的语义
3.语义化会需要增加一些额外的代码

简单说下我的想法：记得前段时间有同学向我反映一个设计稿的问题，主要是说产品经理让她改设计稿上一个写反了的广告语，“XXYY”改成“YYXX”，而且看上去意思差别并不大。我给的回答是，在我们这种外行看来可能没什么差别，但这正是专业的体现。外行看热闹，内行看门道，我们写的页面并不是所有人都会去看源代码的，那我们为什么还要注意那么多东西呢？我们也一样，用户只是看到了一小部分，更多的是做给懂得点右键选“查看源文件”的人看的这点也是从我们自身发展来说的，如果你想在这个行业内有所建树，专业化是必须的。也就是说如果你不考虑自己的发展，也就不用讨论“语义化”的问题了。

HTML5新增的几个标签，更多的补充了目前HTML标签语义上的不足，这点也可以看出语义化是以后发展的一个方向，当然更大的目标是统一的实现标准，语义化只是为了这个目标所使用的一个方法。这可能需要相当的一段时间，而我们正经历着这个过程。

在“语义化”的过程中，的确是需要增加一些标签。这个需要做页面的同学先明白一个问题：我们是为了什么而做页面的？正如前面所说，我们是内容的传播者，我们尽可能的让更多的用户更容易的从互联网获取信息。那么，表现上不需要的标签就是多余的吗？虽然我们现在很多的表现还需要额外的标签来支持，但这也是因为浏览器对样式的支持不完全造成的。随着浏览器对样式支持的改进，这类为了表现而写的标签也会越来越少。

1 页面无样式的状态。

从宜家的家具设计讲模块化 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-23T06:17:40Z

原文地址：http://www.cssforest.org/blog/index.php?id=126

很久之前就知道宜家.. ，以前在广州的时候也去过一次，给我的印象就是：大、贵、巧。地方很大，东西很贵，设计很巧。现在住的地方离宜家不远，这个月找时间去逛了下，地方还是那么大，东西还是那么贵，设计还是那么的巧。虽然没有买什么东西，不过也还是有所收获的，通过宜家的家具设计方法，我们可以聊聊模块化。

去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装。模块化的特点也是这样，可以组合，相对独立，在需要的时候可以很方便的加上。那怎么写可以基本实现这种方式呢？给个简单的例子：

<div class=“mode-a”>
<h3>模块化Demo</h3>
<p>模块化结构的例子。</p>
</div>

对应的CSS可以这么写：

.mode-a{...}
.mode-a h3{...}
.mode-a p{...}

其中“mode-a”就是这个模块的名称，表示这是名为“a”的模块，现在这个模块可以被放到你所需要的地方。既然是做模块，就不会只有一个，我们再加一个“mode-b”：

<div class=“mode-b”>
        <h3>模块化Demo</h3>
        <div>
                <h4>模块化的特点：</h4>
                <ul>
                        <li>相对独立</li>
                        <li>可移植性高</li>
                </ul>
        </div>
</div>

对应的CSS可以这么写：

.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}

实际应用中大多需要加一些classname来减少类定义的复杂度，这个例子比较简单，但足以说明模块化的特点。上面两个模块可同时被使用到一个或多个页面中。

在宜家的卖场中，也许你也注意到了，基本是以设计师来划分商品区的，特别是那些小件的商品。模块化后的代码也可以被分配给不同的人进行编写，提高效率。当然要实现这种方式，我们也需要做些工作，如模块的命名规范（可参考《样式命名规范》）、模块中哪些地方是需要留接口的等等。如上面的例子中可以约定的就有：命名以“mode”开头，模块标题使用h3标签。这样不管是哪个人写出来的模块都可兼容项目中的页面。

看到这你可能会发现，既然上面已经约定了模块固定的结构，每个模块的样式定义中所写的这一部分不就是冗余的吗？是的。如果已经形成相关的约定，这部分的样式定义可以被提出来放到项目的公共定义中，减少代码的冗余。如上面的例子可以变成：

/* =S global */
h3{
/* 第一种写法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二种写法 */
...
}
/* =E global */

/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */

/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */

不知你有没注意到宜家那些小件的商品，往往可以组合到不同的其它商品上面。这也带出了模块化的另一个话题：模块中的模块。即在模块中可以存在其它的模块，也很好理解，就像我们做网站的时候，整个页面的结构就像是一个大的模块，而上面所讲的例子就是模块中的模块了，只不过我们把这个定义缩小一层。上面例子中对h3的定义，就可以看成是一个模块，它在“mode-a”、“mode-b”两个模块中都出现，并且结构表现相对固定。

OK，这只是对一个标签的定义，如果不只一个标签呢？我们重新改下例子：

<div class=“mode-b”>
        <div class=“mode-a”>
                <h3>模块化Demo</h3>
                <p>模块化结构的例子。</p>
        </div>
        <div class=“cont”>
                <h4>模块化的特点：</h4>
                <ul>
                        <li>相对独立</li>
                        <li>可移植性高</li>
                </ul>
        </div>
</div>

<div class=“mode-c”>
        <div class=“mode-a”>
                <h3>模块化Demo</h3>
                <p>这个是“模块中的模块”的例子。</p>
        </div>
        <div class=“cont”>
                <h4>模块中的模块：</h4>
                <p>模块“mode-a”就是一个模块中的模块。</p>
        </div>
</div>

/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */

/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */

/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */

从上面可以看到，“mode-a”是一个独立的模块，当它作为“mode-b”和“mode-c”的一部分时，就成了模块中的模块了。抛下砖，希望能引出更多相关的讨论。

测试 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — 2009-07-23T02:54:24Z

第一贴