<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>King&#039;s blog &#124; 月亮上的妖精 &#187; 八卦</title>
	<atom:link href="http://blog.king51.com/tag/%e5%85%ab%e5%8d%a6/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.king51.com</link>
	<description>什么样的生活，我愿意日复一日过，不厌倦。</description>
	<lastBuildDate>Thu, 09 Sep 2010 04:29:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Reset CSS研究（八卦篇）</title>
		<link>http://blog.king51.com/2009-11-02/reset-css-study-gossip-articles/</link>
		<comments>http://blog.king51.com/2009-11-02/reset-css-study-gossip-articles/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 13:27:24 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[沉思录]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Reset]]></category>
		<category><![CDATA[八卦]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1036</guid>
		<description><![CDATA[八卦为先

八卦是种优良品质，特别是用在技术上时。来看几个Reset CSS的八卦问题吧：



<span class="readmore"><a href="http://blog.king51.com/2009-11-02/reset-css-study-gossip-articles/" title="Reset CSS研究（八卦篇）">阅读全文——共2464字</a></span>]]></description>
			<content:encoded><![CDATA[<h3>八卦为先</h3>
<p>八卦是种优良品质，特别是用在技术上时。来看几个Reset CSS的八卦问题吧：</p>
<ol>
<li>你知道世界上第一份reset.css在哪么？</li>
<li><code><span style="font-family: NSimsun;">* { margin: 0; padding: 0 }</span></code>人品很坏吗？</li>
<li>Eric Meyer和YUI是情侣吗？</li>
<li>Google有用reset.css吗？</li>
<li>No CSS Reset的口号是谁最先提出来的？</li>
</ol>
<p>类似问题或者说困惑还能列举很多，reset.css极其简单又极其不简单。继续挖掘八卦之前，请先关机遐思，或去如厕更衣透透气，想想后再读下文。</p>
<h3>不是历史</h3>
<p>2004年，遥远又如近在眼前的昨天，<a href="http://tantek.com/">Tantek</a>被不同浏览器下默认样式的差异搞烦了，于是琢磨中写了一个<a href="http://tantek.com/log/2004/09.html#d06t2354">undohtml.css</a>, 这就是第一个八卦问题的答案。</p>
<p>对于基于Gecko引擎的Firefox等浏览器，请在地址栏中输入resource://gre/res/html.css，默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性：<a href="http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/">Really Undoing html.css</a>. 知道CSS好玩，实在没想到CSS居然这么好玩。比如<code><span style="font-family: NSimsun;">style, script { display: block }</span></code>就可以显示CSS和JS源码，在做代码演示的demo页时，就不用辛辛苦苦用pre或textarea了（虽然因为ie不支持导致不实用，不过这的确是个思路）。</p>
<p>继续八卦：<a href="http://leftjustified.net/journal/2004/10/07/css-negotiation/">CSS Negotiation and a Sanity Saving Shortcut</a>. <code><span style="font-family: NSimsun;">* { margin: 0; padding: 0 }</span></code>的学名是<a href="http://leftjustified.net/journal/2004/10/19/global-ws-reset/">Global White Space Reset</a>. 从原文中可以看出这个方法刚问世时是非常火爆的，并且作者建议一定要先破后立，要将清扫差异和重置默认样式结合起来，这样才是正确的做法。</p>
<p>为何Global White Space Reset当初风光一时，如今却黯然销魂？<code><span style="font-family: NSimsun;">* { margin: 0; padding: 0 }</span></code>的成功之处在于，管你三七二十八，统统抹平，人人生而平等！然而其失败之处也正是因为其威力太大，虽然捣了蜂窝得了蜜，却惹来群蜂追尾，麻烦无限（因为被抹平的样式，你得再重新设置回来，比如input的padding等）。这就如西汉一代名将韩信哪，是成也萧何，败也萧何！</p>
<p>还有一个传说中的说法是，星号*选择符还会导致性能问题。由于一直没找到可靠的资料，我又不知道怎样才能测试CSS选择符的渲染性能（知道的请一定告诉我），这个传说中的性能问题就只能当它是传说了。</p>
<p>眨眼一瞬间，三年就过去了。2007年，Eric Meyer的一篇文章<a href="http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/">Reset Styles</a>, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案：Eric的reset.css是源自YUI的，可能是母子关系，但总之不是情侣关系。</p>
<p>很快，Eric发布了第二版：<a href="http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/">Reworked Reset</a>. 后面的解释极具价值，很多属性值的设置在这里有详尽说明。</p>
<p>火爆的回复给了Eric源源不断的动力：<a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">Reset Reloaded</a>. 看完这篇文章，有一种尘埃落定的感觉。</p>
<p>但上面的文章并不是最终版本，2008年2月份，Eric Meyer还更新了一次：<a href="http://meyerweb.com/eric/tools/css/reset/index.html">CSS Tools: Reset CSS</a></p>
<p>说完Eric Meyer的心路历程，不得不提一下<a href="http://developer.yahoo.com/yui/reset/">YUI Reset CSS</a>. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面，前不久已离开YAHOO，让我的直觉里对YUI都有点担心起来了，唉。</p>
<p>上面是两个最有名的CSS Reset方案。但世界永远是多样化的，比如<a href="http://www.ejeliot.com/blog/85">Less is more - my choice of Reset CSS</a>. 这和Eric Meyer的期望其实是一致的：不同的应用环境下，应该选择自己的reset方案，而不是简单的copy过去。比如Google首页，在这种特定页面里，不用就是一种最好的用。</p>
<p>更多眼花缭乱的Reset方案请参看：<a href="http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/">A Killer Collection of Global CSS Reset Styles</a>. 很标题党，内容就鱼龙混杂了。</p>
<p>最后，隆重揭晓最后一个八卦问题的答案：<a href="http://snook.ca/archives/html_and_css/no_css_reset/">No CSS Reset</a>. 提倡的核心思想也是Less is more. 原因很简单，<code><span style="font-family: NSimsun;">* { margin: 0; padding: 0 }</span></code>杀伤力太大，在某些场合下，Eric Meyer的方案杀伤力也还是太大了。有想法并说出来，总是好的。</p>
<p>有反对就会有支持：<a href="http://mondaybynoon.com/2008/04/21/why-i-like-and-use-reset-css/">Why I Like (and Use) Reset CSS</a>. 公说公有理，婆说婆有理，并非所有问题都需要一个确切的答案，有时过程本身，就是追求的结果。</p>
<p>Eric Meyer对No CSS Reset一文的回复：<a href="http://meyerweb.com/eric/thoughts/2008/04/17/crafting-ourselves/">Crafting Ourselves</a>. 读罢此文，明月松间照，清泉石上流。下面摘录两段，做为此八卦闲文的完结：</p>
<blockquote><p>Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. <strong>To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft.</strong> That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.</p>
<p>…It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.</p></blockquote>
<p>预告：下一篇是技术篇，将详细探讨淘宝目前使用的Reset CSS方案，欢迎各位提前准备好板砖，我已购买坚固头盔一顶…… 敬请期待。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2009-11-02/reset-css-study-gossip-articles/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
