【 introduction 】 : Normalize. CSS makes all elements rendered by browsers more consistent and in line with modern standards. It is precisely for styles that need to be normalized.

Introduction to the

Different browsers have different default styles for the same element. Normalize. CSS solves the problem of default browser styles in a peaceful and efficient way, and tries to make the same CSS file appear the same on different browsers.

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styles of HTML elements. It is a modern, HTML5-enabled alternative to traditional CSS Reset.

Many other frameworks, toolkits and sites are currently in use, including Twitter, GitHub, Medium, Guardian, gov.uk, CSS Tricks and Bootstrap.

Main functions:

  • Unlike many CSS resets, keep useful defaults instead of removing them.
  • Standardize the styles of various elements.
  • Correct errors and common browser inconsistencies.
  • Improve usability with minor modifications.
  • Use detailed comments to explain what the code does.

It supports a wide range of browsers (including mobile browsers) and includes normalization of HTML5 elements, typography, lists, embedded content, forms, and tables.

  • Chrome
  • Edge
  • Firefox ESR+
  • IE 10+
  • Safari 8+
  • Opera

The project address is:

Github.com/necolas/nor…

Download and install

  • npm
npm install --save normalize.css
Copy the code
  • CDN
https://yarnpkg.com/en/package/normalize.css
Copy the code
  • Direct download
https://necolas.github.io/normalize.css/latest/normalize.css
Copy the code

Simple to use

Normalize. CSS fixes common desktop and mobile browser errors outside of the CSS Reset range. This includes display Settings for HTML5 elements, correction of font-size preformatted text, SVG overflow in IE9, and many form-related errors across browsers and operating systems.

Normalize. CSS makes the new HTML5 Search input types consistent and stylized across browsers:

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

Open Source outpost shares hot, interesting, and useful open source projects on a daily basis. Participate in the maintenance of 100 thousand + Star open source technology resource library, including: Python, Java, C/C++, Go, JS, CSS, Node.js, PHP,.NET, etc.