阅读 129

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 等。

文章分类
开发工具
文章标签