Skip to content

Instantly share code, notes, and snippets.

@Brian-Pob
Created March 4, 2023 19:13
Show Gist options
  • Save Brian-Pob/056e9dde75d4ea9fa970b072876a6b6b to your computer and use it in GitHub Desktop.
Save Brian-Pob/056e9dde75d4ea9fa970b072876a6b6b to your computer and use it in GitHub Desktop.
Brian Poblete's CSS Reset. A combination of styles from the resets of Josh Comeau and Andy Bell.
/*
Brian Poblete's CSS Reset
Inspired by Josh Comeau's CSS Reset and Andy Bell's CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
https://andy-bell.co.uk/a-modern-css-reset/
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
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;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
#root,
#__next {
isolation: isolate;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment