Freaks reset stylesheet extraction from Normalize.css and Eric Meyer reset

One day I learned about Normalize.css. Instead of wiping out browser defaults, it makes them consistent: Chrome, IE, Firefox, Safari and Opera all added slightly different padding and margins, and Normalize evened them out.

It sounded good, so I switched from Eric Meyer's reset to Normalize. Then I realised Normalize doesn't reset anything, it only normalises. I wanted both, so I merged them into one file: the Freaks reset.

What was in it

• From Eric Meyer: zero margin, padding and border on nearly every element; inherited fonts; no list bullets inside nav; collapsed table borders.
• From Normalize: display: block for HTML5 elements in old browsers; consistent h1, small, sub and sup sizes; monospace fonts for code and pre; form controls that inherit font size; fixes for search inputs, buttons and Firefox's inner focus padding.
• Old-browser hacks: about a third of the file. Properties prefixed with * and _ that only IE6 and IE7 read, -ms-interpolation-mode for image scaling in IE7, and an overflow-y: scroll to keep pages centred.

/* HTML5 element display reset for non-supporting browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

/* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

img { -ms-interpolation-mode: bicubic; }

What I would do today

Almost none of that file is needed now. The browsers it patched are gone, and the HTML standard describes the default styles, so current browsers mostly agree. Normalize.css itself hasn't had a release since 2018.

A short modern reset covers the useful parts:

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

• box-sizing: border-box makes widths include padding and borders, which is what most people expect.
• Media elements stop overflowing their containers.
• Form controls use the page's font instead of the system default.
• Long words and URLs wrap instead of breaking the layout.

If you'd rather not maintain your own, modern-normalize is a maintained successor to Normalize.css for current browsers. I go deeper into the choice in Demystifying CSS Resets.