几个Reset CSS的八卦问题

 你知道世界上第一份reset.css在哪么?

  * { margin: 0; padding: 0 }

  人品很坏吗?

  Eric Meyer和YUI是情侣吗?

  Google有用reset.css吗?

  No CSS Reset的口号是谁最先提出来的?

  类似问题或者说困惑还能列举很多,reset.css极其简单又极其不简单。继续挖掘八卦之前,请先关机遐思,或去如厕更衣透透气,想想后再读下文。

  不是历史

  2004年,遥远又如近在眼前的昨天,Tantek被不同浏览器下默认样式的差异搞烦了,于是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。

  对于基于Gecko引擎的Firefox等浏览器,请在地址栏中输入resource://gre/res/html.css,默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性:Really Undoing html.css. 知道CSS好玩,实在没想到CSS居然这么好玩。比如

  style, script { display: block }

  就可以显示CSS和JS源码,在做代码演示的demo页时,就不用辛辛苦苦用pre或textarea了(虽然因为ie不支持导致不实用,不过这的确是个思路)。

  继续八卦:CSS Negotiation and a Sanity Saving Shortcut.

  * { margin: 0; padding: 0 }

  的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的,并且作者建议一定要先破后立,要将清扫差异和重置默认样式结合起来,这样才是正确的做法。

  为何Global White Space Reset当初风光一时,如今却黯然销魂?

  * { margin: 0; padding: 0 }

  的成功之处在于,管你三七二十八,统统抹平,人人生而平等!然而其失败之处也正是因为其威力太大,虽然捣了蜂窝得了蜜,却惹来群蜂追尾,麻烦无限(因为被抹平的样式,你得再重新设置回来,比如input的padding等)。这就如西汉一代名将韩信哪,是成也萧何,败也萧何!

  还有一个传说中的说法是,星号*选择符还会导致性能问题。由于一直没找到可靠的资料,我又不知道怎样才能测试CSS选择符的渲染性能(知道的请一定告诉我),这个传说中的性能问题就只能当它是传说了。

  眨眼一瞬间,三年就过去了。2007年,Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案:Eric的reset.css是源自YUI的,可能是母子关系,但总之不是情侣关系。

  很快,Eric发布了第二版:Reworked Reset. 后面的解释极具价值,很多属性值的设置在这里有详尽说明。

  火爆的回复给了Eric源源不断的动力:Reset Reloaded. 看完这篇文章,有一种尘埃落定的感觉。

  但上面的文章并不是最终版本,2008年2月份,Eric Meyer还更新了一次:CSS Tools: Reset CSS

  说完Eric Meyer的心路历程,不得不提一下YUI Reset CSS. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面,前不久已离开YAHOO,让我的直觉里对YUI都有点担心起来了,唉。

  上面是两个最有名的CSS Reset方案。但世界永远是多样化的,比如Less is more – my choice of Reset CSS. 这和Eric Meyer的期望其实是一致的:不同的应用环境下,应该选择自己的reset方案,而不是简单的copy过去。比如Google首页,在这种特定页面里,不用就是一种最好的用。

  更多眼花缭乱的Reset方案请参看:A Killer Collection of Global CSS Reset Styles. 很标题党,内容就鱼龙混杂了。

  最后,隆重揭晓最后一个八卦问题的答案:No CSS Reset. 提倡的核心思想也是Less is more. 原因很简单,

  * { margin: 0; padding: 0 }

  杀伤力太大,在某些场合下,Eric Meyer的方案杀伤力也还是太大了。有想法并说出来,总是好的。

  有反对就会有支持:Why I Like (and Use) Reset CSS. 公说公有理,婆说婆有理,并非所有问题都需要一个确切的答案,有时过程本身,就是追求的结果。

  Eric Meyer对No CSS Reset一文的回复:Crafting Ourselves. 读罢此文,明月松间照,清泉石上流。下面摘录两段,做为此八卦闲文的完结:

  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. 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. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.

  …It’s evidence that we continue to challenge ourselves and each other to advance our skills,

时间: 2024-10-31 16:52:08

几个Reset CSS的八卦问题的相关文章

CSS代码片段:css重置reset css

文章简介:本css重置参考了normalize.css.bootstrap等,然后根据自己多年的经验进行了一些简单的整理并修改,以更适合自己目前的使用及一些大型项目的使用. 本css重置参考了normalize.css.bootstrap等,然后根据自己多年的经验进行了一些简单的整理并修改,以更适合自己目前的使用及一些大型项目的使用. 总的来说本css重置包括了三大部分,第一部分是常用的东西(包括常用元素及表单元素),第二部分是html5&css3,第三部分属于非常用标签,如果你对本css重置感

CSS网页实例:适合所有项目通用的reset.css

文章简介:另一个是用于特定项目的"reset",自定义修改的内容,这些内容可以放在layout.css.typography.css之类的文件中,他们共同导入到一个base.css形成一个项目的基础样式.本文就是来介绍如何写一个合适所有项目的通用的reset.css,以及介绍在设置玩reset.css之后需要针对 0,引言每每有新项目,第一步就是应当使用一个reset.css来重置样式.滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生.所以最好还是自己写

CSS通用框架:打造自己的Reset.css

0,引言每每有新项目,第一步就是应当使用一个reset.css来重置样式.滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生.所以最好还是自己写一个reset.css,并且要明白每一条reset都是用来做什么的.reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1.h2之类的定义放进typography.css. 具体如何规划网站CSS结构,不在文本讨论之列,可以参考Smashing Magazine上的文章,国内有差

谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

reset.css: 163邮箱的css reset,留着备用

/* css reset */body{color:#000;background:#fff;font-size:12px;line-height:166.6%;text-align:center;}body,input,select,button{font-family:verdana}h1,h2,h3,select,input,button{font-size:100%}body,h1,h2,h3,ul,li,form,p,img{margin:0;padding:0;border:0}in

CSS魔法堂:Reset CSS

下列样式规则可用于最小化各浏览器标签样式的不一致性.注意:实际使用时应该对其进行适当的调整,以适应项目要求. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, a

目前比较全的CSS reset重设方法总结

 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题).但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现. 当今流行的浏览器(如:Firefox.Opera.Internet Explorer.Chrome.Safari等等)中,有一些都是以自己的方式去理

CSS Reset ,你选对了吗?

一直想认认真真写一次关于Reset CSS的文章. 共4种方案. 有兴趣的小伙们,求交流你们用什么来CSS Reset? *{margin: 0;padding: 0;} -- 被摒弃的方案 学名是Global White Space Reset,据说一开始格外受欢迎,但现在已经被摒弃了. 其实,我一开始接触前端的时候,也是被前辈带得用通用选择器.直到几个月前,才纠正过来.吼吼~希望还在学校的小伙伴们不要沿袭这个坏习惯. 为什么会被摒弃? 原因: 一方面,*导致CSS渲染引擎在渲染CSS的时候,

移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂

为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例github地址:https://github.com/iwangx/WebApp 访问地址:https://csssprite.herokuapp.com/ 准备 psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,