From ba22a9de2f1ba777369587297b962f0d62dab816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deniz=20Ak=C5=9Fim=C5=9Fek?= Date: Wed, 29 Apr 2026 18:14:40 +0300 Subject: [PATCH 1/2] First draft of new reset --- src/aria.css | 8 ++ src/core/sanitize.css | 191 +++++------------------------------------- src/main.css | 12 +++ 3 files changed, 39 insertions(+), 172 deletions(-) diff --git a/src/aria.css b/src/aria.css index b75532a..3c55322 100644 --- a/src/aria.css +++ b/src/aria.css @@ -1,4 +1,12 @@ +[aria-busy=true] { + cursor: progress; +} + +[aria-disabled=true], [disabled] { + cursor: not-allowed; +} + [role=tablist] { display: flex; gap: .5ch; diff --git a/src/core/sanitize.css b/src/core/sanitize.css index 0bbf79b..b136398 100644 --- a/src/core/sanitize.css +++ b/src/core/sanitize.css @@ -1,165 +1,51 @@ /* stylelint-disable plugin/browser-compat */ -/* Document - * ========================================================================== */ - -/** - * 1. Add border box sizing in all browsers (opinionated). - * 2. Backgrounds do not repeat by default (opinionated). - */ *, ::before, ::after { - box-sizing: border-box; /* 1 */ - background-repeat: no-repeat; /* 2 */ + box-sizing: border-box; + font-kerning: normal; } -/** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ +:root { + cursor: default; -::before, -::after { - text-decoration: inherit; /* 1 */ - vertical-align: inherit; /* 2 */ -} + overflow-wrap: break-word; -/** - * 1. Use the default cursor in all browsers (opinionated). - * 3. Breaks words to prevent overflow in all browsers (opinionated). - * 5. Remove the grey highlight on links in iOS (opinionated). - * 6. Prevent adjustments of font size after orientation changes in iOS. - */ + -webkit-tap-highlight-color: transparent; -:root { - cursor: default; /* 1 */ - overflow-wrap: break-word; /* 3 */ - -webkit-tap-highlight-color: transparent; /* 5 */ - text-size-adjust: none; + -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -} - -/* Text-level semantics - * ========================================================================== */ + text-size-adjust: none; -/** - * Add the correct text decoration in Safari. - */ + @media (prefers-reduced-motion: no-preference) { + interpolate-size: allow-keywords; + scroll-behavior: smooth; + } +} abbr[title] { text-decoration: underline dotted; } -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - strong, b { font-weight: bolder; } -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; +a { + text-decoration-skip-ink: auto; } -/* Embedded content - * ========================================================================== */ - -/* - * Change the alignment on media elements in all browsers (opinionated). - */ - audio, canvas, iframe, img, svg, video { vertical-align: middle; + max-width: 100%; } -/** - * Change the fill color to match the text color in all browsers (opinionated). - */ - svg:not([fill]) { fill: currentColor; } -/* Tabular data - * ========================================================================== */ - -/** - * 1. Collapse border spacing in all browsers (opinionated). - * 2. Correct table border color in Chrome, Edge, and Safari. - * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. - */ - -table { - border-collapse: collapse; /* 1 */ - border-color: currentColor; /* 2 */ - text-indent: 0; /* 3 */ -} - -/* Forms - * ========================================================================== */ - -/** - * Remove the margin on controls in Safari. - */ - -button, input, select { - margin: 0; -} - -/** - * Correct the inability to style buttons in iOS and Safari. - */ - -button, [type=button], [type=reset], [type=submit] { - -webkit-appearance: button; -} - -/** - * Change the inconsistent appearance in all browsers (opinionated). - */ - -fieldset { - border: 1px solid #a0a0a0; -} - -/** - * Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - vertical-align: baseline; -} - -/** - * 1. Remove the margin in Firefox and Safari. - */ - -textarea { - margin: 0; /* 1 */ -} - -/** - * 1. Correct the odd appearance in Chrome, Edge, and Safari. - */ - -[type=search] { - -webkit-appearance: textfield; /* 1 */ -} - -/** - * Correct input focus rings in Safari. - */ -input { - outline-offset: 0; -} - /** * Correct the cursor style of increment and decrement buttons in Safari. */ @@ -186,25 +72,13 @@ input { -webkit-appearance: none; } -/** - * 1. Correct the inability to style upload buttons in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - * ========================================================================== */ - [hidden] { display: none !important; } :focus-visible { outline: .2em solid var(--accent); + outline-offset: 0; z-index: 2; } @@ -216,38 +90,11 @@ body:focus-visible { :target { outline: .2em solid var(--fg); + outline-offset: 0; z-index: 2; + scroll-margin: 4rem; } -/* - * Add the correct display in Safari. - */ - -details > summary:first-of-type { - display: list-item; -} - -/* Accessibility - * ========================================================================== */ - -/** - * Change the cursor on busy elements in all browsers (opinionated). - */ - -[aria-busy=true] { - cursor: progress; -} - -/* - * Change the cursor on disabled, not-editable, or otherwise - * inoperable elements in all browsers (opinionated). - */ - -[aria-disabled=true], [disabled] { - cursor: not-allowed; -} - - datalist { display: none !important; } diff --git a/src/main.css b/src/main.css index ae9227e..2b1c71f 100644 --- a/src/main.css +++ b/src/main.css @@ -435,6 +435,9 @@ img, video, audio, iframe, object, embed { table { font-variant-numeric: tabular-nums; font: inherit; + + border-collapse: collapse; + text-indent: 0; } caption { @@ -495,6 +498,7 @@ label :is(input, select):not([specificity-hack]) { display: inline-flex; align-items: center; padding-block: 0; + margin: 0; padding-inline: calc(var(--rhythm, 1rlh) / 4); vertical-align: middle; box-sizing: border-box; @@ -625,9 +629,12 @@ input::file-selector-button { We have to duplicate styles from above. **/ + -webkit-appearance: button; + display: inline-flex; align-items: center; padding-block: 0; + margin: 0; padding-inline: calc(var(--rhythm, 1rlh) / 4); vertical-align: middle; box-sizing: border-box; @@ -699,6 +706,7 @@ input[type=number], select, textarea { padding: calc(var(--rhythm, 1rlh) / 4); + margin: 0; vertical-align: top; font-size: 1rem; @@ -967,6 +975,8 @@ meter, progress { --border-width: var(--interactive-border-width); --border-style: var(--interactive-border-style); --border-radius: var(--tab-border-radius); + + vertical-align: baseline; @supports ( selector(::-moz-meter-bar) or @@ -1174,6 +1184,8 @@ details:not(specificity-hack) { } summary { + display: list-item; + margin-inline: calc(0px - var(--gap)); margin-block: calc(0px - var(--gap)) 0; padding-inline: var(--gap); From 3ad1c934150a8cf3320b6498d92e01590aa7f642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deniz=20Ak=C5=9Fim=C5=9Fek?= Date: Sat, 16 May 2026 18:32:43 +0300 Subject: [PATCH 2/2] Touch ups on new reset --- src/core/sanitize.css | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/core/sanitize.css b/src/core/sanitize.css index b136398..171338f 100644 --- a/src/core/sanitize.css +++ b/src/core/sanitize.css @@ -1,6 +1,5 @@ /* stylelint-disable plugin/browser-compat */ - *, ::before, ::after { @@ -46,28 +45,16 @@ svg:not([fill]) { fill: currentColor; } -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { block-size: auto; } -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } -/** - * Remove the inner padding in Chrome, Edge, and Safari on macOS. - */ - ::-webkit-search-decoration { -webkit-appearance: none; } @@ -94,7 +81,3 @@ body:focus-visible { z-index: 2; scroll-margin: 4rem; } - -datalist { - display: none !important; -}