Skip to content

Instantly share code, notes, and snippets.

@YannBirba
Created April 13, 2023 19:16
Show Gist options
  • Save YannBirba/654b06b7a9cb07c6b7189a86a63f7138 to your computer and use it in GitHub Desktop.
Save YannBirba/654b06b7a9cb07c6b7189a86a63f7138 to your computer and use it in GitHub Desktop.
Modern css reset by Josh comeau
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
@hyperknot
Copy link

hyperknot commented Sep 8, 2024

height: 100% got removed, I just wanted to mention since this is basically the top Google result for the Josh CSS reset.

https://www.joshwcomeau.com/css/custom-css-reset/#changelog-12

June 2023 — I removed the height: 100% from html and body. This rule was added to make it possible to use percentage-based heights within the application. Now that dynamic viewport units are well-supported, however, this hacky fix is no longer required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment