Modern CSS Reset Stylesheet with :where() Low Specificity
It uses low-specificity :where() selectors, form control inheritance, responsive media rules, and text wrap tweaks.
box-sizing: border-box globally across all elements and pseudo-elements.line-height of 1.5 and enables font smoothing on WebKit browsers.min-block-size: 100% on both html and body for full viewport height coverage.text-wrap: balance to all heading elements and text-wrap: pretty to paragraphs.overflow-wrap: break-word to headings and paragraphs to stop long strings from overflowing their containers.img, svg, video, canvas, picture, audio, iframe, embed, object) to block-level display.textarea resize to the vertical axis and activates field-sizing: content for automatic height growth.cursor: pointer on all interactive elements including buttons, links, selects, and labeled inputs.touch-action: manipulation across all interactive elements to disable double-tap zoom on mobile.1. Load this CSS reset stylesheet at the top of a new project if you want steadier spacing, cleaner alignment, and fewer browser default surprises.
<link rel="stylesheet" href="./reset.css">
2. The reset is divided into numbered logical sections. Here is what each rule does:
Box model (Rule 1)
/*
Applies box-sizing: border-box to every element and its pseudo-elements.
Padding and borders are now included in the declared width, not added on top of it.
*/*,
*::before,
*::after {
box-sizing: border-box;
}
Margin and padding removal (Rule 2) /*
Removes default margin and padding from all elements except <dialog>.
-where() carries zero specificity, so any rule in your stylesheet wins.
*/-where(:not(dialog)) {
margin: 0;
padding: 0;
}
Smooth scrolling with motion preference (Rule 3)
/*
Enables smooth scrolling for in-page anchor links.
Wrapped in prefers-reduced-motion so it only activates for users who
have not requested reduced motion in their OS settings.
*/@media (prefers-reduced-motion: no-preference) {
-where(html) {
scroll-behavior: smooth;
}
}
Line height and font smoothing (Rule 4)
/*
Sets a readable base line-height of 1.5.
-webkit-font-smoothing: antialiased produces crisper text on macOS Chrome and Safari.
*/-where(html) {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
Full viewport height (Rule 5)
/*
Sets min-block-size: 100% on <html> and <body>.
This is the logical property equivalent of min-height: 100%
and covers both horizontal and vertical writing modes.
*/-where(html, body) {
min-block-size: 100%;
}
Text wrapping (Rule 6)
/*
text-wrap: balance distributes heading text evenly across lines,
which prevents short orphaned words on the last line.
*/-where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
/*
text-wrap: pretty applies a more conservative wrapping algorithm to
paragraph text, also reducing orphan words at the end of a block.
*/-where(p) {
text-wrap: pretty;
}
/*
figcaption inherits balanced wrapping from its parent figure element.
*/-where(figure) > :where(figcaption) {
text-wrap: balance;
}
/*
overflow-wrap: break-word forces long unbroken strings (URLs, hashes)
to wrap at any character boundary rather than overflow their container.
*/-where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
Media elements (Rule 7)
/*
Converts all media elements to display: block.
Inline media elements sit on a text baseline, which adds unexpected
whitespace below images inside containers.
*/-where(img, svg, video, canvas, picture, audio, iframe, embed, object) {
display: block;
}
/*
block-size: auto preserves aspect ratio.
max-inline-size: 100% caps the width at the parent container width.
*/-where(img, svg, video, canvas, picture) {
block-size: auto;
max-inline-size: 100%;
}
Form controls (Rule 8)
/*
Browsers apply their own font stack to <input>, <button>, <textarea>, and <select>.
font: inherit and letter-spacing: inherit pull these controls into your project's
typography system.
*/-where(input, button, textarea, select),
-where(input[type="file"])::-webkit-file-upload-button {
font: inherit;
letter-spacing: inherit;
}
Textarea resize behavior (Rule 9)
/*
resize: vertical prevents users from dragging a textarea horizontally,
which would break column-based layouts.
field-sizing: content makes the textarea grow vertically as the user types.
Note: field-sizing is experimental and not supported in all browsers yet.
*/-where(textarea) {
resize: vertical;
field-sizing: content;
}
Table layout (Rule 10)
/*
border-collapse: collapse removes the double borders that appear between
adjacent table cells when each cell has its own border.
width: fit-content stops the table from stretching to 100% of its container.
*/-where(table) {
width: fit-content;
border-collapse: collapse;
}
Preformatted text
/*
Forces <pre> to read left-to-right regardless of document direction.
max-inline-size: max-content lets long code blocks scroll horizontally
rather than wrapping and breaking indentation.
*/-where(pre) {
direction: ltr;
max-inline-size: max-content;
min-inline-size: 0;
white-space: pre;
writing-mode: lr;
}
Cursor behavior
/*
Explicitly sets cursor: pointer on all interactive elements.
This covers <a>, <area>, <button>, <select>, <summary>, and non-text inputs.
It also applies to any element with a tabindex attribute that is not negative.
*/-where(
a[href], area, button,
input:not([type="text"], [type="email"], [type="number"],
[type="password"], [type=""], [type="tel"], [type="url"]),
label[for], select, summary,
[tabindex]:not([tabindex*="-"], pre)
) {
cursor: pointer;
}
Touch action
/*
touch-action: manipulation disables double-tap-to-zoom on all interactive elements.
This removes the 300ms tap delay on mobile browsers and makes touch targets
respond immediately.
*/-where(
a[href], area, button, input, label[for],
select, summary, textarea,
[tabindex]:not([tabindex*="-"])
) {
touch-action: manipulation;
}
The post Modern CSS Reset Stylesheet with :where() Low Specificity appeared first on CSS Script.
A lightweight CSS reset stylesheet that removes and normalizes inconsistent browser default styles across the…
A lightweight CSS reset stylesheet that removes and normalizes inconsistent browser default styles across the…
bsky-comments is a Web Component that embeds Bluesky discussion threads directly on any webpage. It…
bsky-comments is a Web Component that embeds Bluesky discussion threads directly on any webpage. It…
LANSING, MI (WOWO) Public concern over the expansion of hyperscale data centers in Michigan intensified…
LANSING, MI (WOWO) School districts across Michigan are adopting new approaches to address chronic absenteeism,…
This website uses cookies.