modern-normalize — Modern CSS Reset for Consistent Browser Defaults

Introduction

modern-normalize is a CSS normalization library that fixes inconsistencies between browser default stylesheets. Unlike older resets, it targets only modern browsers and avoids opinionated style overrides, giving you a predictable baseline without stripping useful defaults.

What modern-normalize Does

• Normalizes default margins, paddings, and font sizes across Chrome, Firefox, Safari, and Edge
• Fixes known cross-browser rendering inconsistencies for form elements, tables, and media
• Sets box-sizing to border-box on all elements for predictable layout calculations
• Preserves useful browser defaults like list styles and heading hierarchy
• Weighs under 1 KB gzipped, adding negligible overhead to any project

Architecture Overview

modern-normalize is a single CSS file with carefully ordered rule sets that target specific browser inconsistencies. Each rule includes inline comments documenting which browser behavior it addresses. The file is distributed via npm and can be imported as a CSS module or linked directly. It has zero JavaScript dependencies and zero runtime cost beyond a single stylesheet.

Self-Hosting & Configuration

• Install via npm, yarn, or pnpm: npm install modern-normalize
• Import at the top of your main CSS file: @import 'modern-normalize'
• Alternatively, copy the CSS file directly into your project's static assets
• Works with any CSS preprocessor (Sass, Less, PostCSS) or bundler (Vite, webpack)
• No configuration needed; the file is ready to use as-is

Key Features

• Targets only modern evergreen browsers, eliminating legacy IE workarounds
• Applies border-box sizing globally for intuitive width and height behavior
• Normalizes form control rendering across browsers without opinionated styling
• Corrects inconsistent line-height and font-family inheritance in all browsers
• Maintained by Sindre Sorhus with a focus on minimal, well-documented changes

Comparison with Similar Tools

• normalize.css — The original normalizer with broader legacy browser support; modern-normalize is smaller and modern-only
• CSS Reset (Meyer) — Strips all defaults aggressively; modern-normalize preserves useful defaults
• sanitize.css — Opinionated reset with additional defaults; modern-normalize is less opinionated
• Tailwind Preflight — Tailwind's built-in reset based on modern-normalize with additional opinions
• Pico CSS — Classless CSS framework that goes beyond normalization into component styling

FAQ

Q: Should I use modern-normalize or normalize.css? A: Use modern-normalize if you only target evergreen browsers. Use normalize.css if you need IE 11 or other legacy browser support.

Q: Does modern-normalize conflict with CSS frameworks? A: No. It provides a baseline that frameworks build upon. Many frameworks like Tailwind CSS use modern-normalize internally.

Q: Can I customize which normalizations are applied? A: The file is small enough to copy and edit directly. Remove any rules you do not need or override them in your own stylesheet.

Q: Does it include any JavaScript? A: No. modern-normalize is pure CSS with no JavaScript, no build step, and no runtime dependencies.

Sources

• https://github.com/sindresorhus/modern-normalize
• https://www.npmjs.com/package/modern-normalize