The New CSS Reset

This new CSS reset is using the new CSS features:

What the-new-css-reset is resetting?

This CSS reset is built from the understanding we don’t want to use the default style 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 mention, and except special HTML elements like iframe, canvas, img, svg, 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;
 }

Download the Latest Version

How it Looks and Works

/*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
    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;
}


Browser Support

All evergreen browsers (except Samsung Internet browser version 14, will be support in the next version).

Extensive Reading and Watching

Made by Elad Shechter (twitter)