What exactly is Normalize.css used for?

Normalize.css is * ?

Normalize.css is just a small CSS file, but it provides a high degree of cross-browser consistency in the default HTML element styling. 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, CSS Tricks and many other frameworks, tools and websites.

• Normalize.css project address

• Normalize.css source code on GitHub

What is the use of Normalize.css?

Normalize.css is an 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 for the following purposes:

• Protect useful browser default styles instead of removing them completely

• Generalized styles: Provide most HTML elements

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

• Optimize CSS usability: with some tips

• Explain the code: with comments and detailed documentation

Normalize.css support includes Many browsers, including mobile browsers, have generalized HTML5 elements, layouts, 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.

How to use normalize.css

First, install or download Normalize.css from Github, then 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.

# Question: If I link two css at the same time, will there be a conflict?

In detail: I use Normalize.css to reset almost all default styles as you said, so that all browsers have a consistent browsing effect for undefined styles. Then if I link my own style.css, can I achieve my effect based on it?

Answer: Put all the content in Normalize.css at the top of your own style.css, so that if there is a conflict, the CSS settings written at the back will overwrite the ones written at the front by default. The

normalize.css has real value advantages

1. Normalize.css protects valuable default values

   Reset passes as Default styles are applied to almost all elements, forcing them to have the same visual effect. 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.

可以看以下这个例子，看看对于HTML5中新出现的input类型search，Normalize.css是如何保证跨浏览器的一致性的。
"

     /**
      * 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 when browsing There are large inheritance chains in the debugging tool, 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 multiple related but independent section, which makes it easy and 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

   Normalize.css’s code 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. ###

   这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

## 结语
无论从适用范畴还是实施上，Normalize.css与Reset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的，而每一次改动的原因也都写在commit信息中，这些都是有迹可循的。

The above is the detailed content of What exactly is Normalize.css used for?. For more information, please follow other related articles on the PHP Chinese website!