@haydn/universal

A CSS reset that reduces styles to the bare minimum.

Usage

You can add the CSS to a file directly via unpkg:

<link
  rel="stylesheet"
  href="https://unpkg.com/@haydn/universal@latest/universal.css"
/>

Alternatively, in a JavaScript project you can install the package via npm:

npm i @haydn/universal

If your project uses a bundler like Webpack or Parcel, you can import the CSS file directly:

import "@haydn/universal/universal.css";

Features

Unset browser defaults

The default styles are removed by a all: unset declaration applied to all elements except the following:

• HTML head element
• HTML metadata content elements
• HTML embedded content elements
• SVG elements
• MathML elements

Use box-sizing

All HTML elements are given a box-sizing: border-box declaration except the head element and metadata content elements.

All ::before and ::after pseudo-elements are given a box-sizing: inherit declaration.

Retain block elements

Following elements are given a display: block declaration:

• address
• article
• aside
• audio
• blockquote
• body
• canvas
• dd
• details
• dialog
• div
• dl
• dt
• fieldset
• figcaption
• figure
• footer
• form
• h1
• h2
• h3
• h4
• h5
• h6
• header
• hgroup
• hr
• iframe
• img
• li
• main
• math
• nav
• object
• ol
• p
• pre
• section
• svg
• ul
• video

Retain tables layout

The display properties for table elements are reset back to their normal values:

• table (display: table)
• thead (display: table-header-group)
• tbody (display: table-row-group)
• tfoot (display: table-footer-group)
• tr (display: table-row)
• th (display: table-cell)
• td (display: table-cell)

Additionally, the border-collapse property is set to collapse for table elements.

Sensible defaults for embedded content

All embedded content elements are given border: none and max-width: 100% declarations:

• audio
• canvas
• iframe
• img
• math
• object
• svg
• video

Accessibility

This reset removes some important accessibility defaults. If you use this reset, you should add your own styles to ensure your content is accessible, most importantly:

• Links should be identify with an underline or similar indicator.
• Focusable elements should be highlighted when focused.