By rssfeeds-admin 
A lightweight CSS reset stylesheet that removes and normalizes inconsistent browser default styles across the full stack of HTML elements.
It uses low-specificity :where() selectors, form control inheritance, responsive media rules, and text wrap tweaks.
Features
- Applies
box-sizing: border-boxglobally across all elements and pseudo-elements. - Removes default margin and padding from all non-dialog elements.
- Activates smooth scrolling only for users who have not requested reduced motion.
- Sets a base
line-heightof 1.5 and enables font smoothing on WebKit browsers. - Forces
min-block-size: 100%on bothhtmlandbodyfor full viewport height coverage. - Applies
text-wrap: balanceto all heading elements andtext-wrap: prettyto paragraphs. - Adds
overflow-wrap: break-wordto headings and paragraphs to stop long strings from overflowing their containers. - Converts all media elements (
img,svg,video,canvas,picture,audio,iframe,embed,object) to block-level display. - Caps media width at 100% and sets block size to auto for responsive behavior.
- Forces form controls to inherit font family and letter spacing from their parent.
- Locks
textarearesize to the vertical axis and activatesfield-sizing: contentfor automatic height growth. - Collapses table borders and constrains table width to fit-content.
- Sets
cursor: pointeron all interactive elements including buttons, links, selects, and labeled inputs. - Applies
touch-action: manipulationacross all interactive elements to disable double-tap zoom on mobile.
How to use it:
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.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.