Normalize.css is an alternative to CSS reset. It provides a high degree of consistency across browsers on the default HTML element style. Normalize.css is a modern, premium alternative for HTML5 (http://necolas.github.io/normalize.css/）
Both normalize.css and reset.css are stylesheets for resetting browser tabs
The purpose of creating normalize.css is as follows:
Protect useful browser default styles instead of removing them entirely
Generalized Styles: Provided for most HTML elements
Fix the browser's own bugs and ensure consistency across browsers
Optimize CSS usability: Use a few tips
Explain the code: use comments and detailed documentation
Normalize.css supports a wide range of browsers, including mobile browsers, and generalizes HTML5 elements, typography, lists, embedded content, forms, and tables. Although this project is based on generalization, we have used more practical defaults where appropriate.
Normalize vs Reset
1. Normalize.css Protected valuable defaults
Reset forces elements to have the same visual effect by imposing a default style on almost all elements. In contrast, Normalize.css maintains many of the default browser styles. This means that you no longer have to restyle all common typography elements. When an element has different defaults in different browsers, Normalize.css strive to keep these styles consistent and as consistent as possible with modern standards.
2. Normalize.css Fixed a bug in the browser
It fixes common bugs in desktop and mobile browsers. This is often beyond what Reset can do. In this regard, the issues Normalize.css fixed include the display settings of HTML5 elements, font-size issues with preformatted text, SVG overflow in IE9, and many form-related bugs that appear in various browsers and operating systems.
3. Normalize.css It will not make your debugging tools cluttered
One of the most annoying aspects of using Reset is the large inheritance chain in the browser debugging tool, as shown in the image below. There will be no such problem in Normalize.css, because we are very careful with the use of multi-selectors in our guidelines, and we will only style the target element purposefully.
4. Normalize.css is modular
The project has been split into related but separate parts, which makes it easy and clear which elements are set to specific values. This allows you to selectively remove parts that you will never use (such as generalization of forms).
5. Normalize.css Has detailed documentation
Normalize.css code is based on detailed and comprehensive cross-browser research and testing. This file has detailed code descriptions and further instructions on the Github Wiki. This means you can find out what exactly each line of code does, why you wrote it, the differences between browsers, and you can test your own more easily.
How to use normalize.css
First, install or download Normalize.css from Github, and then there are two main ways to use it.
Strategy 1: Use normalize.css as the foundation CSS for your own projects, customizing style values to suit the designer's needs.
Strategy 2: Import normalize.css source code and build on top of it, overriding the defaults with your own CSS when necessary.
CSS file download:https://necolas.github.io/normalize.css/8.0.0/normalize.css
|
Posted on 7/27/2018 2:49:36 PM
|
|
|
|
