2009年7月23日 #
快下班的時候,收到小頭的關于Reset Css的一封郵件,看了一下才發現,哎呀!原來css還有這么玩的。
2004年,Tantek被不同瀏覽器下默認樣式的差異給搞煩了,于是寫了一個undohtml.css,這也就誕生了世界上第一份reset.css。
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等)。這就如西漢一代名將韓信哪,是成也蕭何,敗也蕭何!
2007年,Eric Meyer的一篇文章Reset Styles, 重新喚起了一股reset熱潮。下面是Eric Meyer的一個CSS Reset方案:
1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. b, u, i, center,
7. dl, dt, dd, ol, ul, li,
8. fieldset, form, label, legend,
9. table, caption, tbody, tfoot, thead, tr, th, td {
10. margin: 0;
11. padding: 0;
12. border: 0;
13. outline: 0;
14. font-size: 100%;
15. vertical-align: baseline;
16. background: transparent;
17. }
哎,真是收獲良多啊!
2004年,Tantek被不同瀏覽器下默認樣式的差異給搞煩了,于是寫了一個undohtml.css,這也就誕生了世界上第一份reset.css。
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等)。這就如西漢一代名將韓信哪,是成也蕭何,敗也蕭何!
2007年,Eric Meyer的一篇文章Reset Styles, 重新喚起了一股reset熱潮。下面是Eric Meyer的一個CSS Reset方案:
1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. b, u, i, center,
7. dl, dt, dd, ol, ul, li,
8. fieldset, form, label, legend,
9. table, caption, tbody, tfoot, thead, tr, th, td {
10. margin: 0;
11. padding: 0;
12. border: 0;
13. outline: 0;
14. font-size: 100%;
15. vertical-align: baseline;
16. background: transparent;
17. }