CSS Reset について (1) -- 歴史的進化と Normalize.css_html/css

前言

近期在翻阅陈旧的历史资料，整理之前饱受争议的CSS Reset问题，不过好像十多年过去，现在大家统一了口径，纷纷推荐使用Normalize.css，包括Bootstrap都进行了内置使用，可见它的认可程度之高。

由于文章涉及内容较多，会分为系列文章

第一章，
整理CSS Reset历史的演变痕迹，从第一份CSS Reset的诞生，到提出No CSS Reset的思想，再到国产CSS Reset 1.0骄傲的诞生；最终时过境迁，CSS Reset被Normalize.css所替代;
随后开始认识Normalize.css，了解它都做了那些事情，诉说与CSS Reset的区别，突出优势，告诉你为什么要使用它。

第二章，
由于Normalize.css只提供了英文文档，没有提供对应的中文版本，所以从这章开始对其源码进行翻译整理与解读，本章包含 html与body，HTML5元素，链接，语义化文本标签，内嵌元素，群组元素等内容解读。

第三章，
带编辑...

CSS Reset 历史回顾

第一份 CSS Reset

为什么会有CSS Reset的存在呢？那是因为早期的浏览器支持和理解的CSS规范不同，导致浏览器在渲染页面时效果不一致，出现很多兼容性问题。关于浏览器的默认样式请点击查阅！

根据玉伯的文章中透漏，最早的一份CSS Reset来自Tantek 的undohtml.css，从URL中的日期可以看出时间是2004年，Tantek根据自身需要对于一些标签进行了简单的重置，源码如下：

/* undohtml.css *//* (CC) 2004 Tantek Celik. Some Rights Reserved.             */:link,:visited { text-decoration:none }ul,ol { list-style:none }h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0 }a img,:link img,:visited img { border:none }address { font-style:normal }

ログイン後にコピー

核心代码与作用

随后加入到CSS RESET的行列的大牛越来越多，比如业界领袖 YUI团队以及Eric Meyer把这份CSS Reset变的更加充实，但是大家不难发现代码的核心部分还是重置，从此可以结论出早期的CSS Reset的作用就是清除所有浏览器默认样式，让它一切归零！

* { margin:0; padding:0 }

ログイン後にコピー

不过在此之后一段时间，有人开始批判这种暴力清零的CSS Reset方式，随后部分前端开发者们也传来一些争议声音，比如：

*{ margin:0; padding:0; }会带来性能问题

使用通配符存在隐性问题

过渡的标签重置等于画蛇添足

过渡的标签重置导致语言元素失效

注：由于都是一些陈旧的老问题，就不提供出处了，再此不过多讨论，感兴趣Google~

No CSS Reset 思想

Jonathan Snook是第一个提出No CSS Reset思想，其核心是Less is more，少即是多，不提倡使用暴力归零的方法。

玉伯后来也在《Reset CSS研究》文章中阐述说明，其实 Eric Meyer 并不期望大家下载他的 CSS Reset 后直接就拿去用，而是应该按照自己的需求，适量裁剪和修改后再使用。

后来YUI更新了cssreset，还配套有 cssfonts 和 cssbase。cssreset只负责清除默认样式,而CSS fonts 和 CSS base 则将一些元素的默认样式重设回来，这就消除了之前的争议，这一又迅速成为大家的通用解决方法了。

YUI 提供的cssfonts.css

/*YUI 3.18.1 (build f7e7bcb)Copyright 2014 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*//** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. */body {    font:13px/1.231 arial,helvetica,clean,sans-serif;    *font-size:small; /* for IE */    *font:x-small; /* for IE in quirks mode */}/** * Nudge down to get to 13px equivalent for these form elements */select,input,button,textarea {    font:99% arial,helvetica,clean,sans-serif;}/** * To help tables remember to inherit */table {    font-size:inherit;    font:100%;}/** * Bump up IE to get to 13px equivalent for these fixed-width elements */pre,code,kbd,samp,tt {    font-family:monospace;    *font-size:108%;    line-height:100%;}/* YUI CSS Detection Stamp */#yui3-css-stamp.cssfonts { display: none; }

ログイン後にコピー

国产 CSS Reset

这是YUI最新更新的一次版本V3.18.1，但是很尴尬的发现，YUI 提供的 cssfonts 和 cssbase 只考虑了西欧文字，对汉字的支持却不多，这就导致很多用户只使用了cssreset，而没有使用其他两个。

据说nake和adiaos两大运动品牌到天朝后，有些运动科技会缩水，但是万万没想到，万能的代码到了天朝也是会缩水的。 - -!

于是乎，有些大牛不甘心，不仅厌倦了国内抄来抄去的CSS Reset，也受够了只考虑西欧洲字体，不考虑汉字的缺陷，大厂们就开始摸索制定属于自己的CSS Reset，比如2009年阿里Kissy框架 (源码连接已失效，主页留纪念) 的第一份CSS Reset：

/* KISSY CSS Reset理念：清除和重置是紧密不可分的特色：1.适应中文 2.基于最新主流浏览器维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form elements 表单元素 */th, td { /* table elements 表格元素 */    margin: 0;    padding: 0;}/* 设置默认字体 */body,button, input, select, textarea { /* for ie */    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;     /* 用 ascii 字符表示，使得在任何编码下都无问题 */}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */ul, ol { list-style: none; }/* 重置文本格式元素 */a { text-decoration: none; }a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted; cursor: help;}q:before, q:after { content: ''; }/* 重置表单元素 */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 *//* 注：optgroup 无法扶正 */button, input, select, textarea {    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */}/* 重置表格元素 */table { border-collapse: collapse; border-spacing: 0;}/* 重置 hr */hr {    border: none;    height: 1px;}/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */html { overflow-y: scroll; }

ログイン後にコピー

记得玉伯在写完第一版本的CSS Reset后，在文章的结尾还是千叮咛，万嘱咐说：

请记住：永远不存在万能解决方案，永远没有银弹。
因此我的建议和 Eric 是一样的：请根据具体需求，适量裁剪和修改后再使用。

替代品 Normalize.css

我们把历史拉回到今天，时过境迁，CSS Reset 逐渐淡出的前沿前端的视野，被取而代之就是Normalize.css，关于对CSS Reset 与 Normalize.css的区别？可以引用知乎上张小核桃的一个回答：

CSS Reset は、CSS Reset の中で最も過激なグループで、あなたが役に立つかどうかに関係なく、私のために服を脱いでください、なぜあなたは生まれたときに体に余裕を持っていたのですか？他の人は太っているのに、なぜアームビーズを着用する必要があるのですか?そこで *{margin:0;} が待って移動すると、すべて平らになりました。すべての生き物は平等であるように見えますが、実際には、それはリソースの無駄であり、何のメリットもありません。他の人のデフォルトのスタイルが本当に必要な場合は、どうすればよいでしょうか。鍋をストーブに投げ込んで燃やした人もいます。それを理解するのはあなた次第です。

Normalize.css は改革主義者です。彼らは、すべての要素には独自の存在理由があり、すべてを単純かつ乱暴に同じように扱うのは良くないと主張します。ボディサークルはページのリビングスペースをかなり圧迫しているので、変更してください。学者、農民、工業、商業など、役割を担っている人は誰でも、どのブラウザでも適切に仕事を遂行できるようにするための標準を設定しています。

次の章では、Normalize.css について簡単に説明します。この 2 つの違いについては、Q&A プラットフォームの質問を参照してください。
Normalize.css を使用するときに問題が発生しましたか?
Normalize.css と Reset CSS の間に本質的な違いはありますか?

Normalize.css の簡単な紹介

Github への紹介に関しては、The Taste of Chewing によって翻訳された正式な紹介用の中国語版がここにあります。

簡単な概要

Normalize.css は、先人たちの貢献のおかげで、@necolas と @jon_neal が数百時間かけてさまざまなブラウザーのデフォルトスタイルの違いを研究した結果です。

Normalize.css は単なる小さな CSS ファイルですが、デフォルトの HTML 要素のスタイルにおいてブラウザ間での高度な一貫性を提供します。従来の CSS Reset と比較して、Normalize.css は HTML5 用に用意された最新の高品質な代替手段です。 Normalize.css は現在、Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks、その他多くのフレームワーク、ツール、Web サイトで使用されています。

Normalize.css が CSS Reset の代替となることは議論の余地がありません。国内で有名なAliceUIやAmazeUIフレームワークはすべてNormalize.cssをベースにしたり借用したりしてカスタマイズしたものです。

ここからダウンロードできます:
Github: https://github.com/necolas/normalize.css/

これらのことを行います

Normalize.css は次のことを行います:

多くの CSS とは異なり、便利なデフォルトを保持します。
便利なブラウザのデフォルトスタイルを完全に削除するのではなく保持します
一般化されたスタイル : ほとんどの HTML 要素に を提供します
ブラウザ独自のスタイルを修正しますバグを解決し、ブラウザ間での一貫性を確保します
CSSの使いやすさを最適化します: いくつかのヒントを使用します
コードを説明します : コメントと詳細なドキュメントを使用します

比較利点

前述したように、CSS Reset の中心的な機能はそれをクリアすることであり、あまりにも暴力的であるため、後者の Normalize.css が前者を完全に置き換えることができる利点は何でしょうか。

1.Normalize.css は貴重なデフォルト値を保護しますリセットは、デフォルトのスタイルをほぼすべての要素に適用することで、要素に同じ視覚効果を強制します。対照的に、Normalize.css は多くのデフォルトのブラウザースタイルを維持します。これは、一般的なタイポグラフィ要素をすべて再スタイルする必要がなくなったことを意味します。要素のデフォルト値がブラウザごとに異なる場合、Normalize.css はそれらのスタイルの一貫性を保ち、可能な限り最新の標準に準拠するよう努めます。

2.Normalize.css はブラウザのバグを修正します一般的なデスクトップおよびモバイルブラウザのバグを修正します。これは多くの場合、リセットで実行できる範囲を超えています。この点に関して、Normalize.css によって修正される問題には、HTML5 要素の表示設定、書式設定されたテキストのフォントサイズの問題、IE9 の SVG オーバーフロー、およびさまざまなブラウザーやオペレーティングシステムで発生する多くのフォーム関連の問題が含まれます。

3.Normalize.css はブラウザのバグを修正します Reset の使用で最も厄介な部分は、ブラウザデバッグツールにおける大きな継承チェーンです。 Normalize.css ではそのような問題はありません。これは、ガイドラインでは複数のセレクターの使用に細心の注意を払っており、目的の要素のみを意図的にスタイル設定しているためです。

4.Normalize.css はモジュール式ですこのプロジェクトは、関連する複数の独立した部分に分割されているため、どの要素が特定の値に設定されているかを簡単かつ明確に知ることができます。これにより、アプリケーションの決して使用されない特定の部分 (フォームの一般化など) を選択的に削除できます。

5.Normalize.css には詳細なドキュメントがあります
Normalize.css のコードは、詳細かつ包括的なクロスブラウザーの調査とテストに基づいています。詳細なコードの説明はこのファイルにあり、さらに詳しくは Github Wiki で説明されています。これは、コードの各行が何を行うのか、コードが書かれた理由、ブラウザ間の違いを正確に知ることができ、独自のテストをより簡単に実行できることを意味します。

このプロジェクトの目標は、ブラウザーがデフォルトで要素をレンダリングする方法を人々が理解できるようにすると同時に、ブラウザーのレンダリングを改善する方法を簡単に理解できるようにすることです。

ソースコード分析

Normalize.css の 5 番目の利点は、詳細なドキュメントが提供されていることですが、対応する中国語バージョンが提供されていないことが第一に、英語のコメントが十分に明確ではないようで、第二に、問題の分析が提供されていないことが挙げられます。十分に詳しく説明されていないため、問題のケースも含まれていないため、モジュールのソースコードを解釈して章にまとめます。