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

语言: CN / TW / HK
时间 2022-05-17 05:15:33

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

项目地址是：

http://github.com/necolas/normalize.css

下载安装

  • npm

npm install --save normalize.css

  • CDN

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

  • 直接下载

http://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 等。

「」
「」