elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.25k stars 229 forks source link
css reset-css

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

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

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