Come, let's talk about Normalize.css_html/css_WEB-ITnose

This article is translated from http://nicolasgallagher.com/about-normalize-css/
Originally published on my blog: http://jerryzou.com/posts/aboutNormalizeCss/

Normalize.css is just a small CSS file, but it provides a high degree of cross-browser consistency in the styling of default HTML elements. Compared to traditional CSS reset, Normalize.css is a modern, high-quality alternative prepared for HTML5. Normalize.css is now used in Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks and many other frameworks, tools and websites.

Normalize.css project address

Normalize.css source code on GitHub

Overview

Normalize.css is a Alternative to CSS reset. After @necolas and @jon_neal spent hundreds of hours studying the differences in default styles across browsers, this project finally became what it is now.

We created normalize.css with the following goals:

Preserving useful browser default styles rather than removing them completely

General styles : Provide

for most HTML elements

Fix the browser’s own bugs and ensure consistency across browsers

Optimize CSS usability : Use some tips

Explain the code : Use comments and detailed documentation

Normalize.css supports mobile browsers including Many browsers have generalized HTML5 elements, typography, lists, embedded content, forms, and tables at the same time. Although this project is based on general principles, we have used more practical defaults where appropriate.

Normalize vs Reset

It is very valuable to know the difference between Normalize.css and traditional Reset.

1. Normalize.css protects valuable default values ​​

Reset forces the elements to have the same visual effect by applying default styles to almost all elements. In contrast, Normalize.css maintains many default browser styles. This means you no longer have to restyle all common typography elements. When an element has different default values ​​in different browsers, Normalize.css strives to keep those styles consistent and in line with modern standards as much as possible.

2. Normalize.css fixes browser bugs

It fixes common desktop and mobile browser bugs. This is often beyond what Reset can do. In this regard, the issues fixed by Normalize.css include the display settings of HTML5 elements, font-size issues with preformatted text, SVG overflow in IE9, and many form-related issues that appear in various browsers and operating systems. bug.

You can look at the following example to see how Normalize.css ensures cross-browser consistency for the new input type search in HTML5.

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

3. Normalize.css will not make your debugging tools cluttered

The most troublesome part of using Reset is the long paragraphs in the browser debugging tools The inheritance chain is as shown in the figure below. There is no such problem in Normalize.css, because in our guidelines we are very careful about the use of multiple selectors, and we only purposefully style the target element.

4. Normalize.css is modular

This project has been split into related but independent parts, which makes it easy for you to It's clear which elements are set to a specific value. This allows you to selectively remove certain parts of your application that will never be used (such as generalization of forms).

5. Normalize.css has detailed documentation

The code of Normalize.css is based on detailed and comprehensive cross-browser research and testing. Detailed code descriptions are found in this file and further explained in the Github Wiki. This means you can find out exactly what each line of code does, why it was written, the differences between browsers, and you can more easily conduct your own testing.

The goal of this project is to help people understand how browsers render elements by default, while also making it easy to understand how to improve browser rendering.

How to use normalize.css

First, install or download Normalize.css from Github. There are two main ways to use it.

Strategy 1: Use normalize.css as the basic CSS of your own project, and customize the style values ​​to meet the needs of the designer.

Strategy 2: Introduce the normalize.css source code and build on it, overriding the default value with your own CSS when necessary.

Conclusion

Normalize.css and Reset are very different in terms of application scope and implementation. It's worth trying both methods out and seeing which one suits your development preferences better. This project is developed as open source on Github. Anyone can submit a problem report or submit a patch. The entire project development process is visible to everyone, and the reasons for each change are also written in the commit information, which are traceable.

Related Reading

For more details on the default UA style:

WHATWG suggestions for rendering HTML documents

Internet Explorer User Agent Style Sheets

CSS2.1 User Agent Style Sheet Defaults