https://github.com/elad2412/the-new-css-reset
The New Simple and Lighter CSS Reset
https://github.com/elad2412/the-new-css-reset
css reset-css
Last synced: 10 months ago
JSON representation
The New Simple and Lighter CSS Reset
- Host: GitHub
- URL: https://github.com/elad2412/the-new-css-reset
- Owner: elad2412
- License: mit
- Created: 2021-04-28T07:17:46.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T19:43:16.000Z (over 1 year ago)
- Last Synced: 2025-05-10T10:36:42.934Z (10 months ago)
- Topics: css, reset-css
- Language: CSS
- Homepage: https://elad2412.github.io/the-new-css-reset/
- Size: 87.9 KB
- Stars: 2,300
- Watchers: 45
- Forks: 226
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - the-new-css-reset
README
# ⏪ 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](https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.css).**
**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
 |  |  |  |  | 
--- | --- | --- | --- | --- | --- |
88+ ✔ | 88+ ✔ | 84+ ✔ | 14+ ✔ | 75+ ✔ | 15+ ✔ |