or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-normalize-css

A modern alternative to CSS resets that normalizes styles for cross-browser consistency

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/normalize.css@8.0.x

To install, run

npx @tessl/cli install tessl/npm-normalize-css@8.0.0

index.mddocs/

normalize.css

normalize.css is a modern alternative to CSS resets that preserves useful browser defaults while normalizing styles for cross-browser consistency. Unlike traditional CSS resets that remove all styling, normalize.css corrects bugs and browser inconsistencies, provides useful defaults, and includes detailed comments explaining what each rule accomplishes.

Package Information

  • Package Name: normalize.css
  • Package Type: npm
  • Language: CSS
  • Installation: npm install --save normalize.css
  • CDN: https://yarnpkg.com/en/package/normalize.css
  • Download: https://necolas.github.io/normalize.css/latest/normalize.css
  • Size: ~6KB
  • Dependencies: None (standalone CSS)

Core Imports

HTML Link Tag:

<link rel="stylesheet" href="normalize.css">

CSS Import:

@import "normalize.css";

ES6 Module (with bundler):

import 'normalize.css';

CommonJS (with bundler):

require('normalize.css');

Basic Usage

Direct HTML inclusion:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your HTML content will now have normalized cross-browser styles -->
  <h1>Consistent heading across browsers</h1>
  <form>
    <input type="text" placeholder="Normalized form input">
    <button type="submit">Normalized button</button>
  </form>
</body>
</html>

Direct download usage:

<!DOCTYPE html>
<html>
<head>
  <!-- Download normalize.css and include locally -->
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your normalized content -->
</body>
</html>

Integration with build tools:

// webpack.config.js or similar
import 'normalize.css';
import './app.css'; // Your application styles

Browser Support

  • Chrome (all versions)
  • Edge (all versions)
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera (all versions)

Capabilities

HTML Root Element

Sets consistent line-height and prevents iOS font size adjustments on orientation change.

html {
  line-height: 1.15; /* 1. Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS */
}

Body Element

Removes the default margin in all browsers.

body {
  margin: 0;
}

Main Element

Renders the main element consistently in IE.

main {
  display: block;
}

H1 Element

Corrects the font size and margin on h1 elements within section and article contexts in Chrome, Firefox, and Safari.

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

HR Element

Adds correct box sizing in Firefox and shows overflow in Edge and IE.

hr {
  box-sizing: content-box; /* 1. Add the correct box sizing in Firefox */
  height: 0; /* 1 */
  overflow: visible; /* 2. Show the overflow in Edge and IE */
}

Pre Element

Corrects the inheritance and scaling of font size in all browsers.

pre {
  font-family: monospace, monospace; /* 1. Correct the inheritance and scaling of font size in all browsers */
  font-size: 1em; /* 2. Correct the odd `em` font sizing in all browsers */
}

Anchor Element

Removes the gray background on active links in IE 10.

a {
  background-color: transparent;
}

Abbreviation Element

Removes the bottom border in Chrome 57- and adds correct text decoration in Chrome, Edge, IE, Opera, and Safari.

abbr[title] {
  border-bottom: none; /* 1. Remove the bottom border in Chrome 57- */
  text-decoration: underline; /* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline dotted; /* 2 */
}

Bold and Strong Elements

Adds the correct font weight in Chrome, Edge, and Safari.

b,
strong {
  font-weight: bolder;
}

Code, Kbd, Samp Elements

Corrects the inheritance and scaling of font size in all browsers.

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1. Correct the inheritance and scaling of font size in all browsers */
  font-size: 1em; /* 2. Correct the odd `em` font sizing in all browsers */
}

Small Element

Adds the correct font size in all browsers.

small {
  font-size: 80%;
}

Sub and Sup Elements

Prevents sub and sup elements from affecting the line height in all browsers.

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

Sub Element

Positions subscript text correctly.

sub {
  bottom: -0.25em;
}

Sup Element

Positions superscript text correctly.

sup {
  top: -0.5em;
}

Image Element

Removes the border on images inside links in IE 10.

img {
  border-style: none;
}

Form Control Elements

Changes the font styles in all browsers and removes the margin in Firefox and Safari.

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1. Change the font styles in all browsers */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2. Remove the margin in Firefox and Safari */
}

Button and Input Elements

Shows the overflow in IE and Edge.

button,
input {
  overflow: visible;
}

Button and Select Elements

Removes the inheritance of text transform in Edge, Firefox, and IE.

button,
select {
  text-transform: none;
}

Clickable Button Types

Corrects the inability to style clickable types in iOS and Safari.

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

Button Focus Inner

Removes the inner border and padding in Firefox.

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

Button Focus Ring

Restores the focus styles unset by the previous rule.

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

Fieldset Element

Corrects the padding in Firefox.

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

Legend Element

Corrects the text wrapping in Edge and IE, color inheritance from fieldset elements in IE, and removes the padding.

legend {
  box-sizing: border-box; /* 1. Correct the text wrapping in Edge and IE */
  color: inherit; /* 2. Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers */
  white-space: normal; /* 1 */
}

Progress Element

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

progress {
  vertical-align: baseline;
}

Textarea Element

Removes the default vertical scrollbar in IE 10+.

textarea {
  overflow: auto;
}

Checkbox and Radio Elements

Adds the correct box sizing in IE 10 and removes the padding in IE 10.

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1. Add the correct box sizing in IE 10 */
  padding: 0; /* 2. Remove the padding in IE 10 */
}

Number Input Spin Buttons

Corrects the cursor style of increment and decrement buttons in Chrome.

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

Search Input

Corrects the odd appearance in Chrome and Safari and the outline style in Safari.

[type="search"] {
  -webkit-appearance: textfield; /* 1. Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* 2. Correct the outline style in Safari */
}

Search Input Decoration

Removes the inner padding in Chrome and Safari on macOS.

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

File Upload Button

Corrects the inability to style clickable types in iOS and Safari and changes font properties to inherit in Safari.

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1. Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* 2. Change font properties to `inherit` in Safari */
}

Details Element

Adds the correct display in Edge, IE 10+, and Firefox.

details {
  display: block;
}

Summary Element

Adds the correct display in all browsers.

summary {
  display: list-item;
}

Template Element

Adds the correct display in IE 10+.

template {
  display: none;
}

Hidden Attribute

Adds the correct display in IE 10.

[hidden] {
  display: none;
}

Key Benefits

  • Preserves Useful Defaults: Unlike CSS resets, keeps helpful browser defaults
  • Cross-Browser Consistency: Eliminates rendering differences between browsers
  • Bug Fixes: Corrects known browser bugs and inconsistencies
  • Detailed Documentation: Every rule includes comments explaining its purpose
  • Small Size: Only ~6KB of CSS, much smaller than full CSS frameworks
  • Zero Dependencies: Pure CSS with no external dependencies
  • Wide Browser Support: Works with all modern browsers and IE10+

Integration Patterns

With CSS Frameworks:

<!-- Load normalize.css first, then your framework -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">

With CSS-in-JS:

import 'normalize.css';
import styled from 'styled-components';

const App = styled.div`
  /* Your styles build on normalized base */
  font-family: 'Helvetica', sans-serif;
`;

Build Tool Integration:

// Import in your main CSS/SCSS file
@import 'normalize.css';

// Your application styles
body {
  font-family: 'Arial', sans-serif;
}

Extended Details and Known Issues

Additional technical details and explanations of the more complex parts of normalize.css.

pre, code, kbd, samp Font Family

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

sub, sup Elements

Normally, using sub or sup affects the line-box height of text in all browsers. The normalize.css rules prevent these elements from affecting line height while maintaining proper positioning.

select Element Styling

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.

[type="checkbox"] and [type="radio"] Styling

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

[type="number"] Input Behavior

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text, which can be confusing for users.

[type="search"] Input Limitations

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).

Contributing

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.

Resources