4.4 万 Star！GitHub 和 Twitter 都在用的 CSS 库

【导语】：Normalize.css 使浏览器呈现的所有元素更加一致，符合现代标准。它精确地只针对需要规范化的样式。

简介

不同浏览器对于同一个元素会有不一样的默认样式，normalize.css 采用和平且高效的方式，解决了浏览器默认样式的问题，尽可能让同一个 CSS 文件在不同的浏览器上显示一样的效果。

normalize.css 是一个小的 CSS 文件，它在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。它是一种现代的、支持 HTML5 的、替代传统 CSS reset 的方法。

目前 Twitter、GitHub、Medium、Guardian、GOV.UK、CSS Tricks 和 Bootstrap 等许多其他框架、工具包和站点都在使用。

主要作用：

• 与许多 CSS reset 不同，保留有用的默认值，而非删除它们。
• 标准化各种元素的样式。
• 纠正错误和常见的浏览器不一致问题。
• 通过细微的修改提高可用性。
• 使用详细注释解释代码的作用。

它支持范围广泛的浏览器（包括移动浏览器），并包含对 HTML5 元素、排版、列表、嵌入内容、表单和表格进行规范化。

• Chrome
• Edge
• Firefox ESR+
• IE 10+
• Safari 8+
• Opera

项目地址是：

github.com/necolas/nor…

下载安装

• npm

npm install --save normalize.css

• CDN

https://yarnpkg.com/en/package/normalize.css

• 直接下载

https://necolas.github.io/normalize.css/latest/normalize.css

简单使用

normalize.css 修复了 CSS reset 范围之外的常见桌面和移动浏览器错误。包括 HTML5 元素的显示设置、更正 font-size 预格式文本、IE9 中的 SVG 溢出以及跨浏览器和操作系统的许多与表单相关的错误。

normalize.css 使新的 HTML5 search 输入类型跨浏览器一致和样式化：

/**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。