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:
unset
and revert
keywords.all
which can reset all properties combined.:where()
pseudo-class to remove specificity.:not()
pseudo-class with multi arguments.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.
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";
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;
}
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 */ }
88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |