Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
- Normalize.css project site
- Normalize.css source on Github
- Normalize.css documentation
- Normalize.css demo
Normalize.css is currently used in some form by HTML5 Boilerplate, Twitter Bootstrap, GOV.UK, Tinker.io, CSS Tricks, and many other frameworks, toolkits, and sites.
Overview
Normalize.css is an alternative to CSS resets. The project is the product of 100′s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.
The aims of normalize.css are as follows:
- Preserve useful browser defaults rather than erasing them.
- Normalize styles for a wide range of HTML elements.
- Correct bugs and common browser inconsistencies.
- Improve usability with subtle improvements.
- Explain the code using comments and detailed documentation.
It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.
Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.
Normalize vs Reset
It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.
Normalize.css preserves useful defaults
Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.
When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.
Normalize.css corrects common bugs
It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correcting
font-size
for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.
No comments:
Post a Comment