99css

博客搬家了~

2009-11-01T01:13:00.004+08:00

blogger.com 的所有IP都被 GFW 了，转移为 Wordpress

博客地址为：http://www.99css.com

订阅地址为：http://feeds2.feedburner.com/ytzong

另：感谢加班战友大猫的空间支持

Pixel Perfect 1

2009-10-31T18:25:00.004+08:00

花了几个小时小小研究了一下中文字体：

使用的是 Arial 字体（不同字体下的结果不同，即便同为中文）
列分别为12px文字、12px链接、12px加粗文字、12px加粗链接、14px文字、14px链接、14px加粗文字、14px加粗链接
行分别为IE6、IE7、IE8、FF3.5

点击图片看大图

结论：

Arail	12px	14px文字
ie6/7	高11px占14px 上0下3px 下划线在13px处	高13px占16px 上0下3px 下划线在15px处
ie8	高11px占15px 上0下4px 下划线在12px处	高13px占16px 上0下3px 下划线在14px处
ff3.5	字11px高15px 上2px下2px 下划线在14px处	高13px占16px 上1px下2px 下划线在16px处

[翻译]OOCSS FAQ

2009-10-25T17:19:00.004+08:00

原文：http://wiki.github.com/stubbornella/oocss/faq（翻译时为Version 28）
翻译：ytzong

在OOCSS中怎么定义“对象”？

对象类似JAVA中的类，保持着OO的特征。

一个CSS对象由4部分组成：

可能是一个或多个DOM节点的HTML
由wrapper节点的class名开始的CSS样式声明
类似于背景图片和显示用的sprites组件以及
JavaScript行为，监听或者与对象关联的方法

这可能令人费解，因为每个CSS class不是其自身必要的对象，但可以是一个wrapper class的一个部件。比如：

<div class="mod">
        <div class="inner">
                <div class="hd">Block Head</div>
                <div class="bd">Block Body</div>
                <div class="ft">Block Foot</div>
        </div>
</div>

对象是一个class为mod的模块。包括4个部件节点（不能独立于模块外，包括2个区块，inner和body，和两个可选择的区块，head和foot）

OOCSS如何提升性能？

OOCSS具有双倍的性能优势：

高度重用的CSS代码，只需要很少的CSS代码，意味着：
- 更小的文件，从而更快的传输
- CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存
就浏览器而言更少的重绘和布局计算
- 单个页面，CSS规则复用的越多，渲染引擎花在“computed values”的计算时间越少
- 手动增加的"extending"类，重写更少的规则，这再一次意味着引擎做很少去应用规则

要用ID来对内容写样式吗？

当你在同一页面（或者同一站点同时缓存良好）复用一个对象时，这是性能的“免费赠品”。用ID来写样式在同一页面中只能使用一次。@cgriego (twitter) 拿它与singletons比较过，我认为非常精确。可能有些情况下你要用ID定义样式，比如非常特殊的 header menus，此时你可以在用ID来沙箱（译注：动名词）特殊元素并确保此处的代码不会影响站点的其它地方。选择ID而非class前要三思，随着站点的发展，真的很难预料其他人会怎么处理依据你的CSS所构建的HTML。如有选择的余地，尽可能的考虑扩展性。

我正在考虑移除模板head, body, foot中的ID。某些人或许有多个主区域。站点的多个header 和 footer更难以猜测，但我敢打赌肯定有设计师会这样想，所以ID很可能会消失（不太顺，看原文：Someone could have multiple main content areas. Multiple site headers and footers are more difficult to imagine, but I bet there is a designer who can dream up something like that, so the IDs are very likely to disappear.）。

另一方面，ID hooks are great for linking。放在HTML中，不过别用它们来写样式。

设计师可以写OOCSS吗？

是的，设计师出于本能理解对象，比多数人当前书写CSS的方式要形象 — layers of exceptions (想一下，一个老太太吞了一只苍蝇)。事实上，他们爱上OOCSS的原因有两个：

这使他们能快速创建复杂高点击量的站点。他们不需纠结于不理解的结构除非有足够的能力并充足的了解语法
学CSS时，他们不需创建丑陋的 “hello world!” 站点。设计师在非常在意的是他们的工作看起来很漂亮。如果必需做一些丑陋的东东，即便是学习之由，他们很快就会有挫败感并灰常的郁闷。OO-CSS 使得他们的工作在每个学习阶段都看起来很漂亮

设计师是聪明D。我们要给他们信任。他们会讲一种不同的，非工程师的语言，但是极客的语言经常以一种丑陋的方式来拒绝人。我们能做的更好。

我是个前端架构师，如何向团队传授OOCSS？

作为架构师，你应该写结构对象；圆角如何创建，为角或其他特性放置表象元素，并处理浏览器差异。新手为这些模块写皮肤（borders, colors, background images, 等等）。

我用OO-CSS方式创建了大批站点（千级的页面，百万级的访问者）。正确的完成后，很好扩展，这意味着新手将处理的个别元件可预见性很强。代码审阅很容易，因为有可接受的方法明确的规则来扩展对象。这种回馈使新开发者快速生产。

我在FullSIX（一个法国的网络营销机构）管理一个前端开发团队，是我工作过的最有才能的。某些时候我们的成功意味着我们将会有更多难以把控的工作。雇佣前端专家非常困难（没有这种学校！），所以我开始对一些对写代码有兴趣的设计师（很少或没有经验）推行一个内部实习项目，一个月就可以作为团队的初级成员工作。

第一周：学习语义并根据现有的CSS创建HTML。学习创建网页：不需要更多的CSS，HTML语法，多个class，验证，语义，介绍代码审阅等
第二周：创建简单的内容对象（标题，列表等），持续一周。学习CSS语法，怎么扩展对象，颜色，字体百分比，等等
第三周：创建区块的皮肤。边框，颜色，背景图片，基本的布局，sprites。让他们同一个回答过n个问题的资深开发者一起工作，使他们少走弯路，他也应是很好的代码审阅者。
第四周：他们已经是团队的皮肤制作成员了。

他们的代码在一个客户的网站上，同资深开发者写的一样好，或许更好因为他们还未学到一些坏习惯:)

入门：如何使用这些文件？

3个文件，libraries.css (reset 及 fonts 取自 yui), grids.css 及 template.css 已完成，其它的还非常不稳定。

打开template.html并存为新文件
通过扩展相应的对象来改写列的数量及宽度。站点中只需一个模板，即使你有不同列的页面，因为列也是对象。可以把它们当作任意的区域，可能会有0 ~ n 个左列。查阅模板文档可了解更多
用栅格来分割内容区域为小的区块。查阅栅格文档了解更多
添加内容。提示：这也应OO

如何部署在站点上？

注意CSS文件在不断改进中，我会依据接到的反馈进行改变。

我把CSS文件分为了模块，比如栅格和模板。在使用时移除不必要的注释并减少HTTP请求，否则站点会超级慢。这意味着要合并CSS文件为一个稍大的文件。我通过嵌套的注释来组织CSS。最后，作为上线/部署的一部分，用CSS压缩器来移除注释.

可以修改文件，或者用我自己的样式重写吗？

我不会修改grids, template, 或者 libraries。大量测试表明这些已恰到好处。如果要自定义，考虑下面的扩展基本对象。

粉红不是我要的颜色！怎么处理content.css？

获取你会想要修改content.css。去吧，改颜色，字体大小，大小写。只需注意这个文件在快速发展，同时我还没有任何文档来说明如何正确的处理。我会这么做，我保证。

我需要不只6种标题（h1~h6），如何增加？

如果需要不只6中标题样式，通过添加一个新class来扩展标题对象。

.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}

不要这样做：

#mySaleModule h2, #mySaleModule .h2{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}

如何扩展对象？

如果要扩展对象，比如一个160px的左列，而非默认值，你可以再列上增加额外的class。

<div class="leftCol gMail"> ... </div>

如果默认值和扩展的列宽或者页面不适合你的站点，你可以扩展列来实现自定义的宽度。

列

myColumn 扩展列对象来实现自定义列宽。

.myColumn{width:400px;}

HTML

<div class="leftCol myColumn"> ... </div>

不要通过重写我的class来实现，而应扩展此框架提供的对象。我提供了列，标题及其他对象。你可以通过增加另外的class（只指定与我的基本对象的不同点）来扩展这些对象。相对而言此处混合比较好。

不要这样做（因为更新我的框架时会有些麻烦）：

.leftCol{… 此处自定义CSS …}

没有用到的样式。我的站点没有160px的gmail式的列，可以移除吗？

当然。移除对象或扩展对象非常合理。只需注意在站点发展时，很难预料到其他人用你的CSS创建的什么样的HTML。过早优化很危险。

为什么有一个单独的模板？

在OOCSS中，一个重要的目标是所有的页面创建自一个模板。这简化了CMS开发，因为有一个单独的起始点所有页面可以制作为其他的页面。CMS的用户不会落入已创建的页面不能变种为不同的页面类型的陷阱。OO模板的另一个目标是每一个section（列，header等）控制自己。实际上，这意味着如果要在模板上增加一个左列，只需在HTML中增加此列。你从来不想这样写CSS吧，为了使子元素满足表现而DOM树需要很多改变。对CMS开发来说DOM循环相当的昂贵。

这有语义吗？我要终止像 .formYellow 或 tinyBlueH2 的class命名吗？

OOCSS可以写得有语义也可无语义，取决于你创建模块时用 errorMod 而非 bigRedModule。我选择class名优一些原则（排名不分先后）：

短 - 每一字节计算起来，所以尽可能保持class短
清晰 - 可预料的行为/样式要显而易见
语义化 - 对象是什么高过看起来像什么。如何用在站点中？
通用 - 名称应该适用于多数站点。过于特殊的名称减少了适用场合或导致语义化的class以非语义化的方式使用
屏幕 - 移动阅读器或打印样式或许有不同的视图，会重写默认的屏幕视图，所以当有冲突时class为屏幕而特殊定义（Different views might be provided by mobile or print stylesheets, however they override the default screen view, so the classes chosen are screen specific when there was a conflict）。这简化了开发。

其它的框架如何？这只能同YUI一起使用吗？

在大量框架的生态系统中，YUI是专业性及可扩展性的一例。我同他们进行了对比，因为我不断受到他们代码和文档的影响。OOCSS不是一个真正意义上的框架，尽管我创建了很多例子，而是一种书写可扩展，健壮，可维护性强的CSS的一种方式。也许最好的比喻是一个新的语言。最终，它是未知的JavaScript库（it is JavaScript library agnostic），我希望贡献代码回YUI及其他框架。

CSS框架太超过！我需要从头开始编写所有代码吗?

每需要一个随机数字都要写一个数字class吗？

CSS is hard, not because it is broken , but because it is a legitimate technology requiring expertise to architect correctly. 为每个站点重复发明轮子非常的愚蠢。

源文件中右列在主列之前，会影响可访问性，SEO吗？

我早期工作过的站点有更标准的模板结构，body上有一个极好的class，依靠这个模板显示或隐藏左右列。自定义CMS的用户要创建一个3列布局的页面时非常沮丧，发现需要两列，找到它们不得不一个个从头开始，因为有多个模板/起始点。你或许注意到主列是个流体列，在左右两列渲染后自适应剩余的空间。

我更喜欢标签排序胜过视觉排序（因为如果标签顺序改变会变得非常怪异），但是我也只想要一个模板。在web开发中经常遇到的是，两个重要的目标发生了冲突，我做判断如何解决。这种情况下标签排序满足视觉顺序除了右列。在当前的代码中，只需在HTML增加一个左或右列，没有别处昂贵的DOM变化。

屏幕阅读器用户有两个选择：

跳过链接
导航链接经常为一个链接列表或嵌套的链接列表形式。这非常有趣，因为这允许屏幕阅读者通过屏幕阅读器的特殊操作设置跳过整个列表。

我的意见是对于跳过菜单这两种方式足够了。

每个人似乎都有一个回复观点：SEO，它们都不同，甚至相反。:)基于这个思潮，我倾向于：尤其对含有一定合理数量链接的导航菜单，不用太过在意。曾几何时，我看到过导航链接被索引在搜索结果的内容部分，不过是在几年前了。搜索爬虫非常智能，我已经准备好想当然的认为如果我以语义化，干净的方式标记内容，并非填充一坨垃圾链接，爬虫能区分的出来。

把导航菜单标记为列表，允许屏幕阅读器用户跳过，并提供“跳至内容”链接，对可访问性提供了双倍的备用措施。

为什么用了_ hack？我能把这些代码放在单独的文件中吗？或者添加IE专有的class？

很显然，首先考虑的是尽可能少和长远。

添加一个单独的样式表奖增加一个额外的HTTP请求，增加整体文件的大小，这早已是浏览器性能的对立点
我喜欢把一个对象的代码放在一个地方。我认为这有助于减少hack的数量，尤其是当项目随时间而发展
IE6-的开发工具非常原始，这使得hack和普通代码放在一起更加重要。我想能尽快找到一个可以使用属性的IE bug。同样，我认为这有助于减少hack
规则表明浏览器理解不了的属性会被忽略。对IE6-使用_早已众所周知，可以合理的预料好的浏览器将会忽略这个属性
使用条件注释意味着每个HTML页面必须包含一个IE专用样式。某一天（我不能等了！）当IE6的市场份额下降至像IE5那样低时，我将去除这些代码，但最后我要做的是触及百级或千级的HTML页面。我宁愿只有依赖CSS hack的CSS，而不是把它放在HTML中。不幸的是，恕我直言，IE6兼容性的末日比我们期望的要更加长远，因为IE中的quirksmode会回落到IE5.5的模式

我认为我的选择有助于减少hack的总体数量，提升性能，并只有忽略不计的风险。话说回来，如果觉得代码中的_令你作呕，你完全可以移至单独的文件。

为了添加表象效果比如边框而使用空 <b> 标签容器对象，会给屏幕阅读器用户带来问题吗？

不会，幸运的是屏幕阅读器会忽略空的b标签。使用这个表象标签（b是加粗）来实现表象具有优势。这个标签可以通过服务器端脚本包含，以至于有一天所有的CSS圆角和阴影都支持了，可以关闭脚本并拥有漂亮，干净，语义化的HTML。

OOCSS声称避免位置依赖的样式。是否意味着我不能使用类似 .myModule .title 的派生选择器？

不使用派生选择器没什么阻碍，只是把它们放在更高的DOM树而已。避免在body或页面中最外层的div放置wide-net class或id，然后对对象产生的变量写大量的样式。这不能复用，同时会使页面渲染变慢。相反，通过直接在对象上添加一个class来增加一个多余的“local”变量（并对其子元素写派生样式）。

一个好的经验是一个容器主体（body of a container）内的任意元素显然是一个单独的对象。

这无可厚非，因为UL显然是一个单独的对象：

#sidebar ul { ... }

因此，carousel显然不是body对象的一部分：

body.browseProducts .carousel

这是适当的层叠应用，因为子节点真正的是较大的父对象的一部分。b（角）和inner显然隶属于moudle，它们不能独立存在：

.myModule { ... }
.myModule b { ... }
.myModule .inner { ... }

如何贡献？

最好的方法是涉足其中，开始使用代码（libraries, grids, fonts）并提交 bug 报告及功能需求。我建了一个 OOCSS google group 来进行超过140个twitter字符的讨论。

译注：

OOCSS的官方站点为 http://oocss.org/，有一些例子及下载等。

IE 6&7 z-index bug

2009-10-24T13:25:00.000+08:00

很老的 bug了，详细描述看下面几篇文章吧：

文中给出的方法简单明了，不过有时页面比较复杂，只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了 JS 框架则更加简单。《Fixing IE z-index》分别给出了 jQuery 和 MooTools 版本，下面是 jQuery 版本的代码：

$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});

DEMO 在此

[转发]跨国公司招聘

2009-10-21T22:07:00.001+08:00

未验证，自己碰运气吧，好像不错( ^_^ )

http://www.carryquote.com/

Job Description

Job Title: Web Developer

Job Location: Shenzhen

Position Requirements/Qualification:

University degree or college diploma

Fluent knowledge of xHTML, CSS and JavaScript

Fluent knowledge of classic ASP (VBScript), specifically integration with MS SQL Server via ADO

Knowledge of AJAX is a plus

Good knowledge on making websites

Able to speak and write English

Immediately availability would be preferred

Goblin

Tel　0755-82714350

E-MAIL shuang.zhang@51job.com

Web 开发哲学

2009-10-03T18:58:00.003+08:00

from Object Oriented CSS

[翻译]Object Oriented CSS

2009-10-03T18:43:00.014+08:00

什么是面向对象的 CSS

框架？工具？哲学？

Object-oriented CSS is a coding paradigm that styles "objects" or "modules"—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

很像语言的进化

令 CSS 更强大

有什么不同？

ul{...}
ul li{...}
ul li a(②但是，结构在这里){①直至现在，我们只关心这里}

CSS 大约 2005

意大利面条

CSS 大约 2008

稍微好一点

而不是使我们的代码变好

我们筑了大栅栏

性能呢？

公认的毒药中心

网站变慢

文件大小和 HTTP 请求未作优化

CSS 大约 2009

面向对象的CSS

性能的最佳实践、可扩展性、和最重要的-容易使用

创建对象而不是页面或模块
在内容对象上设置好的公用默认值
抽象重用元素
分离结构和皮肤(为两个 class)
分离容器和内容(开放的编辑区)
使用继承
对看起来 OO 的应用多个 class

9条最佳实践

组件库：可重用和冗余
一致性：避免位置依赖(location-dependent)的样式
抽象化
优化图像和 sprites
灵活
学会爱栅格
避免非标准的浏览器字体
避免高度对齐(alignment)
谨慎卖弄你的技术(choose your bling carefully)

9个陷阱

位置依赖的样式
避免指定一个 class 的标签
避免用 ID 定义主内容区域内的样式
避免不规则背景上阴影和圆角
不要拼合所有图片(触发只有少数几个页面)
避免高度对齐
文字就是文字，不要做成图片
冗余
避免过早优化

创建组件库

可重用的“乐高积木”

重用元素使得它们

性能“免费”

组件就像乐高积木

组合并匹配来创建不同的和有趣的页面

从组件库创建 HTML

新的页面一般不需要额外的 CSS

标题

根据你需要的语义来完成你想要的表现

列表

必须对页面中的所有模块可用

SIDE-WIDE LOGES

标题
列表(比如 action list, external link list, product list, 或 feature list)
模块 headers 和 footers
栅格
按钮
圆角 boxes
Tabs, Carousel, toggle blocks

避免重复

在不能增加价值的元件上浪费性能资源

近似相同的模块

h3 和 h5 太相似了

经验法则：

如果一个页面中的两个模块看起来太相似，它们在一个站点中太相似，选择一个！

例子

Yahoo! 个人财经

2+不同的 tab 风格。能用相同的图像吗？

3个元件的轮廓太相似了。选择一个。

模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。

避免位置依赖(location-dependent)的样式

沙盒比意大利面条好，不过引起了性能问题

避免什么？

运行区域

不时...

返回直径

破坏

在 CSS 中我们一直这么做

破坏

不好的：

#weatherModule h3{color:red;}
#tabs h3{color:blue;}

h3 的全局颜色未定义，将导致
- 在新模块中没有定义样式
- 开发者被迫为相同的样式写更多 CSS

推荐：

h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue;}

定义了全局颜色(更好！)
Weather 和 tabs 覆盖了缺省的 h3
- h3 的3种样式在同一模块中不能并存
- 缺省样式不能用在 weather 和 tabs 除非有更高的优先级
Weather 和 tabs 的 h3 永远不能在其他模块中使用

一致性

写更多规则去重写之前的疯狂规则。

比如标题在任意模块的表现是可预见的。

用这个来代替

h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}

定义全局值
遵循语义(同时允许灵活的视觉)

需要超过6个标题？

真的吗？没有重复？没有相似的？

仍然需要更多标题？

.category{...}
.section{...}
.product{...}
.prediction{...}

通过对象本身的 class 扩展标题对象
避免使用继承来改变嵌套对象的表现

抽象

复用代码段

重复编码

是抽象不同水准的语义失败所导致的

分离：

容器和内容
结构和皮肤
轮廓和背景
对象和混合物

分离容器和内容

定义每个对象的界限

开放的编辑区

图像或 flash

混合与匹配

容器和内容对象达到高性能设计

分离轮廓和背景

内部透明！

MAKING IT LOOK FAB

需要小心选择像素

考虑 PNG8 来渐进增强

陷阱

可变的或渐变背景

提防圆角后的可变或渐变背景

分离结构和皮肤

两个单独的 class

示例：模块

结构

Sloves borwser bugs, positions presentational elems, and generally does the heavy lifting of CSS

皮肤

弄漂亮些。

目标是非常明确的皮肤，复杂的被结构对象和跨网站共享所吸收(The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site)。

/* ----- simple (extends mod) ----- */
.simple .inner{
  border:1px solid gray;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
.simple b{
  *background-image:url(skin/mod/corners.png);
}

什么属于皮肤？

皮肤的每个值应该是确定的，容易预测并测量。

颜色
边框
图像

灵活性

可延长的高度和宽度

固定尺寸

Limit the ways in which a module can be resued

学着爱上栅格

坚信其会很美

传授 OO CSS

给设计师和工程师

自然改进

从简单到复杂的任务

一个真实案例

Gonzalo Cordero Yahoo! 前端开发工程师

需要考虑的设计因素

跨浏览器兼容
多语言支持
可访问性
按时完成全部布局和功能

困惑

WEB 妥协

为什么“简单的东东”变复杂？
为什么要妥协？
为什么我们不能依固定的规则和结构？像讲台上那样？

OOCSS SAVES THE DAY

单个简单的标签结构
跨浏览器支持(甚至 IE 5.5！)
非常少的 CSS
可剥离的，容易应用在多个设计上

译注

这不仅仅是 OOCSS！

本文内容来源于：

由 ytzong 翻译整理，算是把 Yahoo! 女性能工程师 Nicole Sullivan 给“榨干”了，嘿嘿。另外，之前的《驯服CSS选择器》也是她的作品，富含 OOCSS 的思想。

[翻译]加速 JavaScript：处理 DOM

2009-10-02T17:06:00.004+08:00

原文：Speeding up JavaScript: Working with the DOM
作者：KeeKim Heng, Google 页面工程师
翻译：ytzong

当制作 RIA(Rich Internet Application) 时，我们使用 JavaScript 来改变或增加元素。这是靠 DOM (Document Object Model 文档对象模型) 来完成的，这是如何影响 app 的速度呢？

处理 DOM 会使浏览器 reflow (浏览器决定如何显示东东的进程)。直接操作 DOM，改变元素的 CSS 样式，改变浏览器窗口的大小会触发 reflow。访问元素的布局属性(如 offsetHeight 和 offsetWidth) 会触发 reflow。由于每次 reflow 需要时间，所有我们能减少 reflow 越多，app 越快。

处理 DOM 不仅操作页面中存在的元素还包括创建的元素。下面四个部分覆盖了 DOM 操作和 DOM generation，减少浏览器中 reflow 触发的次数。

CSS class 切换 DOM 操作

这个部分我们改变一个元素和它后代的多个样式属性，只触发一次回流。

问题

我们写一个函数来改变一个元素中的所有链接的 className 属性。可以通过简单遍历每个 a 并更新他们的 className 属性。

function selectAnchor(element) {
  element.style.fontWeight = 'bold';
  element.style.textDecoration = 'none';
  element.style.color = '#000';
}

解决方法

我们可以增加一个设置所有样式属性的 class 来解决这个问题。通过给元素增加这个class，现在我们只触发一次浏览器 reflow。同时分离了表现和行为(译注：这个在我之前的《body标签class属性的妙用(Google Reader前端简单分析)》中也有提及)

.selectedAnchor {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

function selectAnchor(element) {
  element.className = 'selectedAnchor';
}

Out-of-the-flow DOM 操作

这个部分我们创建多个元素并把它们插入 DOM 只触发一次 reflow。使用了叫做 DocumentFragment 的东东。我们在 DOM 外创建一个 DocumentFragment (所以是 out-of-the-flow)。之后创建并添加进多个元素。最后，我们移动该 DocumentFragment 中的所有元素到 DOM，这只触发一次 reflow。

问题

让我们写一个改变一个元素中所遇链接的 className 属性的函数。通过简单的遍历每个 a 并更新他们的 href 属性。问题在于，每个 a 会触发一次 reflow。

function updateAllAnchors(element, anchorClass) {
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
}

解决方法

解决这个问题，可以从 DOM 中移除元素，更新所有链接，之后插入回元素到原始位置。为此，我们写一个可复用的函数，不仅从 DOM中移除元素，并且返回一个将会插入回元素至元素位置的函数。

/**
 * Remove an element and provide a function that inserts it into its original position
 * @param element {Element} The element to be temporarily removed
 * @return {Function} A function that inserts the element into its original position
 **/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element, nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}

现在我们用这个函数去更新一个元素中的所有链接，这 out-of-the-flow，并且在移除元素时和插入元素时只触发一次 reflow。

function updateAllAnchors(element, anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}

单个元素的 DOM Generation

这个部分我们创建并添加一个元素至 DOM 中，仅触发一次 reflow。创建元素后，在新元素添加至 DOM 前做好所有的改变。

问题

写一个添加新a 元素至父元素的函数。这个函数让你为该链接提供 class 和文本。我们可以创建元素，添加进 DOM，之后设置这些属性。这触发3次 reflow。

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  parentElement.appendChild(element);
  element.innerHTML = anchorText;
  element.className = anchorClass;
}

解决方法

最后插入这个子节点至 DOM。这触发一次 reflow。

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  element.innerHTML = anchorText;
  element.className = anchorClass;
  parentElement.appendChild(element);
}

尽管如此，如果我们要添加大量的链接至一个元素时这有一些问题。通过这个方法，每添加一个链接触发一次 reflow。下一部分解决这个问题。

DocumentFragment DOM Generation

这个部分，我们创建多个元素并把它们插入 DOM 触发一次 reflow。使用了一个叫做 DocumentFragment 的东东。我们在 DOM 外创建一个 DocumentFragment (所以是 out-of-the-flow)。之后创建并添加多个元素进来。最后，把所有 DocumentFragment 中的元素移至 DOM 并只触发一次 reflow。

问题

写一个添加10个连接至一个元素的函数。如果只是简单的添加每个新链接至这个元素，会触发10次 reflow。

function addAnchors(element) {
  var anchor;
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    element.appendChild(anchor);
  }
}

解决方法

为了解决这个问题，我们创建一个 DocumentFragment 并添加每个新链接至此。当我们使用appendChild 添加 DocumentFragment 至元素时，所有 DocumentFragment 的子节点实际上添加进了这个元素中。这只触发一次 reflow。

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}

[翻译]用Page Speed Activity捕获并分析浏览器渲染

2009-10-02T15:47:00.005+08:00

原文：Capturing and analyzing browser paint events using Page Speed Activity
作者：Bryan McQuade, 软件工程师
翻译：ytzong

安装

Page Speed 是一个 Firebug/Firefox 扩展，安装地址：http://code.google.com/speed/page-speed/download.html

背景：逐步呈现

快速的网页逐步呈现。即随浏览器的加载而逐步显示其内容。一个逐步呈现的页面给浏览者页面在加载的视觉回馈，并尽快给给用户请求信息。Google 和 Yahoo 都建议逐步呈现页面，比如把 CSS 写在页面 head 中。

对多绝大多数页面来说，有一些很好的实践来优化逐步呈现。一个快速的页面应该先给用户呈现可见的内容(译注：浏览器第一屏)，随后呈现视线外的内容(即当前滚动区域外的内容)。一个快速的页面会在加载和渲染重量级的资源(如图片和视频)之前加载和渲染轻量级的资源(如文字)。

一些众所周知的技术会禁止逐步呈现。使用大量表格，甚至用来布局，在一些浏览器中会使逐步呈现失效。应用样式表在页面后方，即便这些样式表在开始的页面加载中使用不到，也会阻止逐步呈现。

用Page Speed Activity捕获浏览器渲染

很难决定一个页面是否要进行逐步呈现优化。大多数页面对肉眼来说呈现太快，以至于意识不到个别的渲染事件(尤其是在高速网络连接下)，而且看不到屏幕区域外的内容是否呈现了。

幸运的是，Firefox 3.5 支持捕获浏览器渲染事件。Page Speed Activity 面板用这个功能可为页面呈现过程录制一个“幻灯片”。幻灯片的每一单元显示了哪一个屏幕区域被渲染(黄色)，哪些区域在屏幕外(灰色)用户看不到。

启用渲染快照

由于捕获渲染快照会增加一些开销并拖慢浏览器，Page Speed Activity 屏幕快照默认是禁用的。启用渲染快照，确保Activity 下拉菜单中的 "Paint Snapshots (slow)" 被选中。

Activity 面板中的渲染快照

一旦渲染快照启用，就开始用 Activity 面板录制。Activity 面板将在时间线上显示网络，缓存，和 JavaScript 事件。渲染快照幻灯片出在 Activity 面板右侧。渲染快照会按捕获顺序绘制，最早的快照在顶部。拖动右侧的滚动条可看到所有的快照。

快照回放示例

译注：请到这里看演示

在这个例子中，我们可以看到以渲染快照慢动作回放的 Google 搜索结果页面的逐步呈现。这些快照用 modem 连接捕获。

用 Page Speed Activity 回放这个例子的渲染快照，请点击 Play Paint Events按钮。

在快照中，用户可见的区域为白色，用户不看见的区域(当前浏览器滚动区域之外)用灰色遮罩。每个快照用黄色遮罩显示重绘区域。

请注意，可见区域的文本内容首先呈现，之后是屏幕外的文本内容。通过先呈现屏幕内的可见区域，用户尽早获取了尽可能多的有用信息。

文本内容呈现后，图像内容接着呈现。推迟图像内容呈现直到文本内容下载完成并呈现完成，这使得浏览器尽早的显示文本内容，再一次尽早给用户尽可能多的有用信息。

在页面标签中给所有图像指定宽度和高度属性，浏览器不需在图像加载后 reflow 页面。尽管没有严格的与逐步呈现有关，指定图像的宽高会带来更好的用户体验，在页面加载时页面内容不会在附近移动。

最后，注意图像自身的逐渐呈现。允许用户在全部图像完成加载前看到图像内容。现代浏览器在 HTML 中用 <img> 标签逐步呈现图像。相反，许多浏览器中用 CSS 的background-image 属性不会逐步呈现。为了逐步呈现图像，用 HTML 的 <img> 标签来代替 CSS 的 background-image 属性。

总结

使用 Page Speed Activity 面板的渲染快照功能，我们可以清晰的观察页面的逐步呈现行为。这使得网页开发者可以为逐步呈现而优化页面，这是快速网页非常重要的特性之一。

用 HTML 5 来提升性能

2009-10-02T13:25:00.002+08:00

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及，新增的部分为async (和 defer)，以下为该段的翻译：

async 和 defer 使用在 script 元素上。

要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 -- 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。

新的 async 属性允许各自的脚本在可用时异步执行。HTML 4 中已经包含 defer 属性，指出 defer “对用户代理提供一个暗示：脚本不产生任何文档内容(比如，在 Javascript 中没有 document.write )，这样，用户代理会继续解析并渲染”。

如果不使用 async 属性而只使用 defer，脚本在页面解析完成时已经执行。即使指定了 async 属性，也可同时指定defer 属性。这使得那些旧的只理解 defer 的浏览器来回退 defer 行为而非默认的同步阻塞行为。

[翻译]驯服CSS选择器--健壮我们的样式表

2009-10-01T01:09:00.008+08:00

PPT:Taming CSS Selectors
作者：Nicole Sullivan
翻译：ytzong

CSS 文件的大小和所引起的 HTTP 的请求数

是 CSS 性能的最关键因素

回流(reflow)和渲染时间

(非常！)没那么重要

副本(duplication)比陈旧的规则(stale rules)更糟糕

因为我们有工具处理后者

定义缺省值

不要在每处都重复编码

不好的：

#weatherModule h3{color:red;}
#tabs h3{color:blue;}

推荐：

h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}

用单独的 class 来定义结构

不要在每处都重复编码

使用 class

而不是元素选择器

不好的：

div.error{...}

推荐：

.error{绝大多数代码写在这里}
div.error{单独定义}
p.error{单独定义}
em.error{单独定义}

避免使用元素选择器

初始化除外

不好的：

div{...}
ul{...}
p{...}

推荐：

.error{...}
.section{...}
.products{...}

给规则同样的权重

使用级联去重写先前的规则

不好的：

.myModule .inner b{...}
.myModule2 b{...}

推荐：

.myModule b{...}
.myModule2 b{...}

保守的使用 hack

不好的：

.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd{...}

推荐：

.mod .hd{color:red;_zoom:1;}
.weatherMod .hd{...}

译注：此点来自The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009第96P，为作者在 Ajax Experience 2009 上所做的补充。

避免指定位置

应用 class 在你想要改变的对象上

不好的：

.sidebar ul{...}
.header ul{...}

推荐：

.mainNav{...}
.subNav{...}

避免太过特别的 class

它们是都有语义的，而且有限制

不好的：

.ducatiMonster620{...}
.nicolesDucatiMonster620{...}

推荐：

.vehicle{...}
.motorcycle{...}

避免单独的定义

id 在每个页面只能使用一次

不好的：

#myUniqueIdentifier{...}
#myUniqueIdentifier2{...}

混合使用

避免重复编码

封装

不要直接访问对象的子节点

不好的：

.inner{...}
.tr{...}
.bl{...}

推荐：

.weatherMod .inner{...}
.weatherMod .tr{...}
.weatherMod .bl{...}

IE6 绝对定位元素的 1px 间距 bug

2009-09-27T15:01:00.005+08:00

IE6- 有一个非常讨厌的 bug，当绝对定位元素的父元素高或宽为奇数时，bottom 和 right 会获取错误。

HTML

<div class="outer height199">
 <p>This container has a height of 199px and width of 199px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>
<div class="outer height200">
 <p>This container has a height of 200px and width of 200px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>

CSS

.outer{
 width:200px;
 background:red;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}

.inner,.inner2{
 width:30px;
 height:30px;
 position:absolute;
 background:blue;
}
.inner{
 bottom:0;
 left:0;
}
.inner2{
 top:0;
 right:0;

}
p{clear:both;margin:0 40px 1em 5px}

可以看出在奇数容器下出现了1px 间距，而在偶数容器下正常。

不完美的解决方法：改变结构并使用浮动

HTML

<div class="fix">
 <div class="outer height199">
  <div class="inner2">img</div>
  <p>This container has a height of 199px</p>
 </div>
 <div class="inner">img</div>
</div>
<div class="fix">
 <div class="outer height200">
  <div class="inner2">img</div>
  <p>This container has a height of 200px</p>
 </div>
 <div class="inner">img</div>
</div>

CSS

.fix {
 width:200px;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
 clear:both;
 margin-top:-30px;
 position:relative;
 float:left;
}
.fix .inner2{float:right;position:static}

ytzong 简译自《IE6 1px gap on absolute elements》

[翻译]重(zhòng)载下的动态 UI 设计技巧

2009-09-24T00:13:00.007+08:00

TechTarget 主办的 Ajax Experience 2009 大会9月14日至16日在波士顿举行，业内大牛纷纷向 Web2.0 世界发起挑战，探讨一些诸如用户体验、高性能与可维护性、架构等伟大主题，放出的 PPT 在此。

下面是 Patrick Lightbody 分享的后半段总结翻译(前半段为演示)：

PPT：Design Tips for Dynamic UIs Under Heavy Load
作者：Patrick Lightbody
翻译：ytzong

为失败而设计

不要忘记 AJAX 仍为网络应用
- 网络会由于各种原因失败
- 网络不可预知
为 AJAX 请求意外添加 Hook
- 为存储请求状态及重试而编码
为失败而测试

谨慎对待 DOM

非必要时不要改变 DOM 状态
- Avoid aggressive “synchronization” common in some AJAX toolkits

合并数据而非替换
- 页面局部加载(div.innerHtml=...)也不是很好
- 会带来更多工作，但是运行不畅时会有更好的体验

锁住 UI

不要给用户机会去改变那些可能由你来改变的事情
- 比如提交后禁用按钮
- 如有必要，使用模拟的对话框来锁住整个 UI
请记住：要有恢复措施！
- 为失败而测试并确保发生意外时 UI 解锁

告知用户

始终让用户知道正在发生什么
当发生糟糕的错误时给他们一个完美的“逃生舱”
- 为逃生舱设置入口
- Gmail 是个很好的案例
至少，有个简单的"loading"指示器

最好的前端工作流程？

2009-09-23T22:22:00.002+08:00

from Best front-end workflow within a production team?

使用 background:url(#) 解决 IE6&7 bug

2009-09-08T17:23:00.004+08:00

通过设置selector{background:url(#)}可以解决一些IE6&7 bug：

鼠标滚轮失效bug，demo。当时用的是添加背景色的方法：
```
#works{background:#fff}
```
也可通过下面方法解决：
```
#works{background:url(#)}
```
a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击，demo
```
a{background:none}
```
解决方法(demo)：
```
a{background:url(#);/*或指向透明的gif*/}
```
详见 No Transparency Click Bug
a 局部点击bug，demo。解决方法(demo)：
```
a{background:url(#)}
```
或：
```
a{background: #fff}
```
详见：Partial Click Bug v2

CssOptimizer1.0 发布

2009-09-01T14:53:00.001+08:00

抽空将刚到公司时写的 CSS 压缩工具由 web 版移植为了离线版(这也是我的第一个 WinForm 程序)，操作同 PngOptimizer(也许要翻墙) 类似，将要压缩的 CSS 文件拖拽至程序窗口即可，之后会生成压缩后的文件并建立副本。

压缩原理如下：

删除换行符
删除}前的分号
删除注释

最好配合 Microsoft Expression Web 使用：

EW进行如下设置：进入工具菜单 - 网页编辑器选项 - 代码格式选项卡，将 CSS 下拉框中所有项的格式都设置为“行前：0”，“行后：0”，“空格后：0”
用 EW 编辑 CSS 时，右键“重设 CSS 格式”即可对代码进行格式化，之后保存
用本工具压缩

注：本程序只能在 Windows 下使用并须安装 .NET framework (EW 自带 3.0)

下载地址：http://www.brsbox.com/filebox/down/fc/922b69797c5cf1a062b7a2415594bd46，下载后解压到任意目录即可

YSlow 规则权重

2009-08-27T16:29:00.001+08:00

from Don't make me wait! or Building High-Performance Web Applications

IE8 CPU 耗费情况

2009-08-27T16:18:00.001+08:00

from A Lap around Windows Internet Explorer 8

webrebuild.ORG第三周年座谈会

2009-08-17T16:55:00.006+08:00

一个深圳地区的WEB标准聚会，详情：http://bbs.blueidea.com/thread-2944698-1-1.html

各位宅男宅女，出洞吧~

IE 团队的前端性能优化建议

2009-08-04T17:38:00.003+08:00

2009-3-18 ~ 2009-3-20，微软面向 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯维加斯举行，本届大会的主题是"The Next Web Now"，关于开发技术和设计怎么更加有效结合起来，服务未来互联网的发展趋势。120多场精彩的课程，3000多来自各国的专家参会。

视频及PPT在此下载，虽然其中多数是微软的产品宣讲，不过也有一些很有价值的分享，比如：

今天主要介绍的是 IE 团队给出的前端性能优化建议，下面是摘要翻译，有兴趣的话可以看下原 PPT

出处：Building High Performance Web Applications and Sites
演讲人：John Hrvatin，Internet Explorer 项目经理
翻译整理：ytzong

中心思想：

适用于所有浏览器
没有魔术般的解决方案
考虑可维护性

Top 100 sites IE8 CPU 使用情况：

84% - 布局，渲染，格式化...
16% - JScript & DOM

Top AJAX sites IE8 CPU 使用情况：

67% - 布局，渲染，格式化...
33% - JScript & DOM

从以下4个方面来进行优化：

CSS 性能：
- 尽量减少样式
  - 未用到的样式增加了下载量
  - 浏览器必须解析并匹配所有选择器
    - 失败代价很高！
- 简化选择器
  - 复合的元素选择器会慢
  - 尽可能
    - 使用 class 或 ID 选择器
    - 元素选择器尽可能简单
    - 使用子(child)选择器代替后代(descendent)选择器
    - 不要混用 RTL 和 LTR
  - 减少样式使这一切变得简单
  DEMO：
  
  差：
```
table tr td ul li {color: green;}
```
  好：
```
li#pass {color: green;}
```
  差：
```
ul li {color: purple;}
```
  好：
```
ul > li {color: purple;}
```
- 不要使用 expressions
  - 慢 - 通常被这样评价
  - IE8 标准模式不支持
- 尽量减少页面重新布局
  - 移动内容体验不好
  - 浏览器执行不必要的任务
- 简化!
优化符号解析(Symbol Resolution)(译注：原文更详细)
- Watch for expensive name lookups
- 缓存多次查找的为本地变量
- 当需要时才优化
- 考虑可维护性
JavaScript 代码低效(译注：原文更详细)
- Use the native JSON object
- Turn large switch statements into lookups
- Avoid property access methods
- Minimize DOM interaction
- Use querySelectorAll for groups
- 当需要时才优化
- 考虑可维护性

HTTP 性能：

典型的访问

从服务端/缓存请求
- JS
- CSS
- 图片
- HTML
浏览器
- 布局
- 执行脚本
- 更多下载

针对此的优化：

不要拉伸图片
分别合并JS/CSS
合并图片(sprites)

重复访问

有条件的 HTTP 请求

简单的 HTTP 请求
```
Pragma:  no-cache
```
时间条件
```
If-modified-since:  date,time
```

请求

GET /images/banner.jpg HTTP/1.1
Host:  www.microsoft.com
If-Modified-Since:
 Wed, 22 Feb 2006 04:15:54 GMT

响应

HTTP/1.1 304 Not Modified
Content-Type:  image/jpeg
Last-Modified: 
 Wed, 22 Feb 2006 04:15:54 GMT

提供缓存内容

时间条件
```
Expires:  date,time
```
```
Max-age:  #seconds
```

请求

GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com

响应

HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires:  Fri, 12 Jun 2009 02:50:50 GMT

请求

GET /images/banner.jpg HTTP/1.1

响应

无响应：从缓存请求服务

要点

减少请求数
- 外联JS/CSS/图片
- 使用缓存
减小请求量
- 使用 HTTP 压缩
- 使用条件请求
- 避免阻塞因素
  - 将 JS 放在 HTML 底部

Firefox 的 Expression Web 3 黑色主题

2009-07-31T22:58:00.002+08:00

折腾了一个 Expression Web 3 主题，如图：

安装方法：

安装 Office 2007 Black主题：https://addons.mozilla.org/zh-CN/firefox/addon/8076
安装 sylish 扩展并重启 firefox：https://addons.mozilla.org/zh-CN/firefox/addon/2108
安装 stylish 脚本：http://userstyles.org/styles/17793

标准模式中的 IE 6&7 width 100% bug

2009-07-28T13:38:00.009+08:00

在 web app 项目中经常遇到这个 bug，国外称之为 100% ≠ 100% bug，又分为两种：

div 的宽度 100% ≠ 100% (IE 6&7)
需求：
1. 标准模式
2. #container 局部滚动
3. #asie 固定宽度
4. #content 自适应宽度
再复杂一点还会要求两列等高，可参考 http://www.99css.com/2009/07/equal-height-columns-with-cross-browser.html

HTML
```
<div id="container">
    <div id="wrapper">
        <div id="content">
            <h2>Content</h2>
        </div>
    </div>
    <div id="aside">
        <h2>Aside</h2>
    </div>
</div>
```
当然，别忘了 DTD 声明，因为这个只存在于标准模式
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
用之前介绍的 HTML5 写法亦可：
```
<!DOCTYPE html>
```
CSS
```
/*简单重置*/
body, div, h2{margin:0;padding:0;}
/*设置颜色，方便区分*/
#container{background:yellow;}
#content{background:#FF8539;}
#aside{background:#B9CAFF;}
/*去除html默认滚动条*/
html{overflow-y:hidden;}
/*关键布局代码*/
#container{height:300px;overflow:auto;}
#wrapper{float:left;width:100%;margin-left:-200px;}
#content{margin-left:200px;}
#aside{float:right;width:200px;}
```
当#content, #aside{height:200px;}时，即高度未超出#container时一切正常

当#content, #aside{height:400px;}时，出现纵向滚动条

正常显示效果如下：

IE 6&7 中 bug 出现：

原因：IE 6&7 滚动条的宽度未算在 100% 中，理想的状况是：#container 的宽度(100%) + #container 滚动条的宽度 = body 的 100%，W3C 对此的定义：

In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.

《 Internet Explorer 100% Width Bug》中给出了思路：
```
element_selector {
width: expression(this.parentNode.offsetHeight >
this.parentNode.scrollHeight ? '100%' :
parseInt(this.parentNode.offsetWidth - XX) + 'px');
}
```
其中 XX 是滚动条的宽度，在 Windows XP 主题下是 17px，Windows 经典主题下稍微小一点，在其他第三方系统主题下有可能是不确定宽度。

根据下图，简单改进一下即可

解决方法
```
#wrapper{#width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
```
当然，写在 js 中亦可，不过要注意不要漏掉 window 的 riseze 事件，另外，window 的 resize 事件在 IE 中有执行多次的 bug
body 的宽度 100% ≠ 100% (仅 IE6)
通常表现为 iframe 出现纵向滚动条时同时出现横向滚动条，简单粗暴的使用body{overflow-x:hidden;}是不负责任的，有时会截断要显示的内容

第一个页面(父页面)
```
<iframe frameborder="0" height="300" scrolling="auto" src="iframe.html" width="500">
```
第二个页面(iframe)

HTML
```
<div></div>
```
CSS
```
body, div{margin:0;padding:0;}
div{background-color:yellow;height:500px;}
```
正常效果

IE6

解决方法(原理同上)
```
body{_width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
```

折腾了这么久，哥累了，哥真的希望 IE 只是个传说

[翻译] gzip 压缩原理

2009-07-24T13:22:00.008+08:00

译注：本打算翻译这篇文章的，搜了一下已经有人翻译过了，不过网站失效，通过快照获取了部分内容，在此基础之上进行了一些修改，感谢 bloglei。

原文：How gzip compression works
作者：Kevin Khaw & Eric Higgins，Google 网站管理员
翻译：bloglei & ytzong

译注：以上是 youtube 视频，请翻墙观看（文中图片调用自 picasa，若显示不了也要翻墙）

浏览器请求有无 gzip 压缩的高级预览

服务器未 gzip：

浏览器：

连接服务器并请求页面。
通知服务器，浏览器支持 gzip “Accept-Encoding: gzip”。

服务器：

不支持 gzip。忽略 gzip 请求。发送未压缩的页面。

浏览器：

接收页面。
显示页面。

服务器 gzip：

浏览器：

连接服务器。
通知服务器，浏览器支持 gzip “Accept-Encoding: gzip”。

服务器：

收到 gzip 支持通知。
发送 gzip 编码过的页面，并设置响应头“Content-Encoding: gzip”。

浏览器：

接收页面。
根据响应头“Content-Encoding: gzip” 解码 gzip 编码过的页面。
显示页面。

如何进行 gzip 压缩

简单的说，gzip 压缩是在一个文本文件中找出类似的字符串，并临时替换他们，使整个文件变小。这种形式的压缩对 web 来说特别适合，因为 HTML 和 CSS 文件通常包含大量的重复字符串，例如空格，标签，及样式定义。

例子

在这个例子中，我将用一小段代码演示 gzip 压缩中用相同的标签跟不同的标签的对比。

在第一段代码中，我用了5个标题标签。

未压缩: 69 bytes

压缩后: 85 bytes (译注：某天77问我怎么压缩后比压缩前还大？我回来后看了下原文并测试了一下，事实如此，并非翻译错)

<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>

把标题标签改为相同的 div 标签，源代码增大了 10 bytes，但是压缩后，它缩小到 66 bytes，比先前的源代码片段还小！

未压缩: 79字节

压缩后: 66 字节

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>

许多开发者可能依此只使用 div 和 span 标签而使页面更大程度的压缩。在多数情况下当然无可非议，但必须注意到正确的语义化标记对可访问性（accessibility）来说非常重要，而且使页面更容易阅读。即便如此，可以使用此方法做一些优化，这取决于你，开发者来决定哪些是合适的。

延伸阅读

Page Speed – Enable gzip compression

沈语录

2009-07-14T11:35:00.001+08:00

俗话说呢没有知识就要有常识没有常识要看电视那万一连电视也没的看的时候呢请多听我开释

勾魂择魄是电眼趋吉避凶要开天眼清理肠胃得要有屁眼带我走过春夏秋冬看破是非黑白是你的眼

拍马屁不是病但拍不好就要人命在这个人际关系非常讲究的年代里面我们宁可拍马屁都不要说坏话放狗屁

所谓人鬼殊途而男女呢是有别女人要ㄋㄞ男人要man 那男人如果要是不man呢就只能把到小甜甜

虽然人家说美就是心中有爱但是告诉你不美是绝对不会有爱的今天的故事告诉我们小时候丑不是丑只要你能够用心减肥精心打扮那么恐龙也能边孔雀丑小鸭也能变天鹅

好男要配好媳美女就要配好腿而带我走过春夏秋冬看破是非黑白你是我的腿

不管是大脸还是小脸就是不要摆臭脸不管是左脸还是右脸就是不要不要脸眼前的黑不是黑你说的白是什么白因为你是我的脸

整人者人恒整之若要人不整除非己莫整整到最高点心中有整整

天有外太空人有内子宫台上一分钟台下他却是要十年功没有三两三怎能上梁山呢奉劝大家没本事那也总得要有一招半式没有个一招半式你只能期待别人出事

若要人温柔除非己温柔温柔可以化解寒冬温柔让你我的心紧紧相依

可爱之人必有可怜之处若要人幼稚除非己幼稚幼到最高点心中有幼幼

人要会说就像狗要会喝会说话让小鸭变天鹅会说话让你成仙成佛会说话让你进天国

大鱼大肉也要青菜配那红花呢也要绿叶来配人在演天在看大家都在看你健康我健康大家都健康

男女呢要和平相处如果男女不能和平相处呢那就是白目如果白目的话呢就不如去喝三鹿三鹿三鹿真恐怖喝了三鹿让你安心上路

美丽的脚指头让你人生走的更宽阔不美丽的脚指头让你人不如狗美丽的脚指头让你人生走的更有把握不美丽的脚指头让你像枯萎的花朵同时像鸟屎一坨

跨界有理无理其实都无所谓也没有意义重点是呢大家活在这个舞台上面呢大家都能成为快乐的大家庭

男谐星也是人他们也会为情所困他们也需要温柔的滋润请保护男谐星关怀男谐星给他们爱情丰富他们的生命

助理助理没有助理就像没有阳光没有小雨没有助理让我们失去快乐失去活力所以请关怀助理让他们有生存下去的勇气

大有大的好但小也有小的妙唐代诗人白居易曾经有一首词就是在讲解这种状况这首词叫做是大胸嘈嘈如急雨小胸切切如私语嘈嘈切切错杂弹大奶小奶落玉盘

要有美丽的素颜必须要有充足的睡眠没有充足的睡眠那就要敢花钱如果没有充足的睡眠又不敢花钱那在家被人嫌出门被人扁到最后弄的自己苦海无边

爱是什么爱一个人是支持而不是支配爱一个人是慰问而不是质问爱一个人是倾诉而不是控诉爱一个人是善意而不是得了疝气爱一个人是甜蜜千万不要动了胎气

睡衣以诱惑男人为目的一定要性感才有魅力千万不能老气不能俗气更不能过气这样男人才会更爱你就像老鼠爱大米

大嫂大嫂没有你们演艺圈会很无聊大嫂大嫂你是台湾的国宝

景气好的时候大家就忙着投资景气不好的时候大家就忙着投胎投胎失败欲哭无人知投资失败赶羚羊XXX 赶羚羊老悲哀

完美不完美我们多虚伪你让我的爱变成一种罪

受欢迎不分美与丑就像白雲云蔡頭只要心中有真爱他日比能修成正果

所谓合理的要求是考验那不合理的要求呢他就是磨练那艺人被欺负呢别埋怨不管是大眼还是小眼终究你是我的眼

救火队最可贵救活队他不会流泪救火队他不会喝醉救活队他半夜不睡救活队他抢救节目不排队

宁可早到也不要迟到那宁可迟到也不要不到那宁可不到也不能连人都找不到那如果连人都找不到那就是你的死期已到

人没有十全十美就好比月有阴晴圆缺人没有十全十美就像狗有白花黄黑人与人之间只要真心相待即便不完美我们还是要向他说声谢谢

[翻译]纯 CSS 无 Hack 跨浏览器的多列等高

2009-07-13T17:46:00.013+08:00

原文：Equal Height Columns with Cross-Browser CSS and No Hacks
作者：Matthew James Taylor
翻译：ytzong

纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。

多列等高的问题

上例中有包含不同内容的 3 列，可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高？或具体的说，如何使所有列的高度等于最高列的高度？这很棘手，因为我们不清楚每列将会多高，哪一列是最高的。不能简单的给所有列一个固定的高度，如果内容很少将会导致页面底部有大片空白；如果内容太多则会在文字显示完全前关闭。两种情形都不妥。实际上，内容的长度是动态的，所以每列的高度也是动态的。必须意识到 Web 上没有固定的东东，乡民们有不同的屏幕分辨率，浏览器中的文字也可能被设置为任意大小，所有这些都会影响内容的高度。

分离列内容与其背景色

解决等高问题的第一步是把能分离的破开。方法是每列用两个 div 替代原来的一个。第一个 div 用来放内容，另一个用来作背景色。分离使我们可以单独控制这些额外的元素，之后用更有效的方法把它们放在一起。答案呼之欲出。

浮动的容器的高度始终取决于其浮动的内容（高度）

这是本文多列等高方法的核心。使一个 div 的高度等于最高列高度的唯一方法是这个 div 包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。

3列 HTML div 结构

上例中 3 个内容列在一个 div 容器中。

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

3 列 CSS

下面是使 div 容器等高于最高列的 CSS。

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

为了让这一结构在所有浏览器中正确工作，容器 div 必须浮动（左或右），同时每一个内容列的 div 也要浮动，哪种方式并不重要。浮动内容 div 的进程使它们在页面中排列在一条水平线上。浮动容器使其自适应到最高列的高度。如果不浮动容器，内容 div 将会从容器底部溢出，容器不会拥有正确的高度。事实上在此例中，容器不浮动的话其最终高度为0。

增加额外嵌套的容器

下一步是增加额外的容器，它们彼此嵌套。我们需要容器的数量等于列的数量：3。这 3 个容器用作各列的背景。请注意，我们去除了原始列的背景色，并将其加至容器上。

3列 HTML div 结构

两个额外的容器加至下面的 HTML 中。

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

3 列 CSS

所有元素左浮动，容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

用相对定位移动容器

现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%，为了显示中间的黄色列 container1 向左移动了40%，与此同时红色部分依然可见作为左侧列。

相对定位的 CSS

下面是添加了相对定位的CSS。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

将每列的内容移回

下一步是把每列的内容移回到页面上，使之排列在下面的背景色上。再次使用简单的相对定位来完成它。

最后在最外面的容器 container3 上添加overflow:hidden，砍去超出容器的部分。

相对定位的 CSS

下面是增加了相对定位和溢出的 CSS 规则。请注意 container3 上额外的position:relative; 这是为了解决一个 IE bug ，阻止overflow:hidden;工作。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

对列增加 padding

最后还需对列增加 padding，这样每列边缘的文字不至于显得拥挤。如果我们增加 padding，一些浏览器中可能正常显示，但不是所有。IE 错误的盒模型，导致其估算拥有 padding 的元素宽度异常。一个 200px 宽 20px padding 的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。padding 应该加在元素的宽度上。凸微软！

不过不用担心...我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的 padding），之后用相对定位把它们移至正确的位置。在我们的例子中我们用了 2% 的 padding，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

好了，就是这样。我希望这篇文章对你有用。可以自己弄一下 CSS 看一下它是如何工作的。你可以搞很多列，只要容器和内容列的数目相等。不要忘记看看我的 demo：2 列， 3 列， 4 列，以及 5 列。

[翻译]界面提示与感知延迟

2009-06-30T14:50:00.010+08:00

原文：UI messaging and perceived latency
作者：Roma Shah，用户体验研究员
翻译：ytzong

对一般的用户而言，速度并不意味着性能。用户对网站速度的感知很大程度上取决于其整体感受，包括他们如何高效的从网站获取所需，以及网站反映出来的易响应性。

当设计 Web 站点或 Web 应用时，谨记用户来你的网站是有目的的。他们能越快（越容易）达到他们的访问目的越好。如果用户在获取内容时遇到了许多困难，他们将会离开你的网站，而去能让他们更快达成目标的其他网站。

节省用户时间，让他们感觉没那么慢有很多工作可以做，本文只涉及提示信息。

提示信息，要考虑三点：

网站是否足够简单和直观，首次访问者是否可以很容易上手？
如果不是，花些时间去设计首次运行经验（first-run-experience）提示。

比方说，你的网站是一个拥有数项功能的强大的 Web 应用。鉴于为此类型的应用程序设计一套直观的“开箱即用”（out-of-the-box ）体验并不是一项容易的事情，用户可能需要一个入门帮助。

首次运行经验简单的为用户说明产品是什么以及/或如何使用其亮点。从长远上看，花一点点时间让用户提前了解产品的一些关键点会给他们节省大量时间。

提示：不要过头！不要阻止用户获取实际内容，这会令首次运行经验变成额外的一步（a cumbersome multi-step process）。
提示信息是否会中断或增加用户操作？
仔细考虑如何显示信息会增加用户的操作流程。在不影响用户操作的情况下可能有更合适的方式去显示提示信息。

想象一个场景，用户完成一个动作，你认为很完美的。你认为需要二次确认（double-checking）的，为了防止用户意外出错。所以你弹出一个提示“你确定这样做吗？”，这阻止了用户的一个大的错误操作，但对于确定要执行这个动作的用户来说，你增加了一个额外的操作。作为替代，你可以运行操作立即执行，同时在操作后增加一个撤消的功能。
等待时如何让用户静心（reassure）
面对现实吧，有些时候用户不得不等待。然而，你可以做一些工作使不可避免的等待时间变得比较好度过（bearable）。

如果用户等待的时间较长，使用进度条。进度条不只表明必须等待，同时粗略的显示要等多久。如果要更详细一点，甚至可以显示已经完成的数据（例如 40kb of 64kb）。尽量避免估算完成时间，因为连接速度波动时，没有什么比看到完成时间一直在增长更郁闷的了。

当用户等待的时间较短时，可以用 loading 指示器。loading 指示器通常是一个旋转变化的小东东（a spinning doo-dad of sorts），但也可以是很简单的文字"loading"。

你也许会问，为什么极短的时间也要显示这些？loading 指示器是给用户的反馈：用户的操作已经通过，网站正在执行。没有指示器的话，用户不确定是否执行，从而可能企图再次尝试。

延伸阅读

这些建议只是为用户设计时需铭记的事项中的冰山一角。下面是一些可以让你入门（get you started）的关于交互设计和 Web 设计原则的资料：

About Face by Cooper, Reimann, Cronin
Bulletproof Web Design by Dan Cederholm
Contextual Design by Beyer and Holtzblatt
Designing the User Interface by Ben Schneiderman and Catherine Plaisant
Interaction Design by Jenny Preece, et al
The Elements of User Experience by Jesse James Garrett

[翻译]减少 reflow

2009-06-29T18:19:00.005+08:00

原文：Minimizing browser reflow
作者：Author: Lindsey Simon
翻译：ytzong

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。

有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小，用 javascript 计算样式（computed styles），在 DOM 中创建删除元素，改变元素的 class 都会触发 reflow。值得注意的是，有些操作会多次触发 reflow，超出你的想象。下图源自 Steve Souders 的演讲 "Even Faster Web Sites"：

从上表可以很明显的看出，在所有浏览器中并非所有 javascript 控制的样式都触发 reflow，即使触发了触发的次数也不尽相同。同时可以看出现代浏览器在控制 reflow 次数方面做的越来越好。

在 Google，我们通过多种方式对我们的页面及 Web 应用测速，同时 reflow 是我们增加 UI 时考虑的一个关键因素。我们致力于传达轻快的（lively），交互性强的（interactive）和令人愉悦的（delightful）的用户体验。

原则

下面是一些减小 reflow 的原则：

减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
尽量减少 CSS 规则，去除未用到的 CSS。
如果做复杂的表现变化，如动画，让它脱离文档流。用绝对定位或 fixed 定位来完成。
避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

在下面的视频中（译注：引用自 youtube，请翻墙），Lindsey 介绍了一些减少 reflow 的方法。

延伸阅读

Mozilla 关于 HTML reflow 的记录（Mozilla's Notes on HTML reflow）
Opera 的重绘和 reflow（Opera's Repaints and reflows）
Satoshi Ueyama 在 Firefox 中调试 reflow 的例子（Satoshi Ueyama's debug-Firefox reflow demos）:
Nicole Sullivan 的关于 reflow 和重绘（Nicole Sullivan on Reflows and Repaints）

[翻译]减小 HTML 文件

2009-06-29T13:48:00.007+08:00

原文：Reducing the file size of HTML documents
作者：Jens Meiert & Kevin Khaw， Google 网站管理员
翻译：ytzong

改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，原文：There are several ways to do this, from rigid compression to acupuncture-like ID and class name changes）。下面是一些我们总结的使 HTML 标记更精简的方法。

译注：上面是引用 youtube 的视频，请翻墙观看。

HTML 4

HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记（感谢一楼的翻译））

</area>

</base>

<body>

</body>

</br>

</col>

</colgroup>

</dd>

</dt>

<head>

</head>

</hr>

<html>

</html>

</img>

</input>

</li>

</link>

</meta>

</option>

</p>

</param>

<tbody>

</tbody>

</td>

</tfoot>

</th>

</thead>

</tr>

比如，你的代码是

<li>List item</li>

可以写为

<li>List item

又比如段落要以

</p>

结尾，你可以只写

<p>My paragraph

甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。

省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。

HTML 5

正在发展中的 HTML 5 提供了一些减小文件大小的方法。

比如，页面文档类型声明

<!DOCTYPE html>

对比

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

很显然 HTML 5 的 DTD 更短。

当为页面指定编码时，HTML 5 很易用而且更短：

<meta charset="utf-8">

代替

<meta http-equiv="content-type" content="text/html; charset=utf-8">

通常情况下，浏览器会正确处理 HTML。

另外，在今天的 HTML 5 中，你可以去除声明 MIME 类型的 type 属性，比如

type="text/css"

或

type="text/javascript"

你可以用

<script>

替代

<script type="text/javascript">

用

<style>

替代

<style type="text/css">

在所有类型的页面中（甚至是 XHTHML）你可以省略

type="text/css"

HTML 5 使这一切变得更简单。

同时使用上面所有的方法会使文件节省 10%-20%（甚至更多），这取决于你的编码风格和页面中的文本内容数量。代码将更干净，访问者会更快的获取网站内容。在隐私中心项目中我们采用很多这类技术，节省了原始文件大小的 20%。

[翻译]谨慎使用 Iframe

2009-06-28T15:37:00.007+08:00

原文：Using Iframes Sparingly
原作者：Steve Souders
翻译：ytzong

使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能：

使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。

iframe 阻塞 onload

window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。

window 的 onload 事件直到它所包含的所有 iframe，以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome 中，用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。

一个连接池

对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+ 和 Opera 9+ 增至4个，Chrome 1+ 、IE 8 及 Firefox 3 增至6个。对比表格详见《并行连接数总结》。

人们可能期望每个 iframe 有单独的连接池，但并非如此。在大多数浏览器中，连接被主页面和它的 iframe 所共享，这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。如果 iframe 中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下 iframe 中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给 iframe 的 src 赋值。

美国的10大网站中有5个使用了 iframe。它们多数用来加载广告。这不是很合适，但可以理解，这是一个简便的在内容中插入广告的途径。在很多情况下，使用 iframe 是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。

谨慎使用 CSS Sprites

2009-06-23T13:31:00.008+08:00

CSS sprites 是网站速度的优化很重要的一环，但也有其对性能的不利之处。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到：

CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例，这里是一张 sprite 图片，1299x15,000 的png，已经经过很好的压缩，实际下载大小只有26K左右，但是浏览器不会转换压缩的图像数据。当图片下载并解压，将耗费75MB内存(1299 * 15000 * 4)。如果图片没有阿尔法透明，可能会减小到1299 * 15000 * 3，可往往还是牺牲了渲染速度。即便如此，我们占用了55MB内存。这张图片绝大部分是空白的，什么都没有，没有什么有用的内容。仅仅因为这张图片，当浏览器只加载WHIT 主页时会增加75+MB内存。

Mozilla Web Development Blog 在《 Use Sprites Wisely》中总结道：

简而言之，即使是很小的 sprite 图片也有可能吃掉大量的系统内存 -- 每个页面50M甚至100M或者更多。速度虽然至关重要，但要意识到 sprite 及其他 hacks 同样会影响用户体验。

现在再回过头看之前的《Yahoo与Gmail的CSS Sprites对比》，综合性能方面 Gmail 无疑占了上风。当然，这些只是前端层面的优化，从根源上来看，设计师用最少的图片来实现最优的效果才是王道。

正如雅虎女工程师 Nicole Sullivan 在 Velocity 2009 大会演讲 PPT 《The Fast And The Fabulous》所提到的：

consistent design = clean code = fast site（一致的设计 = 更干净的代码 = 更快的网站）

[翻译]简化CSS选择器

2009-06-19T16:08:00.009+08:00

原文：Simplifying CSS Selectors
原作者：Steve Souders
翻译：ytzong

本文是《Even Faster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最后一章。上篇帖子《Performance Impact of CSS Selectors》（中文版）最后提出了一段假设：

对大多数网站而言，优化CSS选择器活得的性能提升很小，不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题。

我收到了很多反馈。David Hyatt的文章《Writing Efficient CSS for use in the Mozilla UI》披露：

样式系统渲染一条规则是从最右边开始之后依次向左移动。在你的小子树(subtree)持续检测的时候，样式系统将继续向左侧移动直到它不匹配CSS规则或匹配错误。

由此得出，我们优化工作的重点应该是：匹配大量页面元素的最右侧的CSS选择器。我上篇博文测试的CSS选择器看起来很费性能，但是按这条新观点审视，我们发觉这其实不值得担心，比如：

DIV DIV DIV P A.class0007 {}

这个选择器有5层，看起来很复杂，但是我们来看最右侧的选择器 A.class0007 ，我们发现，在整个页面中需要浏览器逆向匹配的只有一个元素。

优化CSS选择器的关键点在于最右侧的选择器，也叫做key selector (巧合？)。有一个更昂贵的选择器

A.class0007 * {}

尽管这个选择器看起来更简单，但对浏览器匹配而言更昂贵。因为浏览器要从右至左，开始后要检查匹配 * 的所有元素。这意味着浏览器会尝试匹配页面中的所有元素。下图为普通选择器与先前的后代选择器加载时间的对比：

它清晰的反映出一个匹配很多元素的key selector会严重的拖慢页面。其他可能会大量增加浏览器工作的key selector包括：

A.class0007 DIV {}
#id0007 > A {}
.class0007 [href] {}
DIV:first-child {}

不是所有的CSS选择器伤害性能，尽管看起来如此。CSS选择器的关键点在于泛匹配的key selector。这对于含有大量DOM元素、CSS规则，更高 reflow 的Web 2.0应用更加重要。

[翻译]CSS选择器的性能影响

2009-06-19T14:39:00.009+08:00

一些关于CSS选择器性能的讨论引起了我的兴趣。

第一个是Shaun Inman写的《合格的CSS选择器（CSS Qualified Selectors）》，实际上这篇博文并没有提到CSS性能，不过有一个来自David Hyatt(Safari 和 WebKit 的架构师,同时为 Mozilla, Camino, Firefox 工作)的评论：

如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

接下来的一篇博文很神奇。Jon Sykes做了一个系列的文章来测试CSS性能：第一部分, 第二部分, 第三部分，其中第三部分非常值得一读。这使我确信优化CSS选择器是页面性能优化的一个关键步骤。

但是，有两件事一直困扰着我。首先，大量的DOM元素和CSS规则。页面包含60000个DOM元素和20000条CSS规则。这使浏览器非正常的运行（下面将证明这点）。下面的统计表格为美国10大网站的比较：

网站名称	CSS规则	DOM元素
AOL	2289	1628
eBay	305	588
Facebook	2882	1966
Google	92	552
Live Search	376	449
MSN	1038	886
MySpace	932	444
Wikipedia	795	1333
Yahoo!	800	564
YouTube	821	817
平均值	1033	923

第二件困扰我的事情是测试以多大页面为基准？我想解决的问题是：无效率的CSS选择器会拖慢页面吗？所有测试的5个页面包含20000个a元素（嵌套在P, DIV, DIV, DIV内部）（译注：使用同样的HTML页面），不同的是CSS：基准（没有CSS）（译注：下图中的baseline），标签选择器（tag selector )（a标签有一条CSS规则）（译注：下图中的tag），20000个class选择器（class selectors）（译注：下图中的class），20000个子选择器（child selectors）（译注：下图中的child），20000个后代选择器（descendant selectors）（译注：下图中的descendant）。后面3个页面的大小都超过了3M，而基准及标签选择器的页面则只有1.8M。

接下来调整为：

2000个a标签和2000条CSS规则（原先是20000），这实际上有6000个左右的DOM元素，因为a嵌套在P, DIV, DIV, DIV内部
基准页面和标签选择器页面像其他页面一样有2000条CSS规则，不过只有简单的class规则生效，不会影响其他含有class属性的标签

我在12个浏览器上进行了测试。页面呈现时间是用嵌在头部和底部的脚本来测量（所有测试在本地运行）。测试结果如下图（我没有测试Oprea 9.63，你可以下载csv格式的数据，这里是测试页面）：

性能随浏览器而改变；~~奇怪的是，两个新浏览器IE 8 和 Firefox 3.1反而是最慢的~~ 所有测试是在同一台PC机的不同浏览器，不同PC机的不同浏览器可能有不同的性能特点。这个测试的目的不是比较各浏览器的性能，而是为了测试浏览器如何处理逐渐复杂的CSS选择器。

【修订：更深入的比较Firefox 3.0和3.1，我发现这台PC上的Firefox 3.1和IE 8逊于其他PC机。即使再进行测试，也会由于不同PC的硬件差异导致不同的结果，所以，不要用这些数据来比较浏览器。】

毫不意外，越复杂的页面（子选择器和后代选择器）通常性能越差。最大的意外在于第四个页面居然是最差的。所有的浏览器平均慢了50毫秒，观察最大的(IE 6&7, FF3)平均只有20毫秒。对现在70%+的用户来说，改进CSS选择器只能提高20毫秒。

请记住，这些测试接近最坏的情况。20个a标签嵌在P, DIV, DIV, DIV导致总共有6000个DOM元素，这是10大站点中最复杂两个网站（见表一）的两倍大。另外，测试的页面含有2000个极端无效的CSS规则，一般的网站大约有三分之一（译注：网站本身的CSS规则）的子选择器及后代选择器。以Fackbook为例，2882个CSS规则里只有750个极端无效的规则。

为什么我的测试结果和之前其他人的有些不同？一个不同来自于这极其极端。它成倍的放大于我们通常所用的页面。在这种情况下，浏览器面对3M的页面，60000个DOM元素及20000条CSS规则会有不同的表现。我注意到，我的测试结果在IE6&7中非常不同。我想知道IE在处理CSS选择器时是否某个规则。为此我测试了子选择器和后代选择器页面，从1000至20000逐渐增加a标签和CSS规则的数量，结果如下图所示，IE在18000条CSS规则时陡增。但是IE 6&7 渲染页面更接近实际，因为在我的测试中，他们的性能竟然是最高的。

基于这些测试我有以下假设：对大多数网站而言，优化CSS选择器活得的性能提升很小，不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题（offsetWidth, :hover）。

译注：

这是本人的处女翻
并非一字一句的直翻，原则是尽量保留有用的内容
水平有限，难免糟蹋了大师的作品，有疑问请自行到原文查阅

RSS全文Feed集中贴(2009-9-27更新)

2009-06-13T01:01:00.021+08:00

2009-9-28

19楼UED http://feeds2.feedburner.com/19lou

2009-9-27

职场99% http://feeds2.feedburner.com/zhichang99

2009-7-23

The Big Picture http://feeds2.feedburner.com/the-big-picture 由于原始页面中有内联css，导致图片之间有巨大的间隔，请用快捷键空格翻页（知道内联CSS的缺点了吧 *^__^*）

2009-7-15

Alisoft UED http://feeds2.feedburner.com/alisoftued

2009-7-14

阿里巴巴（中文站）用户体验设计部：http://feeds2.feedburner.com/aliued-full
Blueidea Web标准化：http://feeds2.feedburner.com/blueidea-web
CSS Globe：http://feeds2.feedburner.com/css-globe
ChinaZ阿飞：http://feeds2.feedburner.com/1982y

之前的：

网易科技每日一站：http://feeds2.feedburner.com/1site1day
Google 关于网站提速的教程《Let's make the web faster》：http://feeds2.feedburner.com/google-speed
派代网 - 最受关注帖子：http://feeds2.feedburner.com/paidai
cnbeta全文版（图片防盗链，Firefox 用户配合 RefControl 扩展伪装可完美解决）：http://feeds2.feedburner.com/cnbeta-full
Admin5全文版：http://feeds2.feedburner.com/admin5-full
COMSHARP CMS：http://feeds2.feedburner.com/comsharp
念嘬娱乐全文版(只提取第一页)：http://feeds2.feedburner.com/nianzuo-full
煎蛋大图版：http://feeds2.feedburner.com/jandan-full

以后发布的feed集中在此帖更新（删除的话也在写在这里）。

Google Reader的新功能？

2009-06-04T17:18:00.005+08:00

像往常一样使用GR，不过有时会莫名其妙多出一个搜索框，如图：

不过这个表单还用不了，让我们拭目以待！

给博客套了个域名

2009-06-04T10:50:00.004+08:00

Blogger被墙，为了照顾不会翻墙的众粉丝，特套上一闲置已久的域名99css.com(缘自某著名H站99**s)。图片已改为pisaca上的链接，墙内粉丝也可以访问，评论页面目前也很正常。

订阅地址依然是：http://feeds2.feedburner.com/ytzong

已订阅blogspot的话不用更改，blogspot会自动转向

目前还是用Blogger来写，前两天试了下，可以很轻松的将文章及评论转到wordpress，不过习惯股沟的产品了，暂时不会转。

再强调一下：是昨天晚上套的域名，不是今天

折腾下 Chrome

2009-06-01T12:29:00.005+08:00

前言

Chrome 2 开始支持Greasemonkey，Chrome 3 开始支持扩展...离我们换浏览器越来越近了。

自定义用户数据目录

以XP为例，下同

默认位置 C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\User Data

要更换到 E:\Chrome 的话：

在快捷方式上点右键，选属性，切换到快捷方式选项卡，在目标一项中加上 --user-data-dir=e:chrome
形如 "C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --user-data-dir=e:chrome
点击确定
重启Chrome后 E:\Chrome 文件夹中会自动生成相关数据。

自定义升级版本

下载并运行 Google Chrome Channel Changer ，有3个选项可供选择：

stable，稳定版，推荐追求稳定的普通用户使用，更新最慢。
beta，测试版，有一定新功能，但是可能会存在不稳定情况，适合喜欢尝鲜的朋友使用，更新速度一般。
dev，开发版，更新最快，新功能最多，但是可能非常不稳定，适合开发人员使用。

Chrome 2+ 开启Greasemonkey

在快捷方式上点右键，选属性，切换到快捷方式选项卡，在目标一项中加上 --enable-user-scripts
形如 "C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --user-data-dir=e:chrome --enable-user-scripts
点击确定
将你想要的脚步拷到 E:\Chrome\Default\User Scripts 中
重启 Chrome

获取 Greasemonkey 请到 http://userscripts.org/

另外一部分 stylish 也提供用户脚本，比如我写的这个Gmail去广告stylish：http://userstyles.org/styles/15631

Chrome 3+ 开启扩展

在快捷方式上点右键，选属性，切换到快捷方式选项卡，在目标一项中加上 --enable-extensions
形如 "C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --user-data-dir=e:chrome --enable-user-scripts --enable-extensions
点击确定
重启 Chrome

开启后用Chrome打开以下站点，点击安装即可(类似 Firefox) 目前有几下扩展可用：

Gmail Checker：该扩展可以显示你Gmail 里有多少封新邮件点此安装（可能需翻墙）
Subscribe in Google Reader：该扩展可以帮助你订阅站点的RSS 到Google Reader, 已经订阅的站点会显示打勾状态点此安装（可能需翻墙）
AdSweep 一个类似AdBlock的扩展，可以隐藏页面上的广告。它通过JavaScript调整页面的CSS，也可以当做一个用户脚本点此安装
Page Rank for Chrome 显示当前页面的PR值点此安装
Cleeki 类似IE8的加速器点此安装

参考文献：

伪清除浮动一法

2009-05-30T14:29:00.007+08:00

前言：

彪叔一个多月前总结了《清理浮动的全家》,当时看了之后没什么新鲜的东西也就忽略了，今天偶然又翻到那篇文章，想到了另外一个的方法(N久前在书店翻到的)，在网上没看到有人提起过，写出来大家一起讨论下。

HTML：

<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<p>段落</p>

CSS：

ul, li{margin:0;padding:0;}
ul{background-color:yellow;}
li{float:left;list-style-type:none;}
p{clear:both;background-color:red;}

Firefox下效果：

可见，ul的黄色背景并没有显示出来。

重点来了：

在CSS理加上如下代码

ul{float:left;}

效果如下：

缺点：

浮动算是清除成功了，但是宽度没有像display:block那样撑开，需要指定一个宽度：

ul{width:100%;}

总结：

浮动带来的一个问题就是清除浮动，虽然有很多方法来解决，但最根本的解决方法还是不要滥用浮动，比如有些情况下完全可以用

selector{display:inline;}

或

selector{display:inline-block;}

来实现。

Admin5 RSS 全文 Feed

2009-05-10T21:38:00.005+08:00

前言：

作为曾经的站长，im286、chinaz、admin5是经常光顾的网站，3者都有rss（都是摘要，够抠门的），不过admin5的rss更新太慢，很久之前跟图王反映过，当时图王答应弄一弄，等到如今还是没动静（MJJ）。

╮(╯▽╰)╭，求人不如求己，索性自己搞。

Feed地址：http://feeds2.feedburner.com/admin5-full

cnbeta Rss feed 全文输出

2009-05-04T23:50:00.004+08:00

前言：

小众曾介绍过《RSS feed 摘要输出轻松全文》，其中提到的cnbeta全文feed不是很稳定，经常有的文章只有标题没有正文，于是小弟五一抽空做了这个feed。

简介：

该feed目前30分钟更新一次，不适合抢沙发。

已知问题：

CB启用了防盗链，图片无法正常显示（Firefox用户配合RefControl扩展伪装可完美解决）

地址：

http://feeds2.feedburner.com/cnbeta-full

Firefox3的IE8主题

2009-04-25T21:31:00.008+08:00

今天逛了下谋智，找到几个IE8主题：

最大的亮点是侧栏书签可以像IE7/8一样悬浮：

三者之间有微小差异：

1与2的区别在于2的工具栏背景较深（貌似同一人开发）
3与1、2的区别在于3状态栏较朴素，且3不支持标签组颜色

IE 6/7 鼠标滚轮失效Bug

2009-04-23T11:24:00.003+08:00

前言：

万恶的IE总是带给我们“惊喜”，比如滚轮失效。

解决方法：

你可以尝试用以下方法解决：

去除以下代码（IE7下遇到过一次）
```
html{overflow-x:hidden;}
```
在滚动区域加上如下代码（IE6下遇过一次）
```
selcetor{background-color:white;}
```

延伸阅读：

Internet Explorer bug: Broken mouse wheel scrolling Demo

说说display:inline-block

2009-04-16T16:44:00.021+08:00

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok...

基本用法：

inline元素的inline-block：
```
span{displsy:inline-blcok;}
```
block元素的inline-block：
```
div{displsy:inline-blcok;#displsy:inline;#zoom:1;}
```
#开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

代码

格式化对间距的影响：

HTML：
```
<ul>
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
</ul>
```
注意代码的缩进为4个空格

CSS：
```
/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
li{display:inline-block;#display:inline;#zoom:1;padding:1px 5px;border:1px #ccc solid;background-color:black;cursor:pointer;color:white;}
li.current{background-color:#c31909;}
```
以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

可见除IE6/7外的浏览器的li之间有4px的间隔。

HTML将缩进去除则正常：
```
<ul>
<li class="current">1</li><li>2</li><li>3</li>
</ul>
```
以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

由此分析，这4px可理解为一个空格。

当然，我们的HTML代码是给人看的，加上编辑器有格式化代码工具，缩进不能去除，而且在实际应用中li之间往往有一定的间距，所以我的做法是顺水推舟，仅对IE 6/7 hack：
```
li{#margin-right:4px;}
```

overflow引起Firefox 3 bug：

HTML：

<a href="#">订阅</a>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE6）：

IE 7/8 的padding有点小问题，不过基本可以忽略。

如果给a加上overflow:hidden（此处的overflow:hidden没有必要，仅为演示使用）

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;overflow:hidden;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

Firefox 3显示效果：

text-align:center失效！其余浏览器皆正常（这里有点小插曲，开始我误以为是td中的inline-block元素不能居中，后来发现是overflow:hidden的问题），经测试overflow:auto也会出现此问题，不过这个更少用到。

IE 6的line-height失效：

HTML：

<p>欢迎使用<span></span>飞信</p>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
p{background-color:yellow;line-height:5;}
span{display:inline-block;width:16px;height:16px;background-image:url('http://images.n20svrg.139.com/simple2008/coremail/images/simple_icons.png');background-repeat:no-repeat;background-position:-500px -50px;vertical-align:middle;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

未找到根治方法，可变通一下用padding解决：

p{background-color:yellow;padding:2em 0;}

总结：

即便如此，我还是会继续使用下去-:P

[视频]荒谬大师--沈玉琳

2009-04-13T23:36:00.006+08:00

这是存在我硬盘有段时间的一段视频，本想传到YouTube的，不过现在被河蟹了，o(╯□╰)o

如果你不知道谁是沈玉琳，请看：维基百科 - 沈玉琳

Firefox的IE7风格主题

2009-04-11T00:16:00.007+08:00

使用Chrome主题没多久就腻了，于是乎又整了个IE7风格主题：

参考了一些现成的脚本，比如[Fx3.*] IE style tabs (untested)

配合以下扩展使用：

Tab Mix Lite CE（调整标签宽度）
Strata Aero（蓝色主题）
Personal Menu（Chrome式菜单）

安装地址：

http://userstyles.org/styles/16661

裸奔啦~\(≧▽≦)/~

2009-04-08T23:24:00.004+08:00

CSS Naked Day，博客去皮裸奔！

来历：

CSS Naked Day，也称CSS裸奔节或CSS裸奔日，这天，参加裸奔的Blog 将会去除页面上所有的 CSS 和广告裸奔一天，借此来表明CSS的重要性。当然如果你的网站是用table来布局的话这个节日对你来说并不是很合适。

2006年有将近800个国际知名网站参与此节日。

目的：

推动Web标准、提倡简洁为美、使用正确的HTML标记、体现良好的页面结构。暂时把页面设计抛弃，直接展示内容！

历届时间：

2006年4月5日
2007年4月5日
2008年4月9日
2009年4月9日

延伸阅读：

CSS Naked Day

body标签class属性的妙用(Google Reader前端简单分析)

2009-04-03T14:10:00.011+08:00

身为greader的重度用户，之前写过stylish，今天来简单分析下其中关于body的一点小技巧。

区分不同浏览器
IE6：
```
<body class="ie ie6 loaded">
```
IE7：
```
<body class="ie ie7 loaded">
```
IE8：
```
<body class="ie ie8 loaded">
```
GECKO内核（firefox/flock等）：
```
<body class="gecko loaded">
```
WEBKIT内核（safari/chrome等）：
```
<body class="webkit loaded">
```
以上值通过JS判断当前浏览器后给body的class赋值。

当然，并不是每种浏览器都利用到了相应的class，部分是预留的，CSS中只用到了以下部分：
```
.gecko .goog-inline-block{display:-moz-inline-box;}
.gecko .goog-inline-block{display:inline-block;}
.ie6 .goog-inline-block{display:inline;}
.ie7 .goog-inline-block{display:inline;}
```
这段代码是为了实现跨浏览器的display:inline-block，其中只用到了gecko/ie6/ie7这三个class

布局切换

当界面隐藏侧边栏时（以firefox为例）：

<body class="gecko loaded lhn-hidden">

body增加了lhn-hidden的class：

.lhn-hidden #chrome-lhn-toggle-icon{border-color:#ebeff9 #ebeff9 #ebeff9 #68e;border-width:5px 0 5px 5px;}
.lhn-hidden #chrome-lhn-toggle:hover #chrome-lhn-toggle-icon{border-left-color:#fff;}
.lhn-hidden #nav{display:none;}
.lhn-hidden #chrome{margin-left:0;}
.lhn-hidden #chrome-title{display:inline;}
.lhn-hidden #entries .entry-body{max-width:100%!important;}

通过给body添加/删除class="lhn-hidden"来实现侧边栏的显示隐藏，实现了结构、表现、行为的高度分离！

用jquery的话则变得更加简单，JS只需以下几句：

$('#chrome-lhn-toggle').click(function(){
    $('body').toggleClass('lhn-hidden');
})

这样书写及维护起来非常方便。

换肤

众所周知的GR彩蛋:上上下下左右左右BA，就是通过给 body 增加 class 实现的

<body class="konami">

konami 的 css 如下：

.konami #sub-tree{background:#006f89 url(/reader/ui/1466947354-ninja-sidebar.gif) repeat-y left 0;}
.konami .lhn-section{background-color:#006f89;}
.konami .scroll-tree li{background:transparent;}
.konami .entry .entry-actions .star, .konami .entry .entry-actions .like, .konami .entry .entry-actions .read-state, .konami .entry .entry-actions .broadcast, .konami .entry .entry-actions .broadcast-with-note, .konami .entry .entry-actions .email, .konami .entry .entry-actions .item-link, .konami .entry .entry-actions .tag, .konami .entry .entry-icons .star, .konami .entry-likers-n .number-of-likers{background-image:url(/reader/ui/3207170781-konami-action-icons.png);}
.konami-like-image{position:absolute;}

Firefox 3 Bug：Iframe页面被带入Quirks Mode

2009-04-03T11:03:00.011+08:00

前言：

在B/S系统中经常用到iframe，iframe中的数据用表格填充。

BUG:

标准模式时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

进入iframe页面时th及td的字体不继承body的样式（偶尔出现）。

分析：

用firebug查看某一单元格（先在选项中选中显示浏览器默认样式），如下图：

其中style.css是我写的CSS，quirk.css为firefox在Quirks Mode时的默认样式，位于安装目录下的res文件夹中（各标签默认样式的html.css也在其中）。

可见firefox进入了Quirks Mode。

解决方法：

~~设置字体时，th/td和body写在一起：~~

body, th, td{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

~~另外：~~

~~因该bug偶然出现，未测试以下是方法否可以解决，有兴趣的童鞋可以试下并留言：~~

th, td{font-size:inherit;font-family:inherit;}

2009-4-14更新：

今天再次遇到这个问题，reset中已经设置了

th{font-size:inherit;font-family:inherit;}

其实是继承了quirks.css中的table的字体

最终的解决方法：

body, table{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

另外：

这里仅仅是字体的设置，Firefox中Quirks Mode的其他影响还需仔细研读下quirks.css

警惕：请谨慎选择免费E-mail提供商！

2009-04-02T20:15:00.009+08:00

如今，几乎每个网络服务都跟电子邮箱关联，比较重要的有网上银行、支付宝等，等有一天你因为种种原因很久没上网，而且忘记了密码，你的免费邮箱又没了...

以下为本人亲身经历：

2000年左右用的etang免费邮箱，后来etang转型，邮箱没了，之后再没去过etang；
2002年左右用的sohu免费邮箱，后来有段时间没登陆了，再进去提示要激活，激活后邮件没了，之后再没去过sohu；
2003年开始用的比较多是网易163的免费邮箱，由于其附件下载速度比较快特意申请了几个分别用来备份比较重要的资料，常用的有一两个，比较正常，用来存资料的很久没登陆现在再也登陆不了了，估计账号被删了，到处找客服邮箱，始终找不到，以前咨询过的客服邮箱（回复过邮件）也失效了，整个帮助中心剩下个机器人！

免费服务也没什么好抱怨的，大家引以为戒吧。

简单实现Firefox的Chrome主题

2009-03-28T11:37:00.010+08:00

有图有真相：

安装以下扩展：

Chromifox Basic，仿Chrome主题；
Chromin Frame，将移动标签条到工具栏上方，并替换窗口标题栏和边框的外观为Chrome式样，国人出品；
Personal Menu，实现Chrome的菜单栏；
Locationbar²，突出地址栏域名；
autoHideStatusbar，自动隐藏状态栏（由于时不时要瞄一下TwitterFox未安装）。

全部安装完重启后简单配置下Personal Menu及定制下工具栏即可。

IE6 BUG：边框不能设为透明

2009-03-27T13:37:00.011+08:00

前言：

有时候我们需要用纯CSS来写小三角，如下图：

代码：

HTML：

<body>
<div class="pointer">
</div>
</body>

CSS：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果，特意放大

问题：

正常显示效果：

IE6下却遭遇BUG（不透明）：

解决方法：

将实线改为虚线，代码：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent dotted;/*dashed亦可*/border-right:200px red solid;font-size:0;}

IE6下显示效果：

虽然边缘有轻微锯齿，但可以接受

意外收获：

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿

Stylish：JavaEye - 加大正文字体

2009-03-26T00:23:00.004+08:00

前言：

JavaEye是个不错的技术网站，虽然我之前学的是.NET，但Java阵营的东东也会时常关注下。

说明：

屏幕越大，越不习惯阅读12px的正文字体，将几个常用栏目的正文字体改为了14px。

安装地址：

http://userstyles.org/styles/16385

视觉规范

2009-03-24T22:27:00.007+08:00

明天讨论视觉规范，搜集了几篇不错的文章：

冰山一角：

看到做好的页面，UI设计师：“必须严格按照我的效果图来做！这里不是这个样子呀！”

打开效果图，“诶，我记得不是这样的啊...不好意思啊，是我搞错了，呵呵O(∩_∩)O~，这里改成这样...”

我内心深处：“OOXX...”

一周年

2009-03-22T18:04:00.004+08:00

来公司整整一年：

感谢lvh的信任及各位小u的疼爱；
感谢gengcl、kuol等老乡的照顾；
感谢tiexg、lifl、rongxr等各位研发同事的配合；
感谢xiaoy、zhangqs等足球队友将10号球衣让给小弟；
感谢暗中为我争风吃醋的各位plmm...

Yahoo与Gmail的CSS Sprites对比

2009-03-18T17:38:00.016+08:00

前言：

使用CSS Sprite的目的是为了优化（(#‵′)凸）。

Yahoo，以左侧导航为例：

CSS Sprites图片地址：

http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

HTML：

<ul id="trough-1" class="col1">
<li><a href="r/4d" style="background-position:-400px -120px">Answers</a></li>
<li><a href="r/2h" style="background-position:-400px -440px">Autos</a></li>
<li><a href="r/25" style="background-position:0 -761px">Finance</a></li>
<li><a href="r/28" style="background-position:0 -1600px">Games</a></li>
<li><a href="r/2r" style="background-position:0 -1400px">Groups</a></li>
<li><a href="r/3o" style="background-position:0 -439px">HotJobs</a></li>
<li><a href="r/24" style="background-position:0 -600px">Maps</a></li>
<li><a href="r/3a" style="background-position:0 -161px">Mobile Web</a></li>
<li><a href="r/2i" style="background-position:0 -561px;display:inline">Movies</a> | <a class="trough_tv" href="r/2j">TV</a></li>
<li><a href="r/3m" style="background-position:0 -1562px">Music</a></li>
<li><a href="r/gx" style="background-position:-400px -1119px">OMG</a></li>
<li><a href="r/33" style="background-position:0 -40px">Personals</a></li>
<li><a href="r/2p" style="background-position:-400px -161px">Real Estate</a></li>
<li><a href="r/s3" style="background-position:-400px -1321px">Shine</a></li>
<li><a href="r/2q" style="background-position:0 -1640px">Shopping</a></li>
<li><a href="r/26" style="background-position:0 -800px">Sports</a></li>
<li><a href="r/29" style="background-position:0 -79px">Travel</a></li>
<li><a href="r/2k" style="background-position:0 -121px">Yellow Pages</a></li>
</ul>

图片分析（图中虚线为20*20的参考线）：

原始大小：

放大至200%：

特点：

HTML结构清晰，背景写在a标签上；
切图方式：每个图标放置于20*20的单元格中，未从单元格左上角开始放置，而是上下左右都留有部分像素的距离（依据显示效果而定）。大部分情况下直接调用即可，如background-position:-400px –120px；偶尔需要调整偏移量，如background-position:0 -161px
第二列图标距离左侧400px，每行图标间隔一个单元格的距离，充分留白；
图片为gif格式，尺寸：420*1700，大小：16.2KB，总共80个图标。

Gmail，同样以左侧导航为例：

CSS Sprites图片地址：

https://mail.google.com/mail/images/2/5/chrome/icons7.png

HTML（以星标为例）：

<div class="nH pX">
<div class="nH">
 <div class="nH">
     <div class="pi" style="height:4px;">
         <div class="ph p" style="width:4px;"></div>
         <div class="ph q" style="width:4px;"></div>
         <div class="l o"></div>
     </div>
     <div class="l m">
         <div class="l n" style="margin-left:4px;">
             <div class="k" style="margin:-2px 4px -2px 0px;padding:0px;">
                 <div class="diLZtc">
                     <div class="nH">
                         <div class="qk">
                             <span id=":qj" class="" idlink="">
                             <div style="overflow:hidden;white-space:nowrap;">
                                 <div id=":r0" class="p5" idlink="">
                                     <a class="p9" href="https://mail.google.com/mail/#starred" target="_top" title="已加星标">已加星标</a><img class="pW" src="images/cleardot.gif" /></div>
                             </div>
                             </span></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="dJ"></div>
     <div class="pi" style="height:4px;">
         <div class="ph i" style="width:4px;"></div>
         <div class="ph j" style="width:4px;"></div>
         <div class="l h"></div>
     </div>
 </div>
</div>
</div>

图片放大至200%：

特点：

HTML结构极度混乱（咳咳，至少我是这么认为），甚至还有内联元素span嵌套div的情形。背景写在img上（Gmail将所有放图标的地方插入一个1*1的透明图片：<img class="pW" src="images/cleardot.gif" />，然后根据不同的class设置拉伸至不同的大小及背景坐标，并用margin修正偏移量），这么做的原因也许是跨浏览器的inline-block（Firefox 3以前的版本不支持display:inline-block）
切图方式：每个小图放置于20*20的单元格中，大部分左上角顶齐，调用时直接用该图标左上角的坐标取值即可，如background-position:-20px –20px
每个单元格放一个图标，比较紧凑。
图片为png格式，尺寸：180*120，大小：4.83KB，总共47个图标。

对比（带有强烈主观色彩，请自行判断）：

	Yahoo	Gmail	胜方
HTML	结构清晰，易于维护	臃肿杂乱	Yahoo
图片排列	宽松	紧凑，易于维护（尤其是我们这种小屏幕人士）	Gmail
CSS调用	方便，部分图片需微调background-position	方便，部分图片需微调margin	平手
图片优化	可改为png-8格式进一步压缩（YUI的PPT中提倡用png-8，为什么自己不这么做呢）	已压缩	Gmail

最后的话：

二者各有优缺点，大家可取其精华，弃其糟粕，根据项目特点任意发挥，囧

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

2009-03-17T17:19:00.011+08:00

问题如下图：

解决思路：

当鼠标移到select元素时将其宽度置为auto；
鼠标移开时恢复为原定宽度。

代码（基于jQuery）：

$(function() {
 $(".ProductAttributesSelect")
     .mouseover(function(){
         $(this)
             .data("origWidth", $(this).css("width"))
             .css("width", "auto");
     })
     .mouseout(function(){
         $(this).css("width", $(this).data("origWidth"));
     });
});

英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(∩_∩)O~

简译自：Select Cuts Off Options In IE (Fix)

主流国产RSS阅读器初步比较

2009-03-12T09:22:00.004+08:00

背景：

传闻近来国产RSS阅读器的日子都不太好过：

事件：

小弟最近开了博，之后打算在各大国产RSS阅读器将自己的博客添加进去，然后进行无耻的“自顶”行为进行推广... 然而结果却是：

首先我尝试的是
鲜果
：因为近来鲜果的表现相对好一些。将博客地址http://ytzong.blogspot.com及RSS源的地址http://ytzong.blogspot.com/feeds/posts/default填进去均提示“您订阅的频道不存在”；
抓虾：输入博客地址很顺利就找到两个源：http://ytzong.blogspot.com/feeds/posts/default?alt=rss及http://ytzong.blogspot.com/feeds/posts/default，成功订阅；
有道：前今天看了有道的技术分享，用网易通行证账号即可登陆。添加博客地址后未成功，之后RSS源及博客地址反复尝试几次之后成功；
豆瓣九点：提示未抓取，等待几分钟后成功。

结论：

仅添加订阅而言：抓虾>有道≈豆瓣>鲜果。

CSS修饰上传域

2009-03-10T17:55:00.008+08:00

在WebMail项目中，我们需要使用图片修饰的按钮来替代系统默认的上传域。

原理：

将上传上传域透明，绝对定位叠在修饰的图片按钮上方，点击图片按钮时其实是点到上传域。

问题：

图片按钮太大时，上传域的可点击区域不能将其完全覆盖。

解决方法：

加大字体。

HTML：

<input class="file" type="file" />

CSS：

input.file{font-size:5em;}

各浏览器显示效果：

嘿嘿，这下够用了吧~

延伸阅读：

去除Gmail右侧广告/隐藏聊天/隐藏邀请

2009-03-05T14:51:00.023+08:00

预览：

安装地址：

http://userstyles.org/styles/15631

最新源码：

/*加大正文字体及行高*/
.ii.gt,.ii.gt *{font-size:14px !important;line-height:1.5 !important}
/*隐藏读信广告*/
table.T1HY1.nH.iY{width:100% !important;}
table.T1HY1.nH.iY td.tELAdc:first-child + td.tELAdc, table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div,table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:last-child{display:none !important}
/*设置快捷操作位置*/
table.T1HY1.nH.iY td.tELAdc:last-child{position:absolute !important;top:-37px !important;right:0 !important;}
table.T1HY1.nH.iY td.tELAdc:last-child .nH{width:auto !important}
table.T1HY1.nH.iY td.tELAdc:last-child .hk{float:right !important;margin-left:1em !important;}
/*隐藏聊天*/
.nH.pz.pA.pX + div + div + div{display: none !important;}
/*隐藏邀请*/
.nH.pz.pA.pX + div + div + div + div{display: none !important;}

源码分析：

Gmail的HTML写的非常之“变态”且没有语义，导致我的选择器也跟着一起“变态”，⊙﹏⊙b汗~~

我们首先来看下Gmail左侧导航的HTML结构（为了方便，将注释写在了title属性中）：

<div class="nH nn" style="width:155px;">
<div class="nH">
    <div class="nH pz pA pX" title="撰写邮件" />
    <div class="nH pp" title="收件箱等" />
    <div class="nH pp ps" style="-moz-user-select:none;" title="标签" />
    <div class="nH pp ps" style="" title="聊天" />
    <div class="nH pp ps" title="邀请" />
</div>
</div>

隐藏聊天：

.nH.pz.pA.pX + div + div + div{display: none !important;}

以撰写邮件为基准点，向下查找同级第三个div，将其隐藏。

这里的要点是相邻同胞选择器“+”

隐藏邀请同理。

读信页面的HTML结构如下：

<table cellpadding="0" class="T1HY1 nH iY">
<tr>
 <td class="tELAdc" title="邮件正文"></td>
 <td class="tELAdc" title="间距空白"></td>
 <td class="tELAdc" title="广告单元格">
     <div style="width: 0px;"
class="VB6tt" />
        <div style="width:
189px;" class="nH">            
<div class="nH">                
<div class="nH" title="快捷操作" />                
<div class="nH" title="广告" />                
<div class="nH u8" title="关于这些链接" />            
</div>
     </div>
 </td>
</tr>
</table>

去广告：

table.T1HY1.nH.iY td.tELAdc:last-child .VB6tt + div > div:first-child > div:first-child + div{display:none !important}

先找到该表格的最后一个单元格下的class="VB6tt"的元素，在找同级元素下的第一个div下的第一个div相邻的div（好绕口啊，+_+），将其隐藏。

其余同理....

2009-3-8更新：

加大正文字体至14px，加大正文行高至1.5
隐藏聊天

2009-3-7更新：

修复邮件新窗口中打开时正文显示不出来的BUG

2009-3-6更新：

去除读信页右侧广告
将读信页右侧快捷操作位置放到邮件与搜索栏之间靠右的位置
隐藏左侧邀请

139邮箱集成Google Reader

2009-03-03T16:30:00.013+08:00

下载地址：http://userscripts.org/scripts/show/43488/

友情提示：您需要使用Firefox，并安装Greasemonkey扩展（需重启），之后进入http://userscripts.org/scripts/show/43488/，点 Install 就开始安装了。

配合这个使用更佳：Stylish脚本：Google Reader

IE 6/7 Bug: 在fieldset中隐藏legend所引发的bug

2009-02-28T22:41:00.021+08:00

HTML：

<fieldset>
<legend>登陆</legend>
<ul>
<li><label>账号：</label><input type="text" /></li>
<li><label>密码：</label><input type="password" /></li>
</ul>
</fieldset>

CSS：

body{font-family:Arial, Helvetica, sans-serif;font-size:14px;}
fieldset, ul{margin:0;padding:0;}
li{margin:1em;list-style-type:none;}
fieldset{width:300px;border:5px solid red;}
legend{display:none;}/*隐藏legend*/
ul{border:5px solid black;}
input{width:200px;padding:2px;}

正常效果：

IE 6/7显示效果：

解决方法：

删除legend
在fieldset外套一个div，并将样式写在此div上

基于语义等因素推荐使用第二种方法。

2009-4-2补充：

fieldset与legend的bug不止这一个，最好就是在fieldset外部或内部加个div，legend中加个span，为以后的界面改动预留退路！

精简Google Reader

2009-02-28T16:22:00.008+08:00

早先为Google Reader写了个Stylish脚本，主要更改了以下地方：

将左侧导航宽度由260px减小至200px
隐藏了Logo，搜索框，头部两侧的链接
将右侧常用按钮与标题栏合二为一
减少杂色：改变展开模式中未选中项目的边框颜色，改变左侧订阅标题鼠标滑过的背景色
去除展开模式正文处标题和内容的最大宽度限制
将展开模式正文的字体增大至14px，行高改为1.5倍行距
图片显示不了在Firefox中不会有IE中的叉叉标记，于是给图片加了个灰色边框

效果预览：

下载地址：

http://userstyles.org/styles/14058

友情提示：

您需要使用Firefox，并安装Stylish扩展（需重启），之后进入http://userstyles.org/styles/14058，点 Load into Stylish 按钮就开始安装了。

彻底屏蔽垃圾短信！

2009-02-25T10:36:00.010+08:00

垃圾短信令人抓狂，昨天一天总共收到80多条！

想起了偶的智能机N-GAGE QD，搜了一下，找到一个还不错的软件，信安易卫士，试了一下，比以前的超级短信好用些。超级短信有个自动删除功能，黑名单的短信收到后会自动删除，不过收到信息时还是会有提示音，而信安易则不会，而且可以批量从通话记录和收件箱导入，我觉得最好用的一点就是可以屏蔽任意非通讯录内的陌生短信，非常方便。

放几张图，不是我机子抓的，网上找的，不过功能都差不多：