⏪ The New CSS Reset

A package that resets some of the default, user agent based, styles.

It doesn't affect the display property and special HTML elements like iframe, canvas, img, svg and video.

This package is using the new CSS features:

• The global CSS reset keywords, unset and revert keywords.
• The new property of all which can reset all properties combined.
• The :where() pseudo-class to remove specificity.
• The :not() pseudo-class with multi arguments.

Motivation

This package is built with the understanding that we don’t want to use default styles we are getting from the browsers, except for the display property.

How to get started?

Run npm i the-new-css-reset OR Download the Latest Version.

Once installed, you can use it in two different ways:

1. Import /css/reset.css before the regular styles of the project.
2. Include the following snippet in one of the JavaScript/TypeScript entry files:

import "the-new-css-reset/css/reset.css";

Want to exclude some of the resets?

You can revert to the default styles of the browser!

For example:

input[type="checkbox"],
input[type="radio"] {
    all: revert;
}

or all input elements:

input,
textarea,
select {
   all: revert;
}

Accessibility Recommendation

To keep your website accessible, don't forget to take care of the :focus states.

:focus { /* focus styles */ }

/* or/and */

:focus-visible { /* keyboard only focus styles */ }

Browser Support

| | | | | --- | --- | --- | --- | --- | --- | 88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |