A MODERN alternative to CSS resets - This is a fork inspired by the original normalize.css created by Nicolas Gallagher and Jonathan Neal over 8 years ago with some modernized changes to improve readability, compatibility with modern browsers, and to simplify the codebase.

npm install modern-normalize-css

yarn add modern-normalize-css

bun add modern-normalize-css

Simply copy the styles/normalize.css file to your project and use it as you would the original normalize.css file in the root of the project.

Add the following line to your main CSS file:

@import "modern-normalize-css/styles/normalize.css";

Add the following line to your main JavaScript or TypeScript file:

import "modern-normalize-css/styles/normalize.css";

GitHub: https://github.com/parksthecoder/modern-normalize-css

NPM: https://www.npmjs.com/package/modern-normalize-css

See (for older Original normalize.css version) https://necolas.github.io/normalize.css/latest/normalize.css

• Preserves useful defaults, unlike many CSS resets.
• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.
• Improves usability with subtle modifications.
• Explains what code does using detailed comments.

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

By default, Chrome on OS X and Safari on OS X allow very limited styling of select, unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width.

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text.

The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font, padding, border, or background. In Chrome and Safari on Windows you can't control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches).

Correct the inability to style clickable types in iOS and Safari. Remove the inner border and padding in Firefox.

Correct the padding in Firefox.

Correct the text wrapping in Edge and IE. Correct the color inheritance from fieldset elements in IE. Remove the padding so developers are not caught out when they zero out fieldset elements in all browsers.

Add the correct vertical alignment in Chrome, Firefox, and Opera.

Remove the default vertical scrollbar in IE 10+.

Add the correct display in Edge, IE 10+, Firefox, and all browsers for details and summary.

Add the correct display in IE 10+ for template and elements with the hidden attribute.

• Updated Line-Height: Changed from 1.5 to 1.375rem for better readability.
• Safe Area Insets: Added support for safe area insets to accommodate devices with notches or rounded corners.
• Font Definitions: Updated root-level font definitions for a more modern and consistent look.
• Consistent Line-Height: Ensured consistent line-height across various elements.
• Modern Browser Features: Considered modern browser features and compatibility.
• Detailed Comments: Added detailed comments to explain the purpose of each rule.

• Line-Height: Updated from 1.5 to 1.375rem for improved readability.
• Safe Area Insets: Added padding for safe area insets to support modern devices.
• Font Definitions: Modernized font definitions for better consistency.
• Consistent Line-Height: Applied consistent line-height across all elements.
• Modern Browser Features: Enhanced support for modern browser features.
• Detailed Comments: Improved comments for better understanding and maintainability.