CSS 重置（Reset）与规范化（Normalize）：User Agent样式表的覆盖策略

CSS 重置（Reset）与规范化（Normalize）：User Agent 样式表的覆盖策略

大家好，今天我们来深入探讨 CSS 重置（Reset）和规范化（Normalize）这两个概念，它们都是前端开发中处理浏览器默认样式的重要手段。理解它们之间的区别，以及它们如何影响我们覆盖 User Agent 样式表（User Agent Stylesheet，简称 UA 样式表）策略，对于编写跨浏览器兼容且一致的 CSS 代码至关重要。

什么是 User Agent 样式表？

每个浏览器（Chrome、Firefox、Safari 等）都自带一套默认的样式表，这就是 User Agent 样式表。这些样式表定义了 HTML 元素在没有 CSS 样式时的默认呈现方式。例如，<h1> 标签默认带有较大的字号和粗体，<ul> 标签默认带有项目符号和一定的内外边距，等等。

User Agent 样式表的主要目的是：

• 提供基本的可用性： 确保即使没有自定义 CSS，网页也能以一种可读、可用的方式显示。
• 定义 HTML 元素的语义： 例如，<h1> 标签默认字号大于 <h2> 标签，这反映了它们在文档结构中的重要性。

然而，不同浏览器的 User Agent 样式表之间存在差异，这会导致网页在不同浏览器上的显示效果不一致。例如，不同浏览器对 <h1> 标签的默认字号、<ul> 标签的默认内外边距，甚至对表单元素的默认样式都可能有所不同。

这种差异性给前端开发带来了挑战，因为我们需要确保网页在各种浏览器上都呈现出预期的效果。为了解决这个问题，CSS 重置和规范化应运而生。

CSS 重置（Reset）

CSS 重置的目标是彻底移除所有浏览器的默认样式，将所有元素的样式设置为一个已知的、一致的起点。这意味着，重置后的网页将没有任何默认样式，所有的样式都必须由开发者显式地指定。

工作原理：

CSS 重置通常通过将大量元素的许多 CSS 属性设置为 0、none、normal 等值来实现。例如：

/* 通用重置 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 移除列表的默认样式 */
ul,
ol {
  list-style: none;
}

/* 移除链接的默认样式 */
a {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色 */
}

/* 移除标题元素的默认样式 */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit; /* 继承父元素的字号 */
    font-weight: normal; /* 使用常规字体粗细 */
}

/* 移除按钮的默认样式 */
button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: none; /* 移除 focus 时的轮廓 */
}

/* 移除表格的默认样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 图片自适应容器 */
img {
    max-width: 100%;
    height: auto;
    border: none;
}

/* input 属性继承 */
input {
  border: none;
  outline: none;
  font: inherit;
}

/* 移除表单元素的默认样式 */
select, textarea {
    appearance: none; /* 移除默认外观 */
    border: none;
    outline: none;
    font: inherit;
}

优点：

• 高度一致性： 保证在所有浏览器上，所有元素的起始样式都是相同的，开发者可以完全掌控网页的样式。
• 避免默认样式干扰： 开发者可以避免因浏览器默认样式而导致的意外布局或样式问题。

缺点：

• 需要编写大量 CSS： 由于所有样式都需要显式指定，因此开发者需要编写更多的 CSS 代码。
• 破坏语义化： 重置可能会移除一些有用的默认样式，这些样式实际上反映了 HTML 元素的语义。例如，移除 <h1> 标签的默认字号可能会削弱其在文档结构中的重要性。
• 可能引入可访问性问题： 移除某些默认样式可能会影响网页的可访问性，例如，移除表单控件的默认样式可能会使其难以使用键盘导航。

常用的 CSS 重置库：

• Meyer Reset: 一种非常激进的重置方式，几乎移除了所有默认样式。

CSS 规范化（Normalize）

CSS 规范化的目标是保留有用的浏览器默认样式，并修复不同浏览器之间的差异，使它们更一致。这意味着，规范化后的网页仍然会保留一些默认样式，但这些样式在不同浏览器上的表现会更加一致。

工作原理：

CSS 规范化通常通过以下方式来实现：

• 修复浏览器之间的差异： 例如，修复不同浏览器对 <h1> 标签的默认字号差异，使它们更接近一致。
• 保留有用的默认样式： 例如，保留 <h1> 标签的默认字号，以反映其在文档结构中的重要性。
• 改善可访问性： 例如，为表单控件提供一些基本的样式，以使其更易于使用键盘导航。

/*! 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;
}

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

/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */

abbr[title] {
  text-decoration: underline dotted;
}

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

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Improve consistency of default fonts in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

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

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

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

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

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;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

优点：

• 保留语义化： 规范化保留了有用的默认样式，这些样式实际上反映了 HTML 元素的语义。
• 改善可访问性： 规范化通常会为表单控件提供一些基本的样式，以使其更易于使用键盘导航。
• 减少 CSS 代码量： 由于保留了一些默认样式，因此开发者需要编写的 CSS 代码量相对较少。

缺点：

• 并非完全一致： 规范化只能使不同浏览器之间的样式更接近一致，但无法完全消除差异。
• 可能需要覆盖规范化样式： 有时，开发者可能需要覆盖规范化提供的默认样式，以实现特定的设计效果。

常用的 CSS 规范化库：

• Normalize.css: 最流行的 CSS 规范化库，它修复了大量的浏览器差异，并保留了有用的默认样式。
• Reboot (Bootstrap): Bootstrap 框架中包含的规范化样式，它基于 Normalize.css，并添加了一些额外的样式。

重置 vs 规范化：选择哪一个？

选择 CSS 重置还是规范化，取决于项目的具体需求和开发者的偏好。

以下是一些选择的指导原则：

• 需要完全掌控网页样式： 如果你需要完全掌控网页的样式，并且不希望受到任何浏览器默认样式的干扰，那么 CSS 重置可能更适合你。
• 希望保留语义化： 如果你希望保留 HTML 元素的语义，并且不希望破坏网页的可访问性，那么 CSS 规范化可能更适合你。
• 快速启动项目： 如果你需要快速启动一个项目，并且不希望编写大量的 CSS 代码，那么 CSS 规范化可能更适合你。
• 大型项目： 在大型项目中，通常建议使用 CSS 规范化，因为它可以在保证一致性的同时，减少 CSS 代码量，并提高可维护性。

表格总结：

特性	CSS 重置 (Reset)	CSS 规范化 (Normalize)
目标	移除所有默认样式	保留有用的默认样式，并修复浏览器差异
样式起点	空白画布	具有基本样式的画布
代码量	更多	更少
语义化	破坏	保留
可访问性	可能降低	改善
适用场景	需要完全掌控样式，对语义化要求不高，小型项目	保留语义化，改善可访问性，大型项目
常用库	Meyer Reset	Normalize.css, Reboot (Bootstrap)

如何使用 CSS 重置/规范化？

使用 CSS 重置或规范化非常简单。你只需要将重置或规范化 CSS 文件链接到你的 HTML 文件中，并且确保它位于所有其他 CSS 文件之前。

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="normalize.css"> <!-- 规范化 CSS (或 reset.css) -->
  <link rel="stylesheet" href="style.css">     <!-- 你自己的 CSS -->
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

重要提示： 确保你的自定义 CSS 文件位于重置或规范化 CSS 文件之后，这样你的样式才能覆盖重置或规范化提供的样式。CSS 的层叠特性（Cascading）决定了样式应用的优先级，后声明的样式会覆盖先声明的样式。

覆盖 User Agent 样式表的策略

无论你选择使用 CSS 重置还是规范化，最终的目标都是覆盖 User Agent 样式表，并为网页提供自定义的样式。以下是一些覆盖 User Agent 样式表的策略：

1. Specificity (特异性):

   CSS 的特异性决定了哪些样式规则将应用于特定的元素。特异性越高的规则，优先级越高。

   • 内联样式 (Inline Styles): 特异性最高 (例如: <h1 style="color: red;">)
   • ID 选择器 (ID Selectors): 特异性较高 (例如: #my-element)
   • 类选择器 (Class Selectors), 属性选择器 (Attribute Selectors), 伪类 (Pseudo-classes): 特异性中等 (例如: .my-class, [type="text"], :hover)
   • 元素选择器 (Element Selectors), 伪元素 (Pseudo-elements): 特异性较低 (例如: h1, ::before)
   • *通用选择器 ():** 特异性最低

   了解特异性对于覆盖 User Agent 样式表至关重要。例如，如果 User Agent 样式表定义了 h1 元素的字号为 2em，而你在 CSS 文件中使用了 h1 { font-size: 3em; }，那么你的样式将覆盖 User Agent 样式表的样式，因为你的规则具有更高的特异性。

   更重要的是理解，即使是规范化样式，也可能因为特异性不够高，而无法覆盖某些 UA 样式。 此时就需要调整选择器，提高特异性，或者使用 !important 声明。

2. Source Order (源顺序):

   如果两个规则具有相同的特异性，那么后声明的规则将覆盖先声明的规则。这就是 CSS 的层叠特性。

   这就是为什么我们需要确保重置或规范化 CSS 文件位于所有其他 CSS 文件之前。这样，你的自定义样式才能覆盖重置或规范化提供的样式。

3. !important 声明:

   !important 声明可以强制某个样式规则具有最高的优先级，即使它具有较低的特异性。

   h1 {
     font-size: 3em !important;
   }

   应谨慎使用 !important 声明，因为它会使 CSS 代码难以维护。过度使用 !important 可能会导致样式冲突，并使调试变得困难。通常，只有在极少数情况下，例如覆盖第三方库的样式时，才应该使用 !important 声明。

4. 浏览器开发者工具:

   浏览器开发者工具（例如 Chrome DevTools 或 Firefox Developer Tools）可以帮助你检查元素的样式，并查看哪些样式规则正在生效。这些工具还可以显示样式规则的特异性，以及哪些规则被覆盖了。

   使用开发者工具可以帮助你理解 User Agent 样式表的影响，并找出覆盖 UA 样式的最佳策略。

5. 了解不同浏览器的差异:

   即使使用了 CSS 重置或规范化，不同浏览器之间仍然可能存在一些细微的差异。了解这些差异可以帮助你编写更具兼容性的 CSS 代码。

   例如，不同浏览器对表单元素的默认样式可能有所不同。你可以使用条件注释或 JavaScript 来针对特定浏览器应用不同的样式。

示例：覆盖 <ul> 标签的默认样式

假设你想覆盖 <ul> 标签的默认样式，并移除项目符号和内边距。

使用 CSS 重置：

如果使用了 CSS 重置，<ul> 标签的默认样式已经被移除，因此你只需要添加以下 CSS 规则：

ul {
  list-style: none;
  padding: 0;
  margin: 0; /* 可能需要，取决于你的设计 */
}

使用 CSS 规范化：

如果使用了 CSS 规范化，<ul> 标签可能仍然有一些默认样式。你可以使用以下 CSS 规则来覆盖这些样式：

ul {
  list-style: none;
  padding: 0;
  margin: 0; /* 可能需要，取决于你的设计 */
}

使用开发者工具验证：

使用浏览器开发者工具检查 <ul> 标签的样式，确保你的 CSS 规则已成功覆盖 User Agent 样式表。如果你的样式没有生效，请检查特异性、源顺序以及 !important 声明。

总结

CSS 重置和规范化是前端开发中处理浏览器默认样式的重要手段。CSS 重置的目标是彻底移除所有默认样式，而 CSS 规范化的目标是保留有用的默认样式，并修复浏览器之间的差异。选择哪一个取决于项目的具体需求和开发者的偏好。无论选择哪一个，理解 User Agent 样式表的影响，并掌握覆盖 UA 样式的策略，对于编写跨浏览器兼容且一致的 CSS 代码至关重要。

更多IT精英技术系列讲座，到智猿学院