explaingit

sindresorhus/modern-normalize

Analysis updated 2026-06-24

7,320TypeScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

Modern-normalize is a tiny CSS file that makes Chrome, Firefox, and Safari display HTML elements consistently by fixing browser default style differences, drop it into any project with one line and nothing else to configure.

Mindmap

mindmap
  root((repo))
    What It Does
      Browser CSS reset
      Cross-browser fix
      Zero configuration
    Fixes Applied
      Box-sizing model
      Font consistency
      Code tab width
    Installation
      npm one command
      CDN single line
    Audience
      Web developers
      Modern browsers only
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add modern-normalize to any website so buttons, headings, and form fields look the same in every major browser

USE CASE 2

Replace the older normalize.css with a smaller file focused only on current browser versions

USE CASE 3

Set a consistent box-sizing model and improved font defaults across all elements before writing custom styles

USE CASE 4

Use as a CSS baseline in a new web project to avoid dealing with browser inconsistency bugs later

What is it built with?

CSSTypeScript

How does it compare?

sindresorhus/modern-normalizejakearchibald/idbtypestack/class-transformer
Stars7,3207,3267,330
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

In plain English

Modern-normalize is a small CSS file that makes web browsers display HTML elements consistently. Different browsers (Chrome, Firefox, Safari) have their own built-in default styles for things like headings, buttons, and form fields. Without any correction, the same webpage can look noticeably different depending on which browser a visitor uses. This file fixes those inconsistencies. It is a leaner, more focused alternative to the older and widely used normalize.css. The main differences are that it only targets the three most current major browsers, it forces every element to use a box-sizing model that most developers prefer, it improves the default font settings for consistency, and it sets a more readable tab width for code blocks. The result is a smaller file that covers the cases that actually matter for modern web development. Installing it takes one command via npm, or you can load it from a public CDN by dropping a single line into your HTML. Once included, it works quietly in the background and requires no configuration. The project explicitly states its own goal is to become unnecessary over time, meaning the authors hope browsers will eventually agree on sensible defaults and make this kind of fix file obsolete. This is a utility for web developers building websites or web apps. Non-technical users would not interact with it directly, but they benefit from it indirectly whenever a developer includes it in a project to smooth out browser differences.

Copy-paste prompts

Prompt 1
Show me the single CDN line to add modern-normalize to the head of an HTML page so it loads before my custom CSS
Prompt 2
How do I install modern-normalize via npm and import it in my CSS entry file in a webpack or Vite project?
Prompt 3
What specific browser inconsistencies does modern-normalize fix that the older normalize.css does not cover?
Prompt 4
I switched from normalize.css to modern-normalize and my form inputs look different. What changed in how modern-normalize handles input elements, and how do I restore my previous styles?

Frequently asked questions

What is modern-normalize?

Modern-normalize is a tiny CSS file that makes Chrome, Firefox, and Safari display HTML elements consistently by fixing browser default style differences, drop it into any project with one line and nothing else to configure.

What language is modern-normalize written in?

Mainly TypeScript. The stack also includes CSS, TypeScript.

How hard is modern-normalize to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is modern-normalize for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.