tag:blogger.com,1999:blog-31786624597229734962024-03-09T06:17:24.419+08:0099cssytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.comBlogger62125tag:blogger.com,1999:blog-3178662459722973496.post-76398118674246711802009-11-01T01:13:00.004+08:002009-11-01T01:22:02.838+08:00博客搬家了~<p>blogger.com 的所有IP都被 GFW 了,转移为 Wordpress</p>
<p>博客地址为:<a href="http://www.99css.com">http://www.99css.com</a></p>
<p>订阅地址为:<a href="http://feeds2.feedburner.com/ytzong">http://feeds2.feedburner.com/ytzong</a></p>
<p>另:感谢加班战友<a href="http://ooxx.me">大猫</a>的空间支持</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-45495122816023028702009-10-31T18:25:00.004+08:002009-10-31T18:32:17.449+08:00Pixel Perfect 1<p>花了几个小时小小研究了一下中文字体:</p>
<ul><li>使用的是 Arial 字体(不同字体下的结果不同,即便同为中文)</li><li>列分别为12px文字、12px链接、12px加粗文字、12px加粗链接、14px文字、14px链接、14px加粗文字、14px加粗链接</li><li>行分别为IE6、IE7、IE8、FF3.5</li></ul><a href="http://docs.google.com/File?id=ddrrtxb_17497mfm2gf3_b" target="_blank"><img style="width: 640px; height: 200.374px;" src="http://docs.google.com/File?id=ddrrtxb_17497mfm2gf3_b"></a><p>点击图片看大图</p><h3>结论:</h3>
<table cellpadding="0">
<tr>
<th>Arail</th>
<th>12px</th>
<th>14px文字</th>
</tr>
<tr>
<th>ie6/7</th>
<td>高11px占14px<br />
上0下3px<br />
下划线在13px处</td>
<td>高13px占16px<br />
上0下3px<br />
下划线在15px处</td>
</tr>
<tr>
<th>ie8</th>
<td>高11px占15px<br />
上0下4px<br />
下划线在12px处</td>
<td>高13px占16px<br />
上0下3px<br />
下划线在14px处</td>
</tr>
<tr>
<th>ff3.5</th>
<td>字11px高15px<br />
上2px下2px<br />
下划线在14px处</td>
<td>高13px占16px<br />
上1px下2px<br />
下划线在16px处</td>
</tr>
</table>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com1tag:blogger.com,1999:blog-3178662459722973496.post-85900391385605159372009-10-25T17:19:00.004+08:002009-10-25T17:31:30.410+08:00[翻译]OOCSS FAQ<ul>
<li>原文:<a href="http://wiki.github.com/stubbornella/oocss/faq">http://wiki.github.com/stubbornella/oocss/faq</a>(翻译时为Version
28)</li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<h3>在OOCSS中怎么定义“对象”?</h3>
<p>对象类似JAVA中的类,保持着OO的特征。</p>
<p>一个CSS对象由4部分组成:</p>
<ol>
<li>可能是一个或多个DOM节点的HTML</li>
<li>由wrapper节点的class名开始的CSS样式声明</li>
<li>类似于背景图片和显示用的sprites组件以及</li>
<li>JavaScript行为,监听或者与对象关联的方法</li>
</ol>
<p>这可能令人费解,因为每个CSS class不是其自身必要的对象,但可以是一个wrapper class的一个部件。比如:</p>
<pre><code><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></code></pre>
<p>对象是一个class为mod的模块。包括4个部件节点(不能独立于模块外,包括2个区块,inner和body,和两个可选择的区块,head和foot)</p>
<h3>OOCSS如何提升性能?</h3>
<p>OOCSS具有双倍的性能优势:</p>
<ol>
<li>高度重用的CSS代码,只需要很少的CSS代码,意味着:
<ul>
<li>更小的文件,从而更快的传输</li>
<li>CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存</li>
</ul>
</li>
<li>就浏览器而言更少的重绘和布局计算
<ul>
<li>单个页面,CSS规则复用的越多,渲染引擎花在“computed values”的计算时间越少</li>
<li>手动增加的"extending"类,重写更少的规则,这再一次意味着引擎做很少去应用规则</li>
</ul>
</li>
</ol>
<h3>要用ID来对内容写样式吗?</h3>
<p>当你在同一页面(或者同一站点同时缓存良好)复用一个对象时,这是性能的“免费赠品”。用ID来写样式在同一页面中只能使用一次。@cgriego (twitter)
拿它与singletons比较过,我认为非常精确。可能有些情况下你要用ID定义样式,比如非常特殊的 header menus,此时你可以在用ID来沙箱(译注:动名词)特殊元素并确保此处的代码不会影响站点的其它地方。选择ID而非class前要三思,随着站点的发展,真的<em>很难预料</em>其他人会怎么处理依据你的CSS所构建的HTML。如有选择的余地,尽可能的考虑扩展性。</p>
<p>我正在考虑移除模板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.)。</p>
<p>另一方面,<em>ID hooks are great for linking</em>。放在HTML中,不过别用它们来写样式。</p>
<h3>设计师可以写OOCSS吗?</h3>
<p>是的,设计师出于本能理解对象,比多数人当前书写CSS的方式要形象 — layers of exceptions (想一下,一个老太太吞了一只苍蝇)。事实上,他们爱上OOCSS的原因有两个:</p>
<ol>
<li>这使他们能快速创建复杂高点击量的站点。他们不需纠结于不理解的结构除非有足够的能力并充足的了解语法</li>
<li>学CSS时,他们不需创建丑陋的 “hello world!” 站点。设计师在非常在意的是他们的工作看起来很漂亮。如果必需做一些丑陋的东东,即便是学习之由,他们很快就会有挫败感并灰常的郁闷。OO-<span class="caps">CSS</span>
使得他们的工作在每个学习阶段都看起来很漂亮</li>
</ol>
<p>设计师是<strong>聪明</strong>D。我们要给他们信任。他们会讲一种不同的,非工程师的语言,但是极客的语言经常以一种丑陋的方式来拒绝人。我们能做的更好。</p>
<h3>我是个前端架构师,如何向团队传授OOCSS?</h3>
<p>作为架构师,你应该写结构对象;圆角如何创建,为角或其他特性放置表象元素,并处理浏览器差异。新手为这些模块写皮肤(borders, colors, background
images, 等等)。</p>
<p>我用OO-CSS方式创建了大批站点(千级的页面,百万级的访问者)。正确的完成后,很好扩展,这意味着新手将处理的个别元件可预见性很强。代码审阅很容易,因为有可接受的方法明确的规则来扩展对象。这种回馈使新开发者快速生产。</p>
<p>我在FullSIX(一个法国的网络营销机构)管理一个前端开发团队,是我工作过的最有才能的。某些时候我们的成功意味着我们将会有更多难以把控的工作。雇佣前端专家非常困难(没有这种学校!),所以我开始<a href="http://www.slideshare.net/stubbornella/object-oriented-css/57">对一些对写代码有兴趣的设计师(很少或没有经验)推行一个内部实习项目</a>,一个月就可以作为团队的初级成员工作。</p>
<ul>
<li>第一周:学习语义并根据现有的CSS创建HTML。学习创建网页:不需要更多的CSS,HTML语法,多个class,验证,语义,介绍代码审阅等</li>
<li>第二周:创建简单的内容对象(标题,列表等),持续一周。学习CSS语法,怎么扩展对象,颜色,字体百分比,等等</li>
<li>第三周:创建区块的皮肤。边框,颜色,背景图片,基本的布局,sprites。让他们同一个回答过n个问题的资深开发者一起工作,使他们少走弯路,他也应是很好的代码审阅者。</li>
<li>第四周:他们已经是团队的皮肤制作成员了。</li>
</ul>
<p>他们的代码在一个客户的网站上,同资深开发者写的一样好,或许更好因为他们还未学到一些坏习惯:)</p>
<h3>入门:如何使用这些文件?</h3>
<p>3个文件,libraries.css (reset 及 fonts 取自 yui), grids.css 及 template.css 已完成,其它的还非常不稳定。</p>
<ol>
<li>打开template.html并存为新文件</li>
<li>通过扩展相应的对象来改写列的数量及宽度。站点中只需一个模板,即使你有不同列的页面,因为列也是对象。可以把它们当作任意的区域,可能会有0 ~ n
个左列。查阅模板文档可了解更多</li>
<li>用栅格来分割内容区域为小的区块。查阅栅格文档了解更多</li>
<li>添加内容。提示:这也应OO</li>
</ol>
<h3>如何部署在站点上?</h3>
<p>注意CSS文件在不断改进中,我会依据接到的反馈进行改变。</p>
<p>我把CSS文件分为了模块,比如栅格和模板。在使用时移除不必要的注释并减少HTTP请求,否则站点会超级慢。这意味着要合并CSS文件为一个稍大的文件。我通过嵌套的注释来组织CSS。最后,作为上线/部署的一部分,用CSS压缩器来移除注释.</p>
<h3>可以修改文件,或者用我自己的样式重写吗?</h3>
<p>我不会修改grids, template, 或者 libraries。大量测试表明这些已恰到好处。如果要自定义,考虑下面的<a href="#extend">扩展基本对象</a>。</p>
<h3>粉红不是我要的颜色!怎么处理content.css?</h3>
<p>获取你会想要修改content.css。去吧,改颜色,字体大小,大小写。只需注意这个文件在快速发展,同时我还没有任何文档来说明如何正确的处理。我会这么做,我保证。</p>
<h3>我需要不只6种标题(h1~h6),如何增加?</h3>
<p>如果需要不只6中标题样式,通过添加一个新class来扩展标题对象。</p>
<pre>.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}</pre>
<p><strong>不要</strong>这样做:</p>
<pre>#mySaleModule h2, #mySaleModule .h2{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}</pre>
<h2 id="extand">如何扩展对象?</h2>
<p>如果要扩展对象,比如一个160px的左列,而非默认值,你可以再列上增加额外的class。</p>
<pre><div class="leftCol gMail"> ... </div></pre>
<p>如果默认值和扩展的列宽或者页面不适合你的站点,你可以扩展列来实现自定义的宽度。</p>
<h4>列</h4>
<p>myColumn 扩展列对象来实现自定义列宽。</p>
<pre>.myColumn{width:400px;}</pre>
<p>HTML</p>
<pre><div class="leftCol myColumn"> ... </div></pre>
<p>不要通过重写我的class来实现,而应<em>扩展</em>此框架提供的对象。我提供了列,标题及其他对象。你可以通过增加另外的class(只指定与我的基本对象的不同点)来扩展这些对象。相对而言此处混合比较好。</p>
<p><strong>不要</strong>这样做(因为更新我的框架时会有些麻烦):</p>
<pre>.leftCol{… 此处自定义CSS …}</pre>
<h3>没有用到的样式。我的站点没有160px的gmail式的列,可以移除吗?</h3>
<p>当然。移除对象或扩展对象非常合理。只需注意在站点发展时,很难预料到其他人用你的CSS创建的什么样的HTML。过早优化很危险。</p>
<h3>为什么有一个单独的模板?</h3>
<p>在OOCSS中,一个重要的目标是所有的页面创建自一个模板。这简化了CMS开发,因为有一个单独的起始点所有页面可以制作为其他的页面。CMS的用户不会落入已创建的页面不能变种为不同的页面类型的陷阱。OO模板的另一个目标是每一个section(列,header等)控制自己。实际上,这意味着如果要在模板上增加一个左列,只需在HTML中增加此列。你从来不想这样写CSS吧,为了使子元素满足表现而DOM树需要很多改变。对CMS开发来说DOM循环相当的昂贵。</p>
<h3>这有语义吗?我要终止像 .formYellow 或 tinyBlueH2 的class命名吗?</h3>
<p>OOCSS可以写得有语义也可无语义,取决于你创建模块时用 errorMod 而非 bigRedModule。我选择class名优一些原则(排名不分先后):</p>
<ul>
<li>短 - 每一字节计算起来,所以尽可能保持class短</li>
<li>清晰 - 可预料的行为/样式要显而易见</li>
<li>语义化 - 对象<em>是</em>什么高过<em>看起来</em>像什么。如何用在站点中?</li>
<li>通用 - 名称应该适用于多数站点。过于特殊的名称减少了适用场合或导致语义化的class以非语义化的方式使用</li>
<li>屏幕 - 移动阅读器或打印样式或许有不同的视图,会重写默认的屏幕视图,所以当有冲突时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)。这简化了开发。</li>
</ul>
<h3>其它的框架如何?这只能同YUI一起使用吗?</h3>
<p>在大量框架的生态系统中,YUI是专业性及可扩展性的一例。我同他们进行了对比,因为我不断受到他们代码和文档的影响。OOCSS不是一个真正意义上的框架,尽管我创建了很多例子,而是一种书写可扩展,健壮,可维护性强的CSS的一种方式。也许最好的比喻是一个新的语言。最终,它是未知的JavaScript库(it
is JavaScript library agnostic),我希望贡献代码回YUI及其他框架。</p>
<h3>CSS框架太超过!我需要从头开始编写所有代码吗?</h3>
<p>每需要一个随机数字都要写一个数字class吗?</p>
<p><span class="caps">CSS</span> is hard,
<a href="http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/">
not because it is broken</a> , but because it is a legitimate technology requiring
expertise to architect correctly. 为每个站点重复发明轮子非常的愚蠢。</p>
<h3>源文件中右列在主列之前,会影响可访问性,SEO吗?</h3>
<p>我早期工作过的站点有更标准的模板结构,body上有一个极好的class,依靠这个模板显示或隐藏左右列。自定义CMS的用户要创建一个3列布局的页面时非常沮丧,发现需要两列,找到它们不得不一个个从头开始,因为有多个模板/起始点。你或许注意到主列是个流体列,在左右两列渲染后自适应剩余的空间。</p>
<p>我更喜欢标签排序胜过视觉排序(因为如果标签顺序改变会变得非常怪异),但是我也只想要一个模板。在web开发中经常遇到的是,两个重要的目标发生了冲突,我做判断如何解决。这种情况下标签排序满足视觉顺序除了右列。在当前的代码中,只需在HTML增加一个左或右列,没有别处昂贵的DOM变化。</p>
<p>屏幕阅读器用户有两个选择:</p>
<ol>
<li>跳过链接</li>
<li>导航链接经常为一个链接列表或嵌套的链接列表形式。这非常有趣,因为这允许屏幕阅读者通过屏幕阅读器的特殊操作设置跳过整个列表。</li>
</ol>
<p>我的意见是对于跳过菜单这两种方式足够了。</p>
<p>每个人似乎都有一个回复观点:SEO,它们都不同,甚至相反。:)基于这个思潮,我倾向于:尤其对含有一定合理数量链接的导航菜单,不用太过在意。曾几何时,我看到过导航链接被索引在搜索结果的内容部分,不过是在几年前了。搜索爬虫非常智能,我已经准备好想当然的认为如果我以语义化,干净的方式标记内容,并非填充一坨垃圾链接,爬虫能区分的出来。</p>
<p>把导航菜单标记为列表,允许屏幕阅读器用户跳过,并提供“跳至内容”链接,对可访问性提供了双倍的备用措施。</p>
<h3>为什么用了_ hack?我能把这些代码放在单独的文件中吗?或者添加IE专有的class?</h3>
<p>很显然,首先考虑的是尽可能少和长远。</p>
<ol>
<li>添加一个单独的样式表奖增加一个额外的HTTP请求,增加整体文件的大小,这早已是浏览器性能的对立点</li>
<li>我喜欢把一个对象的代码放在一个地方。我认为这有助于减少hack的数量,尤其是当项目随时间而发展</li>
<li>IE6-的开发工具非常原始,这使得hack和普通代码放在一起更加重要。我想能尽快找到一个可以使用属性的IE bug。同样,我认为这有助于减少hack</li>
<li>规则表明浏览器理解不了的属性会被忽略。对IE6-使用_早已众所周知,可以合理的预料好的浏览器将会忽略这个属性</li>
<li>使用条件注释意味着每个HTML页面必须包含一个IE专用样式。某一天(我不能等了!)当IE6的市场份额下降至像IE5那样低时,我将去除这些代码,但最后我要做的是触及百级或千级的HTML页面。我宁愿只有依赖CSS
hack的CSS,而不是把它放在HTML中。不幸的是,恕我直言,IE6兼容性的末日比我们期望的要更加长远,因为IE中的quirksmode会回落到IE5.5的模式</li>
</ol>
<p>我认为我的选择有助于减少hack的总体数量,提升性能,并只有忽略不计的风险。话说回来,如果觉得代码中的_令你作呕,你完全可以移至单独的文件。</p>
<h3>为了添加表象效果比如边框而使用空 <b> 标签容器对象,会给屏幕阅读器用户带来问题吗?</h3>
<p>不会,幸运的是屏幕阅读器会忽略空的b标签。使用这个表象标签(b是加粗)来实现表象具有优势。这个标签可以通过服务器端脚本包含,以至于有一天所有的CSS圆角和阴影都支持了,可以关闭脚本并拥有漂亮,干净,语义化的HTML。</p>
<h3>OOCSS声称避免位置依赖的样式。是否意味着我不能使用类似 .myModule .title 的派生选择器?</h3>
<p>不使用派生选择器没什么阻碍,只是把它们放在更高的DOM树而已。避免在body或页面中最外层的div放置wide-net class或id,然后对对象产生的变量写大量的样式。这不能复用,同时会使页面渲染变慢。相反,通过直接在对象上添加一个class来增加一个多余的“local”变量(并对其子元素写派生样式)。</p>
<p>一个好的经验是一个容器主体(body of a container)内的任意元素显然是一个单独的对象。</p>
<p>这无可厚非,因为UL显然是一个单独的对象:</p>
<pre>#sidebar ul { ... }</pre>
<p>因此,carousel显然不是body对象的一部分:</p>
<pre>body.browseProducts .carousel </pre>
<p>这是适当的层叠应用,因为子节点真正的是较大的父对象的一部分。b(角)和inner显然隶属于moudle,它们不能独立存在:</p>
<pre>.myModule { ... }
.myModule b { ... }
.myModule .inner { ... }</pre>
<h3>如何贡献?</h3>
<p>最好的方法是涉足其中,开始使用代码(libraries, grids, fonts)并<a href="http://stubbornella.lighthouseapp.com/projects/26663-object-oriented-css/tickets">提交
bug 报告及功能需求</a>。 我建了一个
<a href="http://groups.google.com/group/object-oriented-css"><span class="caps">
OOCSS</span> google group</a> 来进行超过140个twitter字符的讨论。</p>
<h3>译注:</h3>
<p>OOCSS的官方站点为 <a href="http://oocss.org/">http://oocss.org/</a>,有一些例子及下载等。</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-16613990907524871312009-10-24T13:25:00.000+08:002009-10-24T13:26:12.936+08:00IE 6&7 z-index bug<p>很老的 bug了,详细描述看下面几篇文章吧:</p>
<ol>
<li><a href="http://www.andymao.com/andy/post/67.html">position:relative/absolute无法冲破的等级</a></li>
<li><a href="http://www.andymao.com/andy/post/69.html">对《无法冲破的等级》一文的补充</a></li>
<li><a href="http://www.andymao.com/andy/post/74.html">补遗《无法冲破的等级》</a></li>
</ol>
<p>文中给出的方法简单明了,不过有时页面比较复杂,只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了
JS 框架则更加简单。《<a href="http://css-tricks.com/snippets/jquery/fixing-ie-z-index/">Fixing IE z-index</a>》分别给出了 jQuery 和 MooTools 版本,下面是 jQuery 版本的代码:</p>
<pre><code class="javascript">$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});</code></pre>
<p>DEMO <a href="http://css-tricks.com/examples/IE-z-index/">在此</a></p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-21263034759484583212009-10-21T22:07:00.001+08:002009-10-21T22:07:32.195+08:00[转发]跨国公司招聘<p><b>未验证</b>,自己碰运气吧,好像不错( ^_^ )</p>
<blockquote>
<p><a href="http://www.carryquote.com/">http://www.carryquote.com/</a></p>
<h3>Job Description</h3>
<p>Job Title: Web Developer</p>
<p>Job Location: Shenzhen</p>
<p>Position Requirements/Qualification:</p>
<ul>
<li>University degree or college diploma </li>
<li>Fluent knowledge of xHTML, CSS and JavaScript</li>
<li>Fluent knowledge of classic ASP (VBScript), specifically integration with
MS SQL Server via ADO</li>
<li>Knowledge of AJAX is a plus</li>
<li>Good knowledge on making websites</li>
<li>Able to speak and write English</li>
<li>Immediately availability would be preferred</li>
</ul>
<p>Goblin</p>
<p>Tel 0755-82714350</p>
<p>E-MAIL <a href="mailto:shuang.zhang@51job.com">shuang.zhang@51job.com</a></p>
</blockquote><br>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-56666766788541480352009-10-03T18:58:00.003+08:002009-10-07T14:35:57.540+08:00Web 开发哲学<div id="l:jx" style="text-align: left;"><img style="width: 600px; height: 448px;" src="http://docs.google.com/File?id=ddrrtxb_1734fn5vb5d9_b"></div>
<p>from <a href="http://www.slideshare.net/stubbornella/object-oriented-css">Object Oriented CSS</a></p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com1tag:blogger.com,1999:blog-3178662459722973496.post-71033636259924657172009-10-03T18:43:00.014+08:002009-10-07T14:54:56.915+08:00[翻译]Object Oriented CSS<h3>什么是面向对象的 CSS</h3>
<p>框架?工具?哲学?</p>
<blockquote>
<p>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.</p>
</blockquote>
<h3>很像语言的进化</h3>
<p>令 CSS 更强大</p>
<h3>有什么不同?</h3>
<pre><code>ul{...}
ul li{...}
ul li a(②但是,结构在这里){①直至现在,我们只关心这里}</code></pre>
<h3>CSS 大约 2005</h3>
<p>意大利面条</p>
<h3>CSS 大约 2008</h3>
<p>稍微好一点</p>
<h3>而不是使我们的代码变好</h3>
<p>我们筑了大栅栏</p>
<h3>性能呢?</h3>
<p>公认的毒药中心</p>
<h3>网站变慢</h3>
<p>文件大小和 HTTP 请求未作优化</p>
<h3>CSS 大约 2009</h3>
<h3>面向对象的CSS</h3>
<p>性能的最佳实践、可扩展性、和最重要的-容易使用</p>
<ol>
<li>创建对象而不是页面或模块</li>
<li>在内容对象上设置好的公用默认值</li>
<li>抽象重用元素</li>
<li>分离结构和皮肤(为两个 class)</li>
<li>分离容器和内容(开放的编辑区)</li>
<li>使用继承</li>
<li>对看起来 OO 的应用多个 class</li>
</ol>
<h3>9条最佳实践</h3>
<ol>
<li>组件库:可重用和冗余</li>
<li>一致性:避免位置依赖(location-dependent)的样式</li>
<li>抽象化</li>
<li>优化图像和 sprites</li>
<li>灵活</li>
<li>学会爱栅格</li>
<li>避免非标准的浏览器字体</li>
<li>避免高度对齐(alignment)</li>
<li>谨慎卖弄你的技术(choose your bling carefully)</li>
</ol>
<h3>9个陷阱</h3>
<ol>
<li>位置依赖的样式</li>
<li>避免指定一个 class 的标签</li>
<li>避免用 ID 定义主内容区域内的样式</li>
<li>避免不规则背景上阴影和圆角</li>
<li>不要拼合所有图片(触发只有少数几个页面)</li>
<li>避免高度对齐</li>
<li>文字就是文字,不要做成图片</li>
<li>冗余</li>
<li>避免过早优化</li>
</ol>
<h3>创建组件库</h3>
<p>可重用的“乐高积木”</p>
<h3>重用元素使得它们</h3>
<p>性能“免费”</p>
<h3>组件就像乐高积木</h3>
<p>组合并匹配来创建不同的和有趣的页面</p>
<h3>从组件库创建 HTML</h3>
<p>新的页面一般不需要额外的 CSS</p>
<h4>标题</h4>
<p>根据你需要的语义来完成你想要的表现</p>
<p id="b-62" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1705ck6tz5fg_b" style="width:227px;height:242px;" /></p>
<h3>列表</h3>
<p>必须对页面中的所有模块可用</p>
<p id="jkq3" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1706crcfsrcx_b" style="width:426px;height:387px;" /></p>
<h3>SIDE-WIDE LOGES</h3>
<ul>
<li>标题</li>
<li>列表(比如 action list, external link list, product list, 或 feature list)</li>
<li>模块 headers 和 footers</li>
<li>栅格</li>
<li>按钮</li>
<li>圆角 boxes</li>
<li>Tabs, Carousel, toggle blocks</li>
</ul>
<h3>避免重复</h3>
<p>在不能增加价值的元件上浪费性能资源</p>
<h3>近似相同的模块</h3>
<p>h3 和 h5 太相似了</p>
<p id="wfb4" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1707dj2fp6c3_b" style="width:180px;height:180px;" /></p>
<h3>经验法则:</h3>
<p>如果一个页面中的两个模块看起来太相似,它们在一个站点中太相似,选择一个!</p>
<h3>例子</h3>
<p>Yahoo! 个人财经</p>
<p id="rtk:" style="text-align:left;">
<img style="width: 363px; height: 498px;" src="http://docs.google.com/File?id=ddrrtxb_173622tnhbd8_b"></p>
<p id="r16c" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1709hgg5wgg6_b" style="width:471px;height:348px;" /></p>
<p>2+不同的 tab 风格。能用相同的图像吗?</p>
<p id="nm00" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1710f4q2ssgb_b" style="width:480px;height:275px;" /></p>
<p>3个元件的轮廓太相似了。选择一个。</p>
<p id="bm4w" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_17113dm793d6_b" style="width:480px;height:353px;" /></p>
<p>模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。</p>
<h3>避免位置依赖(location-dependent)的样式</h3>
<p>沙盒比意大利面条好,不过引起了性能问题</p>
<h3>避免什么?</h3>
<h3>运行区域</h3>
<h3>不时...</h3>
<h3>返回直径</h3>
<h3>破坏</h3>
<h3>在 CSS 中我们一直这么做</h3>
<h3>破坏</h3>
<p id="wqyw" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_17125tfxjff4_b" style="width:402px;height:74px;" /></p>
<p>不好的:</p>
<pre><code>#weatherModule h3{color:red;}
#tabs h3{color:blue;}</code></pre>
<ul>
<li>h3 的全局颜色未定义,将导致
<ul>
<li>在新模块中没有定义样式</li>
<li>开发者被迫为相同的样式写更多 CSS</li>
</ul>
</li>
</ul>
<p>推荐:</p>
<pre><code>h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue;}</code></pre>
<ul>
<li>定义了全局颜色(更好!)</li>
<li>Weather 和 tabs 覆盖了缺省的 h3
<ul>
<li>h3 的3种样式在同一模块中不能并存</li>
<li>缺省样式不能用在 weather 和 tabs 除非有更高的优先级</li>
</ul>
</li>
<li>Weather 和 tabs 的 h3 永远不能在其他模块中使用</li>
</ul>
<h3>一致性</h3>
<p>写更多规则去重写之前的疯狂规则。</p>
<p>比如标题在任意模块的表现是可预见的。</p>
<h3>用这个来代替</h3>
<pre><code>h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}</code></pre>
<ul>
<li>定义全局值</li>
<li>遵循语义(同时允许灵活的视觉)</li>
</ul>
<h3>需要超过6个标题?</h3>
<p>真的吗?没有重复?没有相似的?</p>
<h3>仍然需要更多标题?</h3>
<pre><code>.category{...}
.section{...}
.product{...}
.prediction{...}</code></pre>
<ul>
<li>通过对象本身的 class 扩展标题对象</li>
<li>避免使用继承来改变嵌套对象的表现</li>
</ul>
<h3>抽象</h3>
<p>复用代码段</p>
<h3>重复编码</h3>
<p>是抽象不同水准的语义失败所导致的</p>
<h3>分离:</h3>
<ul>
<li>容器和内容</li>
<li>结构和皮肤</li>
<li>轮廓和背景</li>
<li>对象和混合物</li>
</ul>
<h3>分离容器和内容</h3>
<p>定义每个对象的界限</p>
<h3>开放的编辑区</h3>
<p>图像或 flash</p>
<p id="l:lo" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1713cw88f5gw_b" style="width:395px;height:118px;" /></p>
<p id="udxf" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1714gxw7s4f4_b" style="width:400px;height:129px;" /></p>
<p id="cqhy" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1715pkxbmfcp_b" style="width:600px;height:192px;" /></p>
<p id="o.87" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1716f6w4mgf4_b" style="width:736px;height:493px;" /></p>
<h3>混合与匹配</h3>
<p>容器和内容对象达到高性能设计</p>
<h3>分离轮廓和背景</h3>
<p>内部透明!</p>
<h3>MAKING IT LOOK FAB</h3>
<p>需要小心选择像素</p>
<p id="nuzj" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1717cxrd6xgf_b" style="width:184px;height:564px;" /></p>
<p>考虑 PNG8 来渐进增强</p>
<p><img style="width: 361px; height: 260px;" src="http://docs.google.com/File?id=ddrrtxb_1735hpptpxcm_b"></p>
<p><img style="width: 509px; height: 440px;" src="http://docs.google.com/File?id=ddrrtxb_1737cd8862fm_b"></p>
<h3>陷阱</h3>
<p>可变的或渐变背景</p>
<p id="ftvi" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1718gjz63zdz_b" style="width:316px;height:159px;" /></p>
<p>提防圆角后的可变或渐变背景</p>
<h3>分离结构和皮肤</h3>
<p>两个单独的 class</p>
<p>示例:模块</p>
<p id="o-uf" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1719gqs855dg_b" style="width:545px;height:341px;" /></p>
<h3>结构</h3>
<p>Sloves borwser bugs, positions presentational elems, and generally does the heavy
lifting of CSS</p>
<p id="ssvj" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1720d4hqjkgk_b" style="width:350px;height:409px;" /></p>
<p id="ep8j" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1721cfngnwgs_b" style="width:348px;height:408px;" /></p>
<p id="s1_x" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1722j3g5tzhq_b" style="width:359px;height:419px;" /></p>
<p id="y.xz" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1723gjtfmxdr_b" style="width:389px;height:454px;" /></p>
<h3>皮肤</h3>
<p>弄漂亮些。</p>
<p>目标是非常明确的皮肤,复杂的被结构对象和跨网站共享所吸收(The goal is very predictable skins, complexity is
absorbed by the structure object and shared across the site)。</p>
<p id="syqz" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1724dfd8d8dn_b" style="width:437px;height:268px;" /></p>
<pre><code>/* ----- 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);
}</code></pre>
<p id="ddia" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_17254wr28kcn_b" style="width:391px;height:152px;" /></p>
<h3>什么属于皮肤?</h3>
<p>皮肤的每个值应该是确定的,容易预测并测量。</p>
<ul>
<li>颜色</li>
<li>边框</li>
<li>图像</li>
</ul>
<h3>灵活性</h3>
<p>可延长的高度和宽度</p>
<p id="x6u9" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1726g3tmkvgt_b" style="width:763px;height:562px;" /></p>
<p id="ix6c" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1727fj2cv3dt_b" style="width:767px;height:561px;" /></p>
<h3>固定尺寸</h3>
<p>Limit the ways in which a module can be resued</p>
<p id="qtpl" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1728gxzxm6nt_b" style="width:647px;height:222px;" /></p>
<h3>学着爱上栅格</h3>
<p>坚信其会很美</p>
<h3>传授 OO CSS</h3>
<p>给设计师和工程师</p>
<h3>自然改进</h3>
<p>从简单到复杂的任务</p>
<p id="xe:4" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1729g8wgtrfg_b" style="width:671px;height:187px;" /></p>
<h3>一个真实案例</h3>
<p>Gonzalo Cordero Yahoo! 前端开发工程师</p>
<p id="wxdi" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1730fvkdk7gd_b" style="width:690px;height:305px;" /></p>
<h3>需要考虑的设计因素</h3>
<ul>
<li>跨浏览器兼容</li>
<li>多语言支持</li>
<li>可访问性</li>
<li>按时完成全部布局和功能</li>
</ul>
<h3>困惑</h3>
<p id="aqyt" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1731cftj8mgz_b" style="width:509px;height:538px;" /></p>
<h3>WEB 妥协</h3>
<ul>
<li>为什么“简单的东东”变复杂?</li>
<li>为什么要妥协?</li>
<li>为什么我们不能依固定的规则和结构?像讲台上那样?</li>
</ul>
<h3>OOCSS SAVES THE DAY</h3>
<ul>
<li>单个简单的标签结构</li>
<li>跨浏览器支持(甚至 IE 5.5!)</li>
<li>非常少的 CSS</li>
<li>可剥离的,容易应用在多个设计上</li>
</ul>
<p id="n3h7" style="text-align:left;">
<img src="http://docs.google.com/File?id=ddrrtxb_1732fsh962fz_b" style="width:577px;height:410px;" /></p>
<h3>译注</h3>
<p>这不仅仅是 OOCSS!</p>
<p>本文内容来源于:</p>
<ul>
<li><a href="http://www.slideshare.net/stubbornella/object-oriented-css">Object Oriented CSS</a> <a href="http://us.dl1.yimg.com/download.yahoo.com/dl/ydn/nicolesullivan.m4v">高清视频下载</a></li>
<li><a href="http://www.slideshare.net/stubbornella/what-is-object-oriented-css">What is Object Oriented CSS?</a></li>
<li><a href="http://www.slideshare.net/stubbornella/the-fast-and-the-fabulous">The Fast And The Fabulous</a></li>
<li><a href="http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-ajax-experience-2009">The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009</a></li>
<li><a href="http://www.slideshare.net/stubbornella/after-yslow-a">After YSlow "A"</a></li>
<li><a href="http://www.slideshare.net/stubbornella/designing-fast-websites-presentation">Design Fast Websites</a></li>
</ul>
<p>由 <a href="http://www.99css.com">ytzong</a> 翻译整理,算是把 Yahoo! 女性能工程师 Nicole Sullivan 给“榨干”了,嘿嘿。 另外,之前的《<a href="http://www.99css.com/2009/10/taming-css-selectors.html">驯服CSS选择器</a>》也是她的作品,富含 OOCSS 的思想。</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-38271495951994707312009-10-02T17:06:00.004+08:002009-10-02T17:11:00.167+08:00[翻译]加速 JavaScript:处理 DOM<ul>
<li>原文:<a href="http://code.google.com/speed/articles/javascript-dom.html">Speeding up JavaScript: Working with the DOM</a></li>
<li>作者:KeeKim Heng, Google 页面工程师</li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<p>当制作 RIA(Rich Internet Application) 时,我们使用 JavaScript 来改变或增加元素。这是靠 DOM (Document
Object Model 文档对象模型) 来完成的,这是如何影响 app 的速度呢?</p>
<p>处理 DOM 会使浏览器 reflow (浏览器决定如何显示东东的进程)。直接操作 DOM,改变元素的 CSS 样式,改变浏览器窗口的大小会触发 reflow。访问元素的布局属性(如
offsetHeight 和 offsetWidth) 会触发 reflow。由于每次 reflow 需要时间,所有我们能减少 reflow 越多,app 越快。</p>
<p>处理 DOM 不仅操作页面中存在的元素还包括创建的元素。下面四个部分覆盖了 DOM 操作和 DOM generation,减少浏览器中 reflow 触发的次数。</p>
<h3>CSS class 切换 DOM 操作</h3>
<p>这个部分我们改变一个元素和它后代的多个样式属性,只触发一次回流。</p>
<h4>问题</h4>
<p>我们写一个函数来改变一个元素中的所有链接的 className 属性。可以通过简单遍历每个 a 并更新他们的 className 属性。</p>
<pre><code>function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}</code></pre>
<h4>解决方法</h4>
<p>我们可以增加一个设置所有样式属性的 class 来解决这个问题。通过给元素增加这个class,现在我们只触发一次浏览器 reflow。同时分离了表现和行为(译注:这个在我之前的《<a href="http://www.99css.com/2009/04/bodyclassgoogle-reader.html">body标签class属性的妙用(Google
Reader前端简单分析)</a>》中也有提及) </p>
<pre><code>.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
function selectAnchor(element) {
element.className = 'selectedAnchor';
}</code></pre>
<h3>Out-of-the-flow DOM 操作</h3>
<p>这个部分我们创建多个元素并把它们插入 DOM 只触发一次 reflow。使用了叫做 DocumentFragment 的东东。我们在 DOM 外创建一个
DocumentFragment (所以是 out-of-the-flow)。之后创建并添加进多个元素。最后,我们移动该 DocumentFragment
中的所有元素到 DOM,这只触发一次 reflow。</p>
<h4>问题</h4>
<p>让我们写一个改变一个元素中所遇链接的 className 属性的函数。通过简单的遍历每个 a 并更新他们的 href 属性。问题在于,每个 a 会触发一次
reflow。</p>
<pre><code>function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}</code></pre>
<h4>解决方法</h4>
<p>解决这个问题,可以从 DOM 中移除元素,更新所有链接,之后插入回元素到原始位置。为此,我们写一个可复用的函数,不仅从 DOM中移除元素,并且返回一个将会插入回元素至元素位置的函数。</p>
<pre><code>/**
* 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);
}
};
}</code></pre>
<p>现在我们用这个函数去更新一个元素中的所有链接,这 out-of-the-flow,并且在移除元素时和插入元素时只触发一次 reflow。</p>
<pre><code>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();
}</code></pre>
<h3>单个元素的 DOM Generation</h3>
<p>这个部分我们创建并添加一个元素至 DOM 中,仅触发一次 reflow。创建元素后,在新元素添加至 DOM 前做好所有的改变。</p>
<h4>问题</h4>
<p>写一个添加新a 元素至父元素的函数。这个函数让你为该链接提供 class 和 文本。我们可以创建元素,添加进 DOM,之后设置这些属性。这触发3次 reflow。</p>
<pre><code>function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}</code></pre>
<h4>解决方法</h4>
<p>最后插入这个子节点至 DOM。这触发一次 reflow。</p>
<pre><code>function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}</code></pre>
<p>尽管如此,如果我们要添加大量的链接至一个元素时这有一些问题。通过这个方法,每添加一个链接触发一次 reflow。下一部分解决这个问题。</p>
<h3>DocumentFragment DOM Generation</h3>
<p>这个部分,我们创建多个元素并把它们插入 DOM 触发一次 reflow。使用了一个叫做 DocumentFragment 的东东。我们在 DOM 外创建一个
DocumentFragment (所以是 out-of-the-flow)。之后创建并添加多个元素进来。最后,把所有 DocumentFragment 中的元素移至
DOM 并只触发一次 reflow。</p>
<h4>问题</h4>
<p>写一个添加10个连接至一个元素的函数。如果只是简单的添加每个新链接至这个元素,会触发10次 reflow。</p>
<pre><code>function addAnchors(element) {
var anchor;
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
element.appendChild(anchor);
}
}</code></pre>
<h4>解决方法</h4>
<p>为了解决这个问题,我们创建一个 DocumentFragment 并添加每个新链接至此。当我们使用appendChild 添加 DocumentFragment
至元素时,所有 DocumentFragment 的子节点 实际上添加进了这个元素中。这只触发一次 reflow。</p>
<pre><code>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);
}
</code></pre>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-85566938322901519792009-10-02T15:47:00.005+08:002009-10-02T16:01:15.925+08:00[翻译]用Page Speed Activity捕获并分析浏览器渲染<ul>
<li>原文:<a href="http://code.google.com/speed/articles/browser-paint-events.html">Capturing
and analyzing browser paint events using Page Speed Activity</a></li>
<li>作者:Bryan McQuade, 软件工程师</li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<h3>安装</h3>
<p>Page Speed 是一个 Firebug/Firefox 扩展,安装地址:<a href="http://code.google.com/speed/page-speed/download.html">http://code.google.com/speed/page-speed/download.html</a></p>
<h3>背景:逐步呈现</h3>
<p>快速的网页逐步呈现。即随浏览器的加载而逐步显示其内容。一个逐步呈现的页面给浏览者页面在加载的视觉回馈,并尽快给给用户请求信息。<a href="http://code.google.com/speed/page-speed/docs/rendering.html#PutCSSInHead">Google</a>
和
<a href="http://developer.yahoo.net/blog/archives/2007/07/high_performanc_4.html">
Yahoo</a> 都建议逐步呈现页面,比如把 CSS 写在页面 head 中。</p>
<p>对多绝大多数页面来说,有一些很好的实践来优化逐步呈现。一个快速的页面应该先给用户呈现可见的内容(译注:浏览器第一屏),随后呈现视线外的内容(即当前滚动区域外的内容)。一个快速的页面会在加载和渲染重量级的资源(如图片和视频)之前加载和渲染轻量级的资源(如文字)。</p>
<p>一些众所周知的技术会禁止逐步呈现。使用大量表格,甚至用来布局,在一些浏览器中会使逐步呈现失效。应用样式表在页面后方,即便这些样式表在开始的页面加载中使用不到,也会阻止逐步呈现。</p>
<h3>用Page Speed Activity捕获浏览器渲染</h3>
<p>很难决定一个页面是否要进行逐步呈现优化。大多数页面对肉眼来说呈现太快,以至于意识不到个别的渲染事件(尤其是在高速网络连接下),而且看不到屏幕区域外的内容是否呈现了。</p>
<p>幸运的是,Firefox 3.5 支持捕获浏览器渲染事件。Page Speed Activity 面板用这个功能可为页面呈现过程录制一个“幻灯片”。幻灯片的每一单元显示了哪一个屏幕区域被渲染(黄色),哪些区域在屏幕外(灰色)用户看不到。</p>
<h3>启用渲染快照</h3>
<p>由于捕获渲染快照会增加一些开销并拖慢浏览器,Page Speed Activity 屏幕快照默认是禁用的。启用渲染快照,确保Activity 下拉菜单中的
"Paint Snapshots (slow)" 被选中。</p>
<img style="width: 774px; height: 151px;" src="http://docs.google.com/File?id=ddrrtxb_1699dm8mjsc8_b">
<h4>Activity 面板中的渲染快照</h4>
<p>一旦渲染快照启用,就开始用 Activity 面板录制。Activity 面板将在时间线上显示网络,缓存,和 JavaScript 事件。渲染快照幻灯片出在
Activity 面板右侧。渲染快照会按捕获顺序绘制,最早的快照在顶部。拖动右侧的滚动条可看到所有的快照。</p>
<img style="width: 583px; height: 371px;" src="http://docs.google.com/File?id=ddrrtxb_1700hccct9dh_b">
<h3>快照回放示例</h3>
<p>译注:请到<a href="http://code.google.com/speed/articles/browser-paint-events.html#animimage">这里</a>看演示</p>
<div style="width:300px;height:588px;border:thin solid #ccc;margin-right:12px;margin-top:1em;float:left;position:relative">
<span style="position:absolute;background-color:orange;margin:2px;padding:2px;font-weight:bold;display:none" id="loadingbadge"></span>
<img id="animimage" src="http://docs.google.com/File?id=ddrrtxb_1703g5gw62hk_b" style="margin-top:0px"></img>
</div>
<p>在这个例子中,我们可以看到以渲染快照慢动作回放的 Google 搜索结果页面的逐步呈现。这些快照用 modem 连接捕获。</p>
<p>用 Page Speed Activity 回放这个例子的渲染快照,请点击 Play Paint Events按钮。</p>
<p>在快照中,用户可见的区域为白色,用户不看见的区域(当前浏览器滚动区域之外)用灰色遮罩。每个快照用黄色遮罩显示重绘区域。</p>
<p>请注意,可见区域的文本内容首先呈现,之后是屏幕外的文本内容。通过先呈现屏幕内的可见区域,用户尽早获取了尽可能多的有用信息。</p>
<p>文本内容呈现后,图像内容接着呈现。推迟图像内容呈现直到文本内容下载完成并呈现完成,这使得浏览器尽早的显示文本内容,再一次尽早给用户尽可能多的有用信息。</p>
<p>在页面标签中给所有图像指定宽度和高度属性,浏览器不需在图像加载后 reflow 页面。尽管没有严格的与逐步呈现有关,指定图像的宽高会带来更好的用户体验,在页面加载时页面内容不会在附近移动。</p>
<p>最后,注意图像自身的逐渐呈现。允许用户在全部图像完成加载前看到图像内容。现代浏览器在 HTML 中用 <img> 标签逐步呈现图像。相反,许多浏览器中用
CSS 的background-image 属性不会逐步呈现。为了逐步呈现图像,用 HTML 的 <img> 标签来代替 CSS 的 background-image
属性。</p>
<br style="clear:both">
<h3>总结</h3>
<p>使用 Page Speed Activity 面板的渲染快照功能,我们可以清晰的观察页面的逐步呈现行为。这使得网页开发者可以为逐步呈现而优化页面,这是快速网页非常重要的特性之一。</p>
<h3>延伸阅读</h3>
<ul>
<li><a href="http://docs.google.com/speed/page-speed/index.html">Page Speed</a> - 开源的 Firefox/Firebug
扩展,评估页面性能并捕获屏幕快照</li>
<li><a href="http://docs.google.com/speed/page-speed/docs/rendering.html#PutCSSInHead">Web Performance
Best Practices: Put CSS in the document head</a> - Google 的最佳网页优化实践讨论 CSS 放在页面
head 的重要性</li>
<li><a href="http://www.useit.com/papers/responsetime.html">Response Times:
The Three Important Limits</a> - Jakob Nielsen 指出了一些关于响应时间的经验准则,并强调当页面加载过程中给用户持续反馈的重要性</li>
<li><a href="http://www.vbulletin.org/forum/showthread.php?t=161099">How Design
Affects Performance: Progressive Rendering</a> - 做了一个非常好的并排视觉对比来说明逐步呈现的好处,讨论了HTML
表格对逐步呈现的影响</li>
<li>
<a href="http://books.google.com/books?id=jRVlgNDOr60C&lpg=PA37&pg=PA37#v=onepage&q=&f=false">
High Performance Web Sites: Put Stylesheets at the Top</a> - Steve Souders 的第一本网页性能的书介绍了如何加载样式表可以禁止逐步呈现</li>
<li><a href="http://www.charlesproxy.com">Charles Web Debugging Proxy</a> -
Charles 允许网页开发者调节他们的网络连接,去模拟低速用户的页面加载</li>
</ul>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-81407697982673881112009-10-02T13:25:00.002+08:002009-10-02T13:29:12.267+08:00用 HTML 5 来提升性能<p>Google 网站管理员 Jens Meiert 发表了一篇《<a href="http://code.google.com/intl/zh-CN/speed/articles/html5-performance.html">Using
HTML 5 for performance improvements</a>》,大部分内容在《<a href="http://code.google.com/intl/zh-CN/speed/articles/optimizing-html.html">Reducing
the file size of HTML documents</a>》(<a href="http://www.99css.com/2009/06/reducing-file-size-of-html-documents.html">中文版</a>)中都有提及,新增的部分为<code>async</code>
(和 <code>defer</code>),以下为该段的翻译:</p>
<blockquote>
<p><code>async</code> 和 <code>defer</code> 使用在 <code>script</code> 元素上。</p>
<p>要解释为什么这些属性会提升性能,最好是看一下未使用时发生了什么 -- 各自的脚本在用户代理(浏览器,下同)继续解析页面前将被提取并直接执行,有时这个行为是我们想要的,有时不是。</p>
<p>新的 <code>async</code> 属性允许各自的脚本在可用时异步执行。HTML 4 中已经包含 <code>defer</code> 属性,指出 <code>defer</code> “对用户代理提供一个暗示:脚本不产生任何文档内容(比如,在
Javascript 中没有 <code>document.write</code> ),这样,用户代理会继续解析并渲染”。</p>
<p>如果不使用 <code>async</code> 属性而只使用 <code>defer</code>,脚本在页面解析完成时已经执行。即使指定了 <code>async</code> 属性,也可同时指定<code>defer</code> 属性。这使得那些旧的只理解
<code>defer</code> 的浏览器来回退 <code>defer</code> 行为而非默认的同步阻塞行为。</p>
</blockquote>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-84875986307854070162009-10-01T01:09:00.008+08:002009-10-18T22:54:00.642+08:00[翻译]驯服CSS选择器--健壮我们的样式表<ul>
<li>PPT:<a href="http://www.slideshare.net/stubbornella/taming-css-selectors">Taming
CSS Selectors</a></li>
<li>作者:Nicole Sullivan</li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<h3>CSS 文件的大小和所引起的 HTTP 的请求数</h3>
<p>是 CSS 性能的最关键因素</p>
<h3>回流(reflow)和渲染时间</h3>
<p>(非常!)没那么重要</p>
<h3>副本(duplication)比陈旧的规则(stale rules)更糟糕</h3>
<p>因为我们有工具处理后者</p>
<h3>定义缺省值</h3>
<p>不要在每处都重复编码</p>
<p>不好的:</p>
<pre><code>#weatherModule h3{color:red;}
#tabs h3{color:blue;}</code></pre>
<p>推荐:</p>
<pre><code>h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}</code></pre>
<h3>用单独的 class 来定义结构</h3>
<p>不要在每处都重复编码</p>
<p>
<img src="http://docs.google.com/File?id=ddrrtxb_1692dgzx6hff_b" style="width:592px;height:171px;" /></p>
<h3>使用 class</h3>
<p>而不是元素选择器</p>
<p>不好的:</p>
<pre><code>div.error{...}</code></pre>
<p>推荐:</p>
<pre><code>.error{绝大多数代码写在这里}
div.error{单独定义}
p.error{单独定义}
em.error{单独定义}</code></pre>
<h3>避免使用元素选择器</h3>
<p>初始化除外</p>
<p>不好的:</p>
<pre><code>div{...}
ul{...}
p{...}</code></pre>
<p>推荐:</p>
<pre><code>.error{...}
.section{...}
.products{...}</code></pre>
<h3>给规则同样的权重</h3>
<p>使用级联去重写先前的规则</p>
<p>不好的:</p>
<pre><code>.myModule .inner b{...}
.myModule2 b{...}</code></pre>
<p>推荐:</p>
<pre><code>.myModule b{...}
.myModule2 b{...}</code></pre>
<h3>保守的使用 hack</h3>
<p>不好的:</p>
<pre><code>.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd{...}</code></pre>
<p>推荐:</p>
<pre><code>.mod .hd{color:red;_zoom:1;}
.weatherMod .hd{...}</code></pre>
<p>译注:此点来自<a href="http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-ajax-experience-2009">The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009</a>第96P,为作者在 Ajax Experience 2009 上所做的补充。</p>
<h3>避免指定位置</h3>
<p>应用 class 在你想要改变的对象上</p>
<p>不好的:</p>
<pre><code>.sidebar ul{...}
.header ul{...}</code></pre>
<p>推荐:</p>
<pre><code>.mainNav{...}
.subNav{...}</code></pre>
<h3>避免太过特别的 class</h3>
<p>它们是都有语义的,而且有限制</p>
<p>不好的:</p>
<pre><code>.ducatiMonster620{...}
.nicolesDucatiMonster620{...}</code></pre>
<p>推荐:</p>
<pre><code>.vehicle{...}
.motorcycle{...}</code></pre>
<h3>避免单独的定义</h3>
<p>id 在每个页面只能使用一次</p>
<p>不好的:</p>
<pre><code>#myUniqueIdentifier{...}
#myUniqueIdentifier2{...}</code></pre>
<h3>混合使用</h3>
<p>避免重复编码</p>
<p>
<img src="http://docs.google.com/File?id=ddrrtxb_1693fc4vzhdf_b" style="width:448px;height:111px;" /></p>
<p>
<img src="http://docs.google.com/File?id=ddrrtxb_1694fdq9mthd_b" style="width:450px;height:115px;" /></p>
<h3>封装</h3>
<p>不要直接访问对象的子节点</p>
<p>
<img src="http://docs.google.com/File?id=ddrrtxb_1696g3tdd7jd_b" style="width:346px;height:168px;" /></p>
<p>不好的:</p>
<pre><code>.inner{...}
.tr{...}
.bl{...}</code></pre>
<p>推荐:</p>
<pre><code>.weatherMod .inner{...}
.weatherMod .tr{...}
.weatherMod .bl{...}</code></pre>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com3tag:blogger.com,1999:blog-3178662459722973496.post-15071943966310055612009-09-27T15:01:00.005+08:002009-10-24T13:26:42.498+08:00IE6 绝对定位元素的 1px 间距 bug<p>IE6- 有一个非常讨厌的 bug,当绝对定位元素的父元素高或宽为奇数时,bottom 和 right 会获取错误。</p>
<p><b>HTML</b></p>
<pre><code><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></code></pre>
<p><b>CSS</b></p>
<pre><code>.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}</code></pre>
<img style="width: 840px; height: 483px;" src="http://docs.google.com/File?id=ddrrtxb_1689c3pf3vcs_b">
<p>可以看出在奇数容器下出现了1px 间距,而在偶数容器下正常。</p>
<p><b>不完美的解决方法:改变结构并使用浮动</b></p>
<p><b>HTML</b></p>
<pre><code><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></code></pre>
<p><b>CSS</b></p>
<pre><code>.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}</code></pre>
<p><a href="http://www.99css.com">ytzong</a> 简译自《<a href="http://www.pmob.co.uk/temp/onepxgap.htm">IE6 1px gap on absolute elements</a>》</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com2tag:blogger.com,1999:blog-3178662459722973496.post-77851719854873124032009-09-24T00:13:00.007+08:002009-10-03T19:08:56.391+08:00[翻译]重(zhòng)载下的动态 UI 设计技巧<p>TechTarget 主办的 Ajax Experience 2009 大会9月14日至16日在波士顿举行,业内大牛纷纷向 Web2.0 世界发起挑战,探讨一些诸如用户体验、高性能与可维护性、架构等伟大主题,放出的 PPT <a href="http://www.slideshare.net/ajaxexperience2009/presentations">在此</a>。</p>
<p>下面是 Patrick Lightbody
分享的后半段总结翻译(前半段为演示):</p>
<ul>
<li>PPT:<a href="http://www.slideshare.net/ajaxexperience2009/patrick-lightbody-presentation-tae-slides">Design Tips for Dynamic UIs Under Heavy Load</a></li>
<li>作者:Patrick Lightbody</li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<h3>为失败而设计</h3>
<ul>
<li>不要忘记 AJAX 仍为网络应用
<ul>
<li>网络会由于各种原因失败</li>
<li>网络不可预知</li>
</ul>
</li>
<li>为 AJAX 请求意外添加 Hook
<ul>
<li>为存储请求状态及重试而编码</li>
</ul>
</li>
<li>为失败而测试</li>
</ul>
<h3>谨慎对待 DOM</h3>
<ul>
<li>非必要时不要改变 DOM 状态
<ul>
<li>Avoid aggressive “synchronization” common in some AJAX toolkits</li>
</ul>
</li>
</ul>
<ul>
<li>合并数据而非替换
<ul>
<li>页面局部加载(div.innerHtml=...)也不是很好</li>
<li>会带来更多工作,但是运行不畅时会有更好的体验</li>
</ul>
</li>
</ul>
<h3>锁住 UI</h3>
<ul>
<li>不要给用户机会去改变那些可能由你来改变的事情
<ul>
<li>比如提交后禁用按钮</li>
<li>如有必要,使用模拟的对话框来锁住整个 UI</li>
</ul>
</li>
<li>请记住:要有恢复措施!<ul>
<li>为失败而测试并确保发生意外时 UI 解锁</li>
</ul>
</li>
</ul>
<h3>告知用户</h3>
<ul>
<li>始终让用户知道正在发生什么</li>
<li>当发生糟糕的错误时给他们一个完美的“逃生舱”
<ul>
<li>为逃生舱设置入口</li>
<li>Gmail 是个很好的案例</li>
</ul>
</li>
<li>至少,有个简单的"loading"指示器</li>
</ul>
<img style="width: 511px; height: 241px;" src="http://docs.google.com/File?id=ddrrtxb_1687dx7w5s9g_b">ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-80530159070385177962009-09-23T22:22:00.002+08:002009-09-23T22:23:59.041+08:00最好的前端工作流程?<img style="width: 516px; height: 595px;" src="http://docs.google.com/File?id=ddrrtxb_1686fz59qpcm_b">
<p>from <a href="http://www.position-absolute.com/articles/best-front-end-work-flow/">Best front-end workflow within a production team?</a></p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-54260394695981541492009-09-08T17:23:00.004+08:002009-10-24T13:26:42.499+08:00使用 background:url(#) 解决 IE6&7 bug<p>通过设置<code>selector{background:url(#)}</code>可以解决一些IE6&7 bug:</p>
<ol>
<li><a href="http://www.99css.com/2009/04/ie-67-bug.html">鼠标滚轮失效bug</a>,<a href="http://fabdevelop.com/blog/fileadmin/filemanager/bug.html">demo</a>。当时用的是添加背景色的方法:
<pre><code>#works{background:#fff}</code></pre>
<p>也可通过下面方法解决:</p>
<pre><code>#works{background:url(#)}</code></pre>
</li>
<li>a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击,<a href="http://haslayout.net/demos/no-transparency-click-bug-demo.html">demo</a>
<pre><code>a{background:none}</code></pre>
<p>解决方法(<a href="http://haslayout.net/demos/no-transparency-click-bug-demo-fixed.html">demo</a>):</p>
<pre><code>a{background:url(#);/*或指向透明的gif*/}</code></pre>
<p>详见 <a href="http://haslayout.net/css/No-Transparency-Click-Bug">No Transparency
Click Bug</a></p>
</li>
<li>a 局部点击bug,<a href="http://haslayout.net/demos/partial-click-v2-demo.html">demo</a>。
解决方法(<a href="http://haslayout.net/demos/partial-click-v2-demo-fixed.html">demo</a>):
<pre><code>a{background:url(#)}</code></pre>
<p>或:</p>
<pre><code>a{background: #fff}</code></pre>
<p>详见:<a href="http://haslayout.net/css/Partial-Click-Bug-v2">Partial Click
Bug v2</a></p>
</li>
</ol>
<p>延伸阅读:</p>
<ul>
<li><a href="http://haslayout.net/css/">Internet Explorer CSS Bugs</a></li>
</ul>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-1573304989947262962009-09-01T14:53:00.001+08:002009-09-01T14:55:04.205+08:00CssOptimizer1.0 发布<p>抽空将刚到公司时写的 CSS 压缩工具由 web 版移植为了离线版(这也是我的第一个 WinForm 程序),操作同 <a href="http://psydk.org/PngOptimizer.php">PngOptimizer</a>(也许要翻墙) 类似,将要压缩的
CSS 文件拖拽至程序窗口即可,之后会生成压缩后的文件并建立副本。</p>
<img style="width: 407px; height: 333px;" src="http://docs.google.com/File?id=ddrrtxb_1681fpkxxbf9_b">
<p>压缩原理如下:</p>
<ol>
<li>删除换行符</li>
<li>删除}前的分号</li>
<li>删除注释</li>
</ol>
<p>最好配合 Microsoft Expression Web 使用:</p>
<ol>
<li>EW进行如下设置:进入工具菜单 - 网页编辑器选项 - 代码格式选项卡,将 CSS
下拉框中所有项的格式都设置为“行前:0”,“行后:0”,“空格后:0”
<img style="width: 381px; height: 90px;" src="http://docs.google.com/File?id=ddrrtxb_1682hg876chq_b">
</li>
<li>用 EW 编辑 CSS 时,右键“重设 CSS 格式”即可对代码进行格式化,之后保存</li>
<li>用本工具压缩</li>
</ol>
<p>注:本程序只能在 Windows 下使用并须安装 .NET framework (EW 自带 3.0)</p>
<p>下载地址:<a href="http://www.brsbox.com/filebox/down/fc/922b69797c5cf1a062b7a2415594bd46">http://www.brsbox.com/filebox/down/fc/922b69797c5cf1a062b7a2415594bd46</a>,下载后解压到任意目录即可</p>
<br>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-90686801126246670882009-08-27T16:29:00.001+08:002009-08-27T16:30:59.872+08:00YSlow 规则权重<p><img style="width: 620px; height: 460px;" src="http://docs.google.com/File?id=ddrrtxb_1677hqgkwgcw_b"></p>
<p><img style="width: 620px; height: 600px;" src="http://docs.google.com/File?id=ddrrtxb_1678d5c757g4_b"></p>
<p><img style="width: 620px; height: 560px;" src="http://docs.google.com/File?id=ddrrtxb_1679gndtjbhm_b"></p>
<p>from <a href="http://www.slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications">Don't make me wait! or Building High-Performance Web Applications</a>
<br>
</p><br>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-7625349808354652482009-08-27T16:18:00.001+08:002009-08-27T16:23:10.231+08:00IE8 CPU 耗费情况<p><img style="width: 600px; height: 450px;" src="http://docs.google.com/File?id=ddrrtxb_1226p48jrkpq_b"></p>
<p>from <a href="http://videos.visitmix.com/MIX09/T52F">A Lap around Windows Internet Explorer 8</a></p>
<br>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-87629047560861128752009-08-17T16:55:00.006+08:002009-08-17T17:16:06.937+08:00webrebuild.ORG第三周年座谈会<p>一个深圳地区的WEB标准聚会,详情:<a href="http://bbs.blueidea.com/thread-2944698-1-1.html">http://bbs.blueidea.com/thread-2944698-1-1.html</a></p>
<p>各位宅男宅女,出洞吧~</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com2tag:blogger.com,1999:blog-3178662459722973496.post-23814178478169784482009-08-04T17:38:00.003+08:002009-08-27T16:13:39.225+08:00IE 团队的前端性能优化建议<p>2009-3-18 ~ 2009-3-20,微软面向 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯维加斯举行,本届大会的主题是"The Next Web Now",关于开发技术和设计怎么更加有效结合起来,服务未来互联网的发展趋势。120多场精彩的课程,3000多来自各国的专家参会。</p>
<p>视频及PPT<a href="http://videos.visitmix.com/MIX09/All">在此</a>下载,虽然其中多数是微软的产品宣讲,不过也有一些很有价值的分享,比如:</p>
<ul>
<li>C23F
<a href="http://videos.visitmix.com/MIX09/C23F" title="Windows Internet Explorer 8 in the Real World: How Is Internet Explorer 8 Used">
Windows Internet Explorer 8 in the Real World: How Is Internet Explorer 8 Used</a></li>
<li>C24F
<a href="http://videos.visitmix.com/MIX09/C24F" title="Measuring Social Media Marketing">
Measuring Social Media Marketing</a></li>
<li>C26F
<a href="http://videos.visitmix.com/MIX09/C26F" title="Designing the Windows 7 Desktop Experience">
Designing the Windows 7 Desktop Experience</a></li>
<li>T25F
<a href="http://videos.visitmix.com/MIX09/T25F" title="Web Development Using Microsoft Visual Studio: Now and in the Future">
Web Development Using Microsoft Visual Studio: Now and in the Future</a></li>
</ul>
<p>今天主要介绍的是 IE 团队给出的前端性能优化建议,下面是摘要翻译,有兴趣的话可以看下<a href="http://mschannel9.vo.msecnd.net/o9/mix/09/pptx/t53f.pptx">原
PPT</a></p>
<ul>
<li>出处:<a href="http://videos.visitmix.com/MIX09/T53F" title="Building High Performance Web Applications and Sites">Building
High Performance Web Applications and Sites</a></li>
<li>演讲人:John Hrvatin,Internet
Explorer 项目经理</li>
<li>翻译整理:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<p><strong>中心思想:</strong></p>
<ul>
<li>适用于所有浏览器</li>
<li>没有魔术般的解决方案</li>
<li>考虑可维护性</li>
</ul>
<p><strong>Top 100 sites IE8 CPU 使用情况:</strong></p>
<ul>
<li>84% - 布局,渲染,格式化...</li>
<li>16% - JScript & DOM</li>
</ul>
<p><strong>Top AJAX sites IE8 CPU 使用情况:</strong></p>
<ul>
<li>67% - 布局,渲染,格式化...</li>
<li>33% - JScript & DOM</li>
</ul>
<p>从以下4个方面来进行优化:</p>
<ol>
<li><strong>CSS 性能:</strong>
<ul>
<li>尽量减少样式
<ul>
<li>未用到的样式增加了下载量</li>
<li>浏览器必须解析并匹配所有选择器
<ul>
<li>失败代价很高!</li>
</ul>
</li>
</ul>
</li>
<li>简化选择器<ul>
<li>复合的元素选择器会慢</li>
<li>尽可能<ul>
<li>使用 class 或 ID 选择器</li>
<li>元素选择器尽可能简单</li>
<li>使用子(child)选择器代替后代(descendent)选择器</li>
<li>不要混用 RTL 和 LTR</li>
</ul>
</li>
<li>减少样式使这一切变得简单</li>
</ul>
<p>DEMO:</p>
<p>差:</p>
<pre><code>table tr td ul li {color: green;}</code></pre>
<p>好:</p>
<pre><code>li#pass {color: green;}</code></pre>
<p>差:</p>
<pre><code>ul li {color: purple;}</code></pre>
<p>好:</p>
<pre><code>ul > li {color: purple;}</code></pre>
</li>
<li>不要使用 expressions
<ul>
<li>慢 - 通常被这样评价</li>
<li>IE8 标准模式不支持</li>
</ul>
</li>
<li>尽量减少页面重新布局
<ul>
<li>移动内容体验不好</li>
<li>浏览器执行不必要的任务</li>
</ul>
</li>
<li>简化!</li>
</ul>
</li>
<li><strong>优化符号解析(Symbol Resolution)</strong>(译注:原文更详细)
<ul>
<li>Watch for expensive name lookups</li>
<li>缓存多次查找的为本地变量</li>
<li><strong>当需要时才优化</strong></li>
<li><strong>考虑可维护性</strong></li>
</ul>
</li>
<li><strong>JavaScript 代码低效</strong>(译注:原文更详细)
<ul>
<li>Use the native JSON object</li>
<li>Turn large switch statements into lookups</li>
<li>Avoid property access methods</li>
<li>Minimize DOM interaction</li>
<li>Use querySelectorAll for groups</li>
</ul>
<ul>
<li><strong>当需要时才优化</strong></li>
<li><strong>考虑可维护性</strong></li>
</ul>
</li>
<li><strong>HTTP 性能:</strong>
<p>典型的访问</p>
<ul>
<li>从服务端/缓存请求<ul>
<li>JS</li>
<li>CSS</li>
<li>图片</li>
<li>HTML</li>
</ul>
</li>
<li>浏览器<ul>
<li>布局</li>
<li>执行脚本</li>
<li>更多下载</li>
</ul>
</li>
</ul>
<p>针对此的优化:</p>
<ul>
<li>不要拉伸图片</li>
<li>分别合并JS/CSS</li>
<li>合并图片(sprites)</li>
</ul>
<p>重复访问</p>
<ul>
<li>有条件的 HTTP 请求
<ul>
<li>简单的 HTTP 请求
<pre><code>Pragma: no-cache</code></pre>
</li>
<li>时间条件<pre><code>If-modified-since: date,time</code></pre>
</li>
</ul>
<p>请求</p>
<pre><code>GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Wed, 22 Feb 2006 04:15:54 GMT
</code></pre>
<p>响应</p>
<pre><code>HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Wed, 22 Feb 2006 04:15:54 GMT
</code></pre>
</li>
<li>提供缓存内容
<ul>
<li>时间条件
<pre><code>Expires: date,time</code></pre>
<pre><code>Max-age: #seconds</code></pre>
</li>
</ul>
<p>请求</p>
<pre><code>GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
</code></pre>
<p>响应</p>
<pre><code>HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 12 Jun 2009 02:50:50 GMT
</code></pre>
<p>请求</p>
<pre><code>GET /images/banner.jpg HTTP/1.1
</code></pre>
<p>响应</p>
<pre><code>无响应:从缓存请求服务</code></pre>
</li>
</ul>
<p>要点</p>
<ul>
<li>减少请求数<ul>
<li>外联JS/CSS/图片</li>
<li>使用缓存</li>
</ul>
</li>
<li>减小请求量<ul>
<li>使用 HTTP 压缩</li>
<li>使用条件请求 </li>
<li>避免阻塞因素
<ul>
<li>将 JS 放在 HTML 底部</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com5tag:blogger.com,1999:blog-3178662459722973496.post-76765270676626929192009-07-31T22:58:00.002+08:002009-08-01T02:16:24.691+08:00Firefox 的 Expression Web 3 黑色主题<p>折腾了一个 Expression Web 3 主题,如图:</p>
<div id="d42s" style="text-align: left;"><a href="http://docs.google.com/File?id=ddrrtxb_1035hbpn94w4_b" target="_blank"><img style="width: 600px; height: 450px;" src="http://docs.google.com/File?id=ddrrtxb_1035hbpn94w4_b"></a></div>
<p>安装方法:</p>
<ol><li>安装 Office 2007 Black主题:<a href="https://addons.mozilla.org/zh-CN/firefox/addon/8076">https://addons.mozilla.org/zh-CN/firefox/addon/8076</a></li>
<li>安装 sylish 扩展并重启 firefox:<a href="https://addons.mozilla.org/zh-CN/firefox/addon/2108">https://addons.mozilla.org/zh-CN/firefox/addon/2108</a></li>
<li>安装 stylish 脚本:<a href="http://userstyles.org/styles/17793">http://userstyles.org/styles/17793</a></li>
</ol><br>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com2tag:blogger.com,1999:blog-3178662459722973496.post-1777596642389237102009-07-28T13:38:00.009+08:002009-10-24T13:26:42.499+08:00标准模式中的 IE 6&7 width 100% bug<p>在 web app 项目中经常遇到这个 bug,国外称之为
<a href="http://www.web-zonez.com/screen/100/index.html">100% ≠ 100% bug</a>,又分为两种:</p>
<ol>
<li><strong>div 的宽度 100% ≠ 100% (IE 6&7)</strong>
<p>需求:</p>
<ol>
<li>标准模式</li>
<li>#container 局部滚动</li>
<li>#asie 固定宽度</li>
<li>#content 自适应宽度</li>
</ol>
<p>再复杂一点还会要求两列等高,可参考 <a href="http://www.99css.com/2009/07/equal-height-columns-with-cross-browser.html">http://www.99css.com/2009/07/equal-height-columns-with-cross-browser.html</a></p>
<p>HTML</p>
<pre><code><div id="container">
<div id="wrapper">
<div id="content">
<h2>Content</h2>
</div>
</div>
<div id="aside">
<h2>Aside</h2>
</div>
</div></code></pre>
<p>当然,别忘了 DTD 声明,因为这个只存在于标准模式</p>
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre>
<p>用之前介绍的
<a href="http://www.99css.com/2009/06/reducing-file-size-of-html-documents.html">
HTML5 写法</a>亦可:</p>
<pre><code><!DOCTYPE html></code></pre>
<p>CSS</p>
<pre><code>/*简单重置*/
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;}</code></pre>
<p>当<code>#content, #aside{height:200px;}</code>时,即高度未超出<code>#container</code>时一切正常</p><img src="https://docs.google.com/File?id=ddrrtxb_951g3scw9ht_b" />
<p>当<code>#content, #aside{height:400px;}</code>时,出现纵向滚动条</p>
<p>正常显示效果如下:</p>
<img style="width: 480px; height: 311px;" src="https://docs.google.com/File?id=ddrrtxb_952fnpts6c5_b">
<p>IE 6&7 中 bug 出现:</p>
<img style="width: 479px; height: 312px;" src="https://docs.google.com/File?id=ddrrtxb_953cptcjwd9_b">
<p>原因:IE 6&7 滚动条的宽度未算在 100% 中,理想的状况是:#container 的宽度(100%) + #container 滚动条的宽度
= body 的 100%,<a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">W3C</a>
对此的定义:</p>
<blockquote>
<p>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. </p>
</blockquote>
<p>《<a href="http://adamsentz.com/internet-explorer-100-width-bug/">
Internet Explorer 100% Width Bug</a>》中给出了思路:</p>
<pre><code>element_selector {
width: expression(this.parentNode.offsetHeight >
this.parentNode.scrollHeight ? '100%' :
parseInt(this.parentNode.offsetWidth - XX) + 'px');
}</code></pre>
<p>其中 XX 是滚动条的宽度,在 Windows XP 主题下是 17px,Windows 经典主题下稍微小一点,在其他第三方系统主题下有可能是不确定宽度。</p>
<p>根据下图,简单改进一下即可</p>
<img style="width: 609px; height: 602px;" src="https://docs.google.com/File?id=ddrrtxb_954z5tpmxfz_b">
<p><strong>解决方法</strong></p>
<pre><code>#wrapper{#width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}</code></pre>
<p>当然,写在 js 中亦可,不过要注意不要漏掉 window 的 riseze 事件,另外,window 的 resize 事件在 IE 中有执行多次的
bug</p>
</li>
<li><strong>body 的宽度 100% ≠ 100% (仅 IE6)</strong>
<p>通常表现为 iframe 出现纵向滚动条时同时出现横向滚动条,简单粗暴的使用<code>body{overflow-x:hidden;}</code>是不负责任的,有时会截断要显示的内容</p>
<p>第一个页面(父页面)</p>
<pre><code><iframe frameborder="0" height="300" scrolling="auto" src="iframe.html" width="500"></code></pre>
<p>第二个页面(iframe)</p>
<p>HTML</p>
<pre><code><div></div></code></pre>
<p>CSS</p>
<pre><code>body, div{margin:0;padding:0;}
div{background-color:yellow;height:500px;}</code></pre>
<p>正常效果</p>
<img style="width: 511px; height: 310px;" src="https://docs.google.com/File?id=ddrrtxb_949z564sqv5_b">
<p>IE6</p>
<img style="width: 510px; height: 312px;" src="https://docs.google.com/File?id=ddrrtxb_950dfd8bc3h_b">
<p>解决方法(原理同上)</p>
<pre><code>body{_width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}</code></pre>
</li>
</ol>
<p>折腾了这么久,哥累了,哥真的希望 IE 只是个传说</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com2tag:blogger.com,1999:blog-3178662459722973496.post-87186153870162175312009-07-24T13:22:00.008+08:002009-08-27T16:13:39.225+08:00[翻译] gzip 压缩原理<p>译注:本打算翻译这篇文章的,搜了一下已经有人翻译过了,不过网站失效,通过快照获取了部分内容,在此基础之上进行了一些修改,感谢 <a href="http://www.bloglei.com">bloglei</a>。</p>
<ul>
<li>原文:<a href="http://code.google.com/intl/zh-CN/speed/articles/gzip.html">How
gzip compression works</a></li>
<li>作者:Kevin Khaw & Eric Higgins,Google 网站管理员</li>
<li>翻译:<a href="http://www.bloglei.com">bloglei</a> &
<a href="http://www.99css.com">ytzong</a></li>
</ul>
<object height="340" width="560">
<param name="movie" value="http://www.youtube.com/v/Mjab_aZsdxw&hl=en&fs=1&">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed allowfullscreen="true" allowscriptaccess="always" height="340" src="http://www.youtube.com/v/Mjab_aZsdxw&hl=en&fs=1&" type="application/x-shockwave-flash" width="560">
</object>
<p>译注:以上是 youtube 视频,请翻墙观看(文中图片调用自 picasa,若显示不了也要翻墙)</p>
<p><strong>浏览器请求有无 gzip 压缩的高级预览</strong></p>
<p><strong>服务器未 gzip:</strong></p>
<img style="width: 630px; height: 196px;" src="https://docs.google.com/File?id=ddrrtxb_956gf3vjvd3_b">
<p><strong>浏览器:</strong></p>
<ul>
<li>连接服务器并请求页面。</li>
<li>通知服务器,浏览器支持 gzip “Accept-Encoding: gzip”。</li>
</ul>
<p><strong>服务器:</strong></p>
<ul>
<li>不支持 gzip。忽略 gzip 请求。发送未压缩的页面。</li>
</ul>
<p><strong>浏览器:</strong></p>
<ul>
<li>接收页面。</li>
<li>显示页面。</li>
</ul>
<p><strong>服务器 gzip:</strong></p>
<img style="width: 630px; height: 196px;" src="https://docs.google.com/File?id=ddrrtxb_957f9dt9xf8_b">
<p><strong>浏览器:</strong></p>
<ul>
<li>连接服务器。</li>
<li>通知服务器,浏览器支持 gzip “Accept-Encoding: gzip”。</li>
</ul>
<p><strong>服务器:</strong></p>
<ul>
<li>收到 gzip 支持通知。</li>
<li>发送 gzip 编码过的页面,并设置响应头“Content-Encoding: gzip”。</li>
</ul>
<p><strong>浏览器:</strong></p>
<ul>
<li>接收页面。</li>
<li>根据响应头“Content-Encoding: gzip” 解码 gzip 编码过的页面。</li>
<li>显示页面。</li>
</ul>
<p><strong>如何进行 gzip 压缩</strong></p>
<p>简单的说,gzip 压缩是在一个文本文件中找出类似的字符串,并临时替换他们,使整个文件变小。这种形式的压缩对 web 来说特别适合,因为 HTML 和 CSS
文件通常包含大量的重复字符串,例如空格,标签,及样式定义。</p>
<p><strong>例子</strong></p>
<p>在这个例子中,我将用一小段代码演示 gzip 压缩中用相同的标签跟不同的标签的对比。</p>
<p>在第一段代码中,我用了5个标题标签。</p>
<p>未压缩: 69 bytes</p>
<p>压缩后: 85 bytes (译注:某天<a href="http://blog.gulu77.com">77</a>问我怎么压缩后比压缩前还大?我回来后看了下原文并测试了一下,事实如此,并非翻译错)</p>
<pre><code><h1>One</h1><br /><h2>Two</h2><br /><h3>Three</h3><br /><h4>Four</h4><br /><h5>Five</h5></code></pre>
<p>把标题标签改为相同的 div 标签,源代码增大了 10 bytes,但是压缩后,它缩小到 66 bytes,比先前的源代码片段还小!</p>
<p>未压缩: 79字节</p>
<p>压缩后: 66 字节</p>
<pre><code><div>One</div><br /><div>Two</div><br /><div>Three</div><br /><div>Four</div><br /><div>Five</div></code></pre>
<p>许多开发者可能依此只使用 div 和 span 标签而使页面更大程度的压缩。在多数情况下当然无可非议,但必须注意到正确的语义化标记对可访问性(accessibility)来说非常重要,而且使页面更容易阅读。即便如此,可以使用此方法做一些优化,这取决于你,开发者来决定哪些是合适的。</p>
<p><strong>延伸阅读</strong></p>
<ul>
<li>
<a href="http://code.google.com/speed/page-speed/docs/payload.html#GzipCompression">
Page Speed – Enable gzip compression</a></li>
</ul>
ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-82083699918358481552009-07-14T11:35:00.001+08:002009-07-14T11:37:26.434+08:00沈语录<p>俗话说呢 没有知识 就要有常识 没有常识要看电视 那万一连电视也没的看的时候呢 请多听我开释</p>
<p>勾魂择魄是电眼 趋吉避凶要开天眼 清理肠胃得要有屁眼 带我走过春夏秋冬 看破是非黑白 是你的眼</p>
<p>拍马屁不是病 但拍不好就要人命 在这个人际关系非常讲究的年代里面 我们宁可拍马屁 都不要说坏话 放狗屁</p>
<p>所谓人鬼殊途 而男女呢是有别 女人要ㄋㄞ 男人要man 那男人如果要是不man呢 就只能把到小甜甜 </p>
<p>虽然人家说美就是心中有爱 但是告诉你 不美是绝对不会有爱的 今天的故事告诉我们 小时候丑不是丑 只要你能够用心减肥精心打扮 那么恐龙也能边孔雀 丑小鸭也能变天鹅</p>
<p>好男要配好媳 美女就要配好腿 而带我走过春夏秋冬看破是非黑白 你是我的腿</p>
<p>不管是大脸还是小脸 就是不要摆臭脸 不管是左脸还是右脸 就是不要不要脸 眼前的黑不是黑 你说的白是什么白 因为你是我的脸</p>
<p>整人者人恒整之 若要人不整 除非己莫整 整到最高点 心中有整整</p>
<p>天有外太空 人有内子宫 台上一分钟 台下他却是要十年功 没有三两三 怎能上梁山呢 奉劝大家没本事 那也总得要有一招半式 没有个一招半式 你只能期待别人出事</p>
<p>若要人温柔 除非己温柔 温柔可以化解寒冬 温柔让你我的心紧紧相依</p>
<p>可爱之人必有可怜之处 若要人幼稚 除非己幼稚 幼到最高点 心中有幼幼</p>
<p>人要会说 就像狗要会喝 会说话 让小鸭变天鹅 会说话 让你成仙成佛 会说话 让你进天国</p>
<p>大鱼大肉也要青菜配 那红花呢 也要绿叶来配 人在演 天在看 大家都在看 你健康我健康 大家都健康</p>
<p>男女呢要和平相处 如果男女不能和平相处呢 那就是白目 如果白目的话呢 就不如去喝三鹿 三鹿三鹿真恐怖 喝了三鹿让你安心上路</p>
<p>美丽的脚指头 让你人生走的更宽阔 不美丽的脚指头 让你人不如狗 美丽的脚指头 让你人生走的更有把握 不美丽的脚指头 让你像枯萎的花朵 同时像鸟屎一坨</p>
<p>跨界有理无理其实都无所谓 也没有意义 重点是呢 大家活在这个舞台上面呢 大家都能成为快乐的大家庭</p>
<p>男谐星也是人 他们也会为情所困 他们也需要温柔的滋润 请保护男谐星 关怀男谐星 给他们爱情丰富他们的生命</p>
<p>助理助理 没有助理 就像没有阳光没有小雨 没有助理 让我们失去快乐失去活力 所以请关怀助理 让他们有生存下去的勇气</p>
<p>大有大的好 但小也有小的妙 唐代诗人白居易 曾经有一首词 就是在讲解这种状况 这首词叫做是 大胸嘈嘈如急雨 小胸切切如私语 嘈嘈切切错杂弹 大奶小奶落玉盘
</p>
<p>要有美丽的素颜 必须要有充足的睡眠 没有充足的睡眠 那就要敢花钱 如果没有充足的睡眠 又不敢花钱 那在家被人嫌 出门被人扁 到最后弄的自己 苦海无边</p>
<p>爱是什么 爱一个人是支持 而不是支配 爱一个人是慰问 而不是质问 爱一个人是倾诉 而不是控诉 爱一个人是善意 而不是得了疝气 爱一个人是甜蜜 千万不要动了胎气</p>
<p>睡衣以诱惑男人为目的 一定要性感才有魅力 千万不能老气 不能俗气 更不能过气 这样男人才会更爱你 就像老鼠爱大米</p>
<p>大嫂大嫂 没有你们演艺圈会很无聊 大嫂大嫂 你是台湾的国宝 </p>
<p>景气好的时候 大家就忙着投资 景气不好的时候 大家就忙着投胎 投胎失败 欲哭无人知 投资失败 赶羚羊XXX 赶羚羊老悲哀</p>
<p>完美不完美 我们多虚伪 你让我的爱变成一种罪 </p>
<p>受欢迎不分美与丑 就像白雲云蔡頭 只要心中有真爱 他日比能修成正果</p>
<p>所谓合理的要求是考验 那不合理的要求呢他就是磨练 那艺人被欺负呢别埋怨 不管是大眼还是小眼 终究你是我的眼</p>
<p>救火队最可贵 救活队他不会流泪 救火队他不会喝醉 救活队他半夜不睡 救活队他抢救节目不排队 </p>
<p>宁可早到也不要迟到 那宁可迟到也不要不到 那宁可不到也不能连人都找不到 那如果连人都找不到 那就是你的死期已到</p>
<p>人没有十全十美 就好比月有阴晴圆缺 人没有十全十美 就像狗有白花黄黑 人与人之间只要真心相待 即便不完美 我们还是要向他说声谢谢 </p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0tag:blogger.com,1999:blog-3178662459722973496.post-64984347783913892692009-07-13T17:46:00.013+08:002009-08-07T15:05:25.603+08:00[翻译]纯 CSS 无 Hack 跨浏览器的多列等高<ul>
<li>原文:<a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks">Equal
Height Columns with Cross-Browser CSS and No Hacks</a></li>
<li>作者:<a href="http://matthewjamestaylor.com/about">Matthew James Taylor</a></li>
<li>翻译:<a href="http://www.99css.com">ytzong</a></li>
</ul>
<p>纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题,之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS
hack,无图片,无 javascript,甚至可以用在最严格编码的网站上。</p>
<p><strong>多列等高的问题</strong></p>
<img style="width: 450px; height: 250px;" src="https://docs.google.com/File?id=ddrrtxb_959gfg92hf6_b">
<p>上例中有包含不同内容的 3 列,可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高?或具体的说,如何使所有列的高度等于最高列的高度?这很棘手,因为我们不清楚每列将会多高,哪一列是最高的。不能简单的给所有列一个固定的高度,如果内容很少将会导致页面底部有大片空白;如果内容太多则会在文字显示完全前关闭。两种情形都不妥。实际上,内容的长度是动态的,所以每列的高度也是动态的。必须意识到
Web 上没有固定的东东,乡民们有不同的屏幕分辨率,浏览器中的文字也可能被设置为任意大小,所有这些都会影响内容的高度。</p>
<p><strong>分离列内容与其背景色</strong></p>
<p>解决等高问题的第一步是把能分离的破开。方法是每列用两个 div 替代原来的一个。第一个 div 用来放内容,另一个用来作背景色。分离使我们可以单独控制这些额外的元素,之后用更有效的方法把它们放在一起。答案呼之欲出。</p>
<p><strong>浮动的容器的高度始终取决于其浮动的内容(高度)</strong></p>
<p>这是本文多列等高方法的核心。 使一个 div 的高度等于最高列高度的唯一方法是这个 div 包含所有的列。换句话说,通过把所有的列放在一个容器中,容器的高度就是最高列的高度。这是个非常有用的结构。</p>
<img style="width: 300px; height: 194px;" src="https://docs.google.com/File?id=ddrrtxb_960g9xr5kc5_b">
<p><strong>3列 HTML div 结构</strong></p>
<p>上例中 3 个内容列在一个 div 容器中。</p>
<pre><code><div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div></code></pre>
<p><strong>3 列 CSS</strong></p>
<p>下面是使 div 容器等高于最高列的 CSS。</p>
<pre><code>#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;
}</code></pre>
<p>为了让这一结构在所有浏览器中正确工作,容器 div 必须浮动(左或右),同时每一个内容列的 div 也要浮动,哪种方式并不重要。浮动内容 div 的进程使它们在页面中排列在一条水平线上。浮动容器使其自适应到最高列的高度。如果不浮动容器,内容
div 将会从容器底部溢出,容器不会拥有正确的高度。事实上在此例中,容器不浮动的话其最终高度为0。</p>
<p><strong>增加额外嵌套的容器</strong></p>
<p>下一步是增加额外的容器,它们彼此嵌套。我们需要容器的数量等于列的数量:3。这 3 个容器用作各列的背景。请注意,我们去除了原始列的背景色,并将其加至容器上。</p>
<img style="width: 350px; height: 205px;" src="https://docs.google.com/File?id=ddrrtxb_961f4gqg7cn_b">
<p><strong>3列 HTML div 结构</strong></p>
<p>两个额外的容器加至下面的 HTML 中。</p>
<pre><code><strong><div id="container3">
<div id="container2"></strong>
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
<strong></div>
</div></strong></code></pre>
<p><strong>3 列 CSS</strong></p>
<p>所有元素左浮动,容器宽度设为100%,使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。</p>
<pre><code><strong>#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
}</strong>
#container1 {
float:left;
width:100%;
<strong>background:red;</strong>
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}</code></pre>
<p><strong>用相对定位移动容器</strong></p>
<p>现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%,为了显示中间的黄色列
container1 向左移动了40%,与此同时红色部分依然可见作为左侧列。</p>
<img style="width: 497px; height: 632px;" src="https://docs.google.com/File?id=ddrrtxb_962gpsnksfq_b">
<p><strong>相对定位的 CSS</strong></p>
<p>下面是添加了相对定位的CSS。</p>
<pre><code>#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
<strong>position:relative;
right:30%;</strong>
}
#container1 {
float:left;
width:100%;
background:red;
<strong>position:relative;
right:40%;</strong>
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}</code></pre>
<p><strong>将每列的内容移回</strong></p>
<p>下一步是把每列的内容移回到页面上,使之排列在下面的背景色上。再次使用简单的相对定位来完成它。</p>
<img style="width: 351px; height: 193px;" src="https://docs.google.com/File?id=ddrrtxb_963fx95wsq2_b">
<p>最后在最外面的容器 container3 上添加<code>overflow:hidden</code>,砍去超出容器的部分。</p>
<img style="width: 204px; height: 193px;" src="https://docs.google.com/File?id=ddrrtxb_964gw75pwff_b">
<p><strong>相对定位的 CSS</strong></p>
<p>下面是增加了相对定位和溢出的 CSS 规则。请注意 container3 上额外的<code>position:relative</code>; 这是为了解决一个
IE bug ,阻止<code>overflow:hidden;</code>工作。</p>
<pre><code>#container3 {
float:left;
width:100%;
background:green;
<strong>overflow:hidden;
position:relative;</strong>
}
#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%;
<strong>position:relative;
left:70%;</strong>
}
#col2 {
float:left;
width:40%;
<strong>position:relative;
left:70%;</strong>
}
#col3 {
float:left;
width:30%;
<strong>position:relative;
left:70%;</strong>
}</code></pre>
<p><strong>对列增加 padding</strong></p>
<p>最后还需对列增加 padding,这样每列边缘的文字不至于显得拥挤。如果我们增加 padding,一些浏览器中可能正常显示,但不是所有。IE 错误的盒模型,导致其估算拥有
padding 的元素宽度异常。一个 200px 宽 20px padding 的 box 在 IE 中被视为 200px 宽,在其他浏览器中则为正确的 240px。padding
应该加在元素的宽度上。凸微软!</p>
<p>不过不用担心...我们可以用完全不依赖于 padding 的方法来解决这个问题。相反,我们把列弄窄一点(列宽减去两侧的 padding),之后用相对定位把它们移至正确的位置。在我们的例子中我们用了
2% 的 padding,则 30% 的列将减至 26%,40% 的列减至 36%。用相对定位移回列时需谨记,现在列变窄了,所以当它们一起像最初那样左浮动时,每一个需要比上一个移动更远的距离。</p>
<img style="width: 500px; height: 580px;" src="https://docs.google.com/File?id=ddrrtxb_965d2223pfg_b">
<p><strong>完整的CSS</strong></p>
<p>为了使布局保持在小宽度我在每个内容列增加了<code>overflow:hidden</code>; 这将切去超出列宽的东东,并阻止其干扰其他布局。重申一下,这只是
IE 的问题,其他所有浏览器会保持正确的布局,不管列内是虾米。如果你真想这样做,可以用 IE 条件注释只对 IE 写规则。</p>
<pre><code>#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;
<strong>width:26%;
position:relative;
left:72%;
overflow:hidden;</strong>
}
#col2 {
float:left;
<strong>width:36%;
position:relative;
left:76%;
overflow:hidden;</strong>
}
#col3 {
float:left;
<strong>width:26%;
position:relative;
left:80%;
overflow:hidden;</strong>
}</code></pre>
<p>好了,就是这样。我希望这篇文章对你有用。可以自己弄一下 CSS 看一下它是如何工作的。你可以搞很多列,只要容器和内容列的数目相等。不要忘记看看我的 demo:<a href="http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm">2
列 </a>,
<a href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm">3
列</a>,
<a href="http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm">4
列</a>,以及
<a href="http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm">5
列</a>。</p>ytzonghttp://www.blogger.com/profile/14820587350577479477noreply@blogger.com0