-
-
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } -
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } -
1.3 - Setting body defaults
body { min-block-size: 100vh; min-block-size: 100svh; min-inline-size: 320px; margin: 0; line-height: calc(1ex / 0.32); }- Read more about the ex-unit used for line-height.
-
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-
-
-
-
p { margin-inline: 0; margin-block-start: 0; margin-block-end: 0; } p:not(:last-child) { margin-block-end: calc(1ex / 0.32); }
-
h1, .h1 { line-height: calc(1ex / 0.42); margin-inline: 0; margin-block-start: 0; margin-block-end: calc(1ex / 0.42); }Rest of headings' style
h2, .h2 { line-height: calc(1ex / 0.42); margin-inline: 0; margin-block-start: 0; margin-block-end: calc(1ex / 0.42); } h3, .h3 { line-height: calc(1ex / 0.38); margin-inline: 0; margin-block-start: 0; margin-block-end: calc(1ex / 0.38); } h4, .h4 { line-height: calc(1ex / 0.37); margin-inline: 0; margin-block-start: 0; margin-block-end: calc(1ex / 0.37); }
-
-
:where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; hyphens: auto; }CSS-tricks article about the differences between
overflow-wrap1,word-break2 and the non-standardword-wrap3. -
2.3 - Improve line wrapping
:where(h1, h2, h3, h4, h5, h6, blockquote) { text-wrap: balance; // wrapping lines roughly the same length white-space: unset; }
p, li, figcaption { text-wrap: pretty; // adding visual balance by removing orphans max-inline-size: 65ch; //* }- Eric Meyer about the
chunit.
- Eric Meyer about the
-
a { text-decoration-skip-ink: auto; color: currentColor; text-underline-offset: 0.15em; } -
- A more visual (video) representation by Dmitry Mayorov.
- Can I use
hanging-punctuation?
As of June 6, 2025, only Safari TP and Safari on iOS support it.
blockquote { text-indent: -0.4em; } @supports (hanging-punctuation: first) { html { text-indent: 0; hanging-punctuation: first allow-end last; } } pre { hanging-punctuation: none; }
-
-
-
3.1 - Adding media defaults
img, picture, video, canvas, svg { display: block; max-inline-size: 100%; height: auto; } -
:where(svg) { fill: currentColor; } :where(svg):where(:not([fill])) { stroke: currentColor; fill: none; } -
img { font-style: italic; object-fit: cover; }
-
-
-
input, button, textarea, select { color: currentColor; font: inherit; letter-spacing: inherit; //* word-spacing: inherit; //* }- Jake Lazaroff about letter- and word-spacing.
-
4.2 - Increase textarea size for coarse pointers (e.g fingers)
textarea:not([rows]) { min-height: 10em; } -
:where(textarea) { resize: vertical; } @supports (resize: block) { :where(textarea) { resize: block; } } -
:where( button, button[type], input[type='button'], input[type='submit'], input[type='reset'] )[disabled] { cursor: not-allowed; }
-
-
-
:where(ul, ol)[role='list'] { list-style: none; } -
:where(ul, ol)[role='list'] { margin-block-start: 0; padding: 0; }
-
-
-
table { border-collapse: collapse; border-spacing: 0; } -
th, td { text-align: start; vertical-align: top; }
-
-
-
:target { scroll-margin-block: 2ex; }- Kevin Powell video about scroll-padding.
-
::marker { line-height: 0; } -
:where( a[href], area, button, input:where( [type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'] ), label[for], select, summary, [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; }
-
-
-
8.1 - Allow transitions between intrinsic sizes and keyword values (e.g from and to
height: autowhen no explicit width is set )
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }- If animations need mathematical calculations use
calc-size.
- If animations need mathematical calculations use
-
8.2 - Disables motion for users who prefer reduced motion and on devices with a slow screen refresh rate
@media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }- Accessing
prefers-reduced-motionwith Javascript.
- Accessing
-
8.3 - Smooth scrolling
html { scroll-behavior: smooth; } -
8.4 - 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; } }
-
-
Notifications
You must be signed in to change notification settings - Fork 0
mihaly-ale/css-reset
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
About
A CSS reset inspired by Andy Bell, Josh W. Comeau, Jake Lazaroff, Dan Cătălin Burzo and Elly Loel.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published