Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Reset
/*
Made by Elly Loel - https://ellyloel.com/
With inspiration from:
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
Notes:
- `:where()` is used to lower specificity for easy overriding.
*/
* {
/* Remove default margin on everything */
margin: 0;
/* Remove default padding on everything */
padding: 0;
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
line-height: calc(0.25rem + 1em + 0.25rem);
}
/* Use a more-intuitive box-sizing model on everything */
*,
::before,
::after {
box-sizing: border-box;
}
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
*:where(:not(fieldset, progress, meter)) {
border-width: 0;
border-style: solid;
background-origin: border-box;
background-repeat: no-repeat;
}
html {
/* Allow percentage-based heights in the application */
block-size: 100%;
/* Making sure text size is only controlled by font-size */
-webkit-text-size-adjust: none;
}
/* Smooth scrolling for users that don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
body {
/* Improve text rendering */
-webkit-font-smoothing: antialiased;
/* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
text-rendering: optimizeSpeed;
/* Allow percentage-based heights in the application */
min-block-size: 100%;
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
/* scrollbar-gutter: stable both-edges; Removed until this bug is fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
}
/* Improve media defaults */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
}
:where(img, svg, video) {
block-size: auto;
max-inline-size: 100%;
}
/* Remove stroke and set fill colour to the inherited font colour */
:where(svg) {
stroke: none;
fill: currentColor;
}
/* SVG's without a fill attribute */
:where(svg):where(:not([fill])) {
/* Remove fill and set stroke colour to the inherited font colour */
stroke: currentColor;
fill: none;
/* Rounded stroke */
stroke-linecap: round;
stroke-linejoin: round;
}
/* Set a size for SVG's without a width attribute */
:where(svg):where(:not([width])) {
inline-size: 5rem;
}
/* Remove built-in form typography styles */
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
color: inherit;
font: inherit;
font-size: inherit;
letter-spacing: inherit;
word-spacing: inherit;
}
/* Change textarea resize to vertical only and block only if the browser supports that */
:where(textarea) {
resize: vertical;
}
@supports (resize: block) {
:where(textarea) {
resize: block;
}
}
/* Avoid text overflows */
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
/* Fix h1 font size inside article, aside, nav, and section */
h1 {
font-size: 2em;
}
/* Position list marker inside */
:where(ul, ol) {
list-style-position: inside;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
:where(ul, ol)[role="list"] {
list-style: none;
}
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make it clear that interactive elements are interactive */
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
cursor: pointer;
touch-action: manipulation;
}
:where(input[type="file"]) {
cursor: auto;
}
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
cursor: pointer;
}
/* Animate focus outline */
@media (prefers-reduced-motion: no-preference) {
:focus-visible {
transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
}
:where(:not(:active)):focus-visible {
transition-duration: 0.25s;
}
}
:where(:not(:active)):focus-visible {
outline-offset: 5px;
}
/* Make sure users can't select button text */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
text-align: center;
}
/* Disabled cursor for disabled buttons */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
cursor: not-allowed;
}
@WebReflection
Copy link

WebReflection commented Jun 21, 2022

any particular reason only label[for] has pointer but not just label? It's pretty common to put input inside labels to avoid needing IDs all over the page and that has same behavior once clicked (example: checkboxes).

thanks for clarification or, eventually, updating that 👋

@NetOpWibby
Copy link

NetOpWibby commented Jun 23, 2022

This looks great

@Nixteridakis
Copy link

Nixteridakis commented Jun 23, 2022

Awesome stuff 💫

@nikrowell
Copy link

nikrowell commented Jun 28, 2022

@WebReflection I think the input selector would handle the checkbox case, and label elements without a for attribute technically aren't interactive (ie. the nested input would be)?

@WebReflection
Copy link

WebReflection commented Jun 29, 2022

@nikrowell no, label doesn't need a for, it's the other way around ... a label needs a for attribute that points to a unique identifier only when that element is not inside the label.

@nikrowell
Copy link

nikrowell commented Jun 29, 2022

@WebReflection my thought was with the [for] attribute selector, you'd still get cursor: pointer on the nested input, however, I see your original point in that you still want nested text (or other elements) to inherit that style 😀

@learosema
Copy link

learosema commented Oct 10, 2022

Super awesome. Also really love the idea of lowering specificity via where

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