不同类型的 CSS Reset 实现的差异

前言

CSS Reset 是许多前端开发者在开发项目时都会用到的一种技术。它可以校正不同浏览器之间的默认样式，以便更好地定制页面样式。然而，由于 CSS Reset 的实现方式存在多样性，使用不同的 CSS Reset 方法会对页面布局与样式表现产生影响。本文将会讲解不同类型的 CSS Reset 实现的差异，说明每种方法的优缺点，提供指导开发者选择合适的 CSS Reset 方式。

CSS Reset 的实现

1. YUI Reset CSS

经典的 YUI Reset CSS 是最早推荐和使用的 CSS Reset 方法之一。由于它比较彻底的重置默认样式，所以通常会导致 HTML 元素失去大量的默认样式。 对于需要自己实现的样式表，该方法可能是不错的选择。但是 YUI Reset CSS 的样式极少，因此在重写样式时需要进行大量的工作。由于样式比较少，该方法通常对网页的性能影响较小。

// www.javascriptcn.com code example
html {
    color: #000;
    background: #FFF;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,img {
    border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var,optgroup {
    font-style: inherit;
    font-weight: inherit;
}

del,ins {
    text-decoration: none;
}

li {
    list-style: none;
}

caption,th {
    text-align: left;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,q:after {
    content: '';
}

abbr,acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: baseline;
}

sub {
    vertical-align: baseline;
}

input,textarea,select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

2. Eric Meyer's Reset CSS

Eric Meyer's Reset CSS 是其中比较流行的一种 CSS Reset 方法。它不仅仅重置了常规常规的样式，还包括了一些关键的样式表。此外，与传统的 CSS Reset 方法不同的是，该方法特别注意了外联与内联样式的差异，让外联样式在浏览器中呈现整齐且一致的显现效果。

实现 Eric Meyer's Reset CSS 应该考虑到在关闭浏览器缓存时会花费一些额外的加载时间，样式也更为深入并详细，这可能会对网页的性能造成一定的影响。

// www.javascriptcn.com code example
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5的块元素样式 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. Normalize.css

Normalize.css 是深度重写 webkit 样式以及重写来自不同浏览器的应用程序默认样式的一种 CSS Reset 方法。相对于前两种方法，Normalize.css 的方法更为“柔和”，以平衡浏览器之间的样式差异。它重定了常规标签的默认样式，而无需清除任何属性。该方法的优点是它极大地减少了实际清除的 CSS 样式，并解决了许多常见的 CSS 问题，因此通常是开发人员的首选。

与使用 Eric Meyer's Reset CSS 方法时相比，Normalize.css 最大的优点是它保留了原始浏览器中的一些样式，因此默认出现的样式比传统的 CSS Reset 要好得多。但是，需要注意的是，由于这种方法与浏览器自带的样式表有所不同，因此可能会造成某些提交崩溃的页面部分。

// www.javascriptcn.com code example
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Remove the spacing around the `hr` element in all browsers.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Remove the margin between nested lists in all browsers.
 */

ul ul,
ol ol,
ul ol,
ol ul {
  margin: 0;
}

/**
 * Correct the sizing and spacing of `figcaption` elements.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Correct the odd `em` font sizing in all browsers.
 * 2. Prevent `sub` and `sup` elements from affecting the line height in
 *    all browsers.
 */

[role="group"] {
  font-size: 0; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * Prevent `textarea` resizing in all browsers.
 */

textarea {
  resize: vertical;
}

/**
 * 1. Remove the default vertical scrollbar in IE 10+.
 * 2. Improve readability and alignment in all browsers.
 */

pre {
  overflow: auto; /* 1 */
  white-space: pre-wrap; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title],
abbr[data-original-title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd appearance in Chrome, Edge, and Safari.
 */

code,
kbd,
samp,
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent font adjustments in Firefox and Safari.
 */

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

textarea {
  border-radius: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Change the border and margin in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

结论

在前端开发过程中，CSS Reset 是一个必备技术，因为它可以为我们提供比浏览器默认样式更好的样式，从而更好地控制页面元素。然而，不同的 CSS Reset 方法会产生差异。在进行选择的时候，应考虑到页面展现与性能考虑。如果追求较为彻底、清空所有默认样式建议使用 YUI Reset CSS；如果想平衡不同浏览器的样式，接受少量样式的修改，建议使用 Normalize.css；而该比较流行的 Eric Meyer's Reset CSS，则中等切实适合大多数开发情况。最后，选择 CSS Reset 的时候应根据项目实际需求来对其特色与不足进行分析，做出选项。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c64aba336082f2541088b