# modern-normalize: a lighter CSS reset for modern browsers

> modern-normalize is a small CSS file that normalizes default styles across the latest Chrome, Firefox, and Safari. It sets box-sizing: border-box globally, improves font consistency, and is a leaner alternative to normalize.css.

**sindresorhus/modern-normalize** — 🐒 Normalize browsers' default style

- Repository: https://github.com/sindresorhus/modern-normalize
- Stars: 7,416 · Forks: 398
- Language: TypeScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/sindresorhus-modern-normalize

## A minimal reset for modern browser standards

modern-normalize is a single CSS file that makes default element styles consistent across the latest versions of Chrome, Firefox, and Safari. CSS resets and normalizers exist because browsers apply different default styles to form fields, headings, tables, and other elements; a reset makes these defaults predictable so you can build on a level foundation. The original normalize.css project takes a broad approach, supporting many browsers and edge cases over a long history. modern-normalize takes a different approach: drop support for older browsers and include only normalizations that matter to current browser versions. The README states the goal: make itself obsolete. As browsers converge on standard behavior, there is less need to override defaults. Last push was on 2026-09-18, within the past two weeks.

## Three browsers, smaller CSS, bolder choices

The README directly contrasts modern-normalize to normalize.css. modern-normalize is smaller because it covers only three browsers. It sets box-sizing: border-box on all elements, a common best practice for layout that Paul Irish documented years ago. It improves consistency of default fonts across the three browsers. It sets a more readable tab size than the browser defaults. Each of these points is justified in the GitHub issues referenced in the README. normalize.css, by contrast, must support many browsers and must be conservative to avoid breaking sites that rely on older browser quirks. modern-normalize does not carry that burden, so it can make stronger choices and ship a smaller file.

## Installation and usage options

Install via npm:

```bash
npm install modern-normalize
```

Then import it in your CSS:

```css
@import 'node_modules/modern-normalize/modern-normalize.css';
```

Or link it in HTML:

```html
<link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">
```

The README also provides download links for normal and minified versions. Three CDN platforms host the file: jsdelivr, unpkg, and cdnjs. Use whichever CDN you prefer or already load other libraries from. Include modern-normalize early in your stylesheet cascade, before any project-specific CSS, so your rules can override it as needed. The package.json specifies the main entry point as modern-normalize.css, and sideEffects is set to true, signaling that the CSS must be included and cannot be tree-shaken by bundlers.

## Browser support and forward compatibility

modern-normalize supports only the latest stable versions of Chrome, Firefox, and Safari. The package.json lists Node 6 or later as the build requirement, but the CSS file itself has no runtime dependencies. If you deploy to older browsers, modern-normalize will not undo vendor-specific quirks and may break layouts that depend on older browser behavior. The README acknowledges that its goal is to become obsolete; as browser standards converge and vendor differences shrink, the need for a normalization layer declines. Until then, modern-normalize is appropriate for products that can drop older browser support.

## Box sizing, font consistency, and tab width

Three design decisions distinguish modern-normalize. First, it sets box-sizing: border-box on all elements. This changes the box model so that padding and borders are included in the element's width and height, rather than added to it. This is a widely preferred approach that simplifies layout math. Second, it normalizes default font family and sizes to be more consistent between browsers and more readable. Third, it increases the default tab width, since the browser default of 8 spaces is harder to read in modern monospaced fonts. These choices are documented in the linked GitHub issues, showing the rationale for each change.

## Testing, maintenance, and licensing

The package.json shows comprehensive test scripts. test:stylelint checks the CSS against style rules with stylelint and the xo configuration. test:chrome, test:firefox, and test:safari run acceptance tests in each browser using testcafe. The test:all command runs the full suite. The README claims the project is fully tested and maintained. The latest release, v3.0.1, came out in September 2024, which is approximately two years before the current date. The version field in package.json is automatically updated with each release via the version script. The project is licensed under MIT, permitting free use in commercial and open-source projects.

## When to use modern-normalize, and alternatives

Use modern-normalize in new projects targeting recent browsers, especially if you want to avoid decisions about CSS resets and prefer an opinionated, tested approach. The tiny file size makes it negligible to include. If your project already uses a CSS framework like Bootstrap or Tailwind CSS, that framework likely includes its own reset, and adding modern-normalize on top could cause conflicts. If you need to support older browsers or specific browser quirks, stick with the original normalize.css or write your own reset. If you use CSS-in-JS libraries like styled-components or emotion, reset defaults are often handled by the library, and a separate CSS reset file may be redundant.

## Conclusion

Adopt modern-normalize if you build for Chrome, Firefox, and Safari only, and you want predictable default styles across these browsers without writing a large CSS reset. Skip it if you support Internet Explorer or older browser versions, or if you prefer a CSS-in-JS approach that handles styling programmatically. Verify that your target browsers are recent enough; the README promises no changes to default behavior between latest stable versions.

## FAQ

### What is the difference between modern-normalize and normalize.css?

modern-normalize is smaller and supports only the latest Chrome, Firefox, Safari. It sets box-sizing: border-box and optimizes font defaults, while normalize.css must support older browsers and is more conservative.

### How do I install modern-normalize?

Run npm install modern-normalize, then import or link modern-normalize.css in your HTML or CSS before your project-specific styles.

### Do I need modern-normalize if I use a CSS framework like Bootstrap?

No. CSS frameworks like Bootstrap include their own reset or normalization, and adding modern-normalize on top could cause conflicts.

## Sources

- [Issues](https://github.com/sindresorhus/modern-normalize/issues)
- [License: MIT](https://github.com/sindresorhus/modern-normalize/blob/main/LICENSE)
- [README](https://github.com/sindresorhus/modern-normalize/blob/main/README.md)
- [Releases](https://github.com/sindresorhus/modern-normalize/releases)
- [sindresorhus/modern-normalize on GitHub](https://github.com/sindresorhus/modern-normalize)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/sindresorhus-modern-normalize