⏪ 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:
`js
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:


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

or all input elements:
`css
input,
textarea,
select {
all: revert;
}
`

Accessibility Recommendation

To keep your website accessible, don't forget to take care of the `:focus` states.
`css
:focus { / focus styles / }

/ or/and /

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

Browser Support

!Chrome | !Edge | !Firefox | !Safari | !Opera | !Samsung Internet
--- | --- | --- | --- | --- | --- |
88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |