The New CSS Reset
What is The New CSS Reset?
I remeber the time when i used to use something like this to reset the browser CSS to nothing and then start building my styles.
CSS
*,html,body { margin:0; padding:0; border:none; }
Well times have changed since this kind of reset. And now there is a new but still minimal reset called The New CSS Reset.
What can i use this for?
Use this css reset to set your page styles to defaults but still keep intact the important defaults.
This new CSS reset 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.
What is the-new-css-reset resetting?
This CSS reset is built from the understanding that we don’t want to use default styles we are getting from the browsers, except the ‘display’ property.
This CSS reset removes all the default styles which we are getting on specific HTML elements except the ‘display’ property, as I already mentioned, and special HTML elements like iframe
, canvas
, img
, svg
, and video
.
In case you want the default style of the browser of a specific HTML element back, you can revert back 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;
}
NPM and How to Use?
The package name at NPM is 'the-new-css-reset'.
Import /css/reset.css before the regular styles of the project.
In a React project, insert it to the main entry file
import "the-new-css-reset/css/reset.css"
Browser Support
All evergreen browsers
- Chrome, Edge: version 88+
- FireFox: version 84+
- Safari/iOS browsers: version 14+
- Opera: version 75+
- Samsung Browser: version 15+
Should I use it?
x
Conclusion
A Nice minimal CSS reset script which will not reset some of the valuable defaults but still resets to a nice base where you can start your own modifications.
Original Source
Thanks to the author elad2412, this code comes from the following github page.
The New CSS Reset Demo
View Demo Full Screen View Demo New Tab
The New CSS Reset Code
CSS
/*** The new CSS Reset - version 1.4.1 (last updated 23.11.2021) ***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove list styles (bullets/numbers) */
ol, ul {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly. */
:where([contenteditable]){
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
}
External Link for The New CSS Reset