关于ide:44-万-StarGitHub-和-Twitter-都在用的-CSS-库

43次阅读

共计 1387 个字符，预计需要花费 4 分钟才能阅读完成。

【导语】：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

我的项目地址是：

https://github.com/necolas/no…

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