Come on, let's talk about Normalize.css.

This article was translated from http://nicolasgallagher.com/about-normalize-css/
Originally Posted in my blog: http://jerryzou.com/posts/aboutNormalizeCss/

Normalize.css is just a small CSS file, but it provides a high level of cross-browser consistency on the default HTML element style. Compared to the traditional CSS reset , Normalize.css is a modern, for the HTML5 preparation of high-quality alternative solutions. Normalize.cssIt has been used for Twitter Bootstrap, HTML5 boilerplate, gov.uk, Rdio, CSS Tricks, and many other frameworks, tools, and websites.

• NORMALIZE.CSS Project Address
• Normalize.css's source code on GitHub.

Review

Normalize.cssis a kind CSS reset of alternative. After @necolas and @jon_neal spent hundreds of hours trying to study the differences in the default styles of different browsers, the project finally became the case now.

We create normalize.css the following several purposes:

• protect Useful Browser default styles instead of completely removing them
• Generalized style : provides for most HTML elements
• fix bugs in browser itself and ensure consistency of each browser
• optimize the usability of CSS : with some tips
• explain the code : use annotations and detailed documentation to

Normalize.cssSupports hyper-browsers including mobile browsers, while generalizing HTML5 elements, typography, lists, embedded content, forms, and tables. Although this project is based on the principle of generalization, we have used a more practical default value in the right place.

Normalize vs Reset

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

1. NORMALIZE.CSS protects valuable default values

ResetForcing elements to have the same visual effect by imposing a default style on almost all elements. By contrast, Normalize.css many of the default browser styles are maintained. This means that you no longer have to reset the style for all of the common typographic elements. When an element has different default values in different browsers, Normalize.css it tries to keep the styles consistent and consistent with the modern standards as much as possible.

2. Normalize.css fixed a bug in the browser

It fixes common desktop-and mobile-browser bugs. This is often beyond the Reset scope of what can be done. In this connection, Normalize.css the fixed issues include display settings for HTML5 elements, problems with pre-formatted text font-size , overflow of SVG in IE9, and many form-related bugs that appear in browsers and operating systems.

Consider the following example to see how the new type in HTML5 input search Normalize.css guarantees cross-browser consistency.

/** * 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; Span class= "Hljs-comment" >/* 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 messy

The most disturbing part of using reset is the large section of the inheritance chain in the browser debugging tool, as shown in. Normalize.cssThere is no such problem in our guidelines, because we are very cautious about using multi-selectors in our code, and we only have destinations that style the target elements.

4. The NORMALIZE.CSS is modular

This project has been split into several related but separate sections, which makes it easy and clear to know which elements are set to a certain value. So this allows you to selectively remove certain parts that will never be used (such as the generalization of a form).

5. NORMALIZE.CSS has detailed documentation

Normalize.css's code is based on detailed and comprehensive cross-browser research and testing. This file has detailed code descriptions and is further explained in the GitHub wiki. This means that you can find out what each line of code is doing, why you should write the code, the differences between browsers, and make it easier for you to do your own testing.

The goal of this project is to help people understand how the browser renders the 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, and then there are two main ways to use it.

• Strategy one: normalize.css as the base CSS for your own project, customize the styling values to meet the needs of the designer.
• Strategy two: Introduce the normalize.css source code and build it on this basis, and overwrite the default values with your own CSS when necessary.

Conclusion

Both in terms of scope of application and implementation Normalize.css , Reset there is a great difference. It is worthwhile to try both of these methods and see which one is better for your development preferences. This project was developed in the form of open source on GitHub. Anyone can submit a problem report or submit a patch. The whole process of project development is visible to all, and the reasons for each change are written in the commit message, which are traceable.

Related reading

For more information about the default UA style:

• WHATWG suggestions for rendering HTML documents
• Internet Explorer User Agent Style Sheets
• CSS2.1 User Agent Style Sheet Defaults

Come on, let's talk about Normalize.css.