Not just a reset. A browser upgrade.
Most CSS reset sheets were written years ago and have not changed much since. They handle the basics: box-sizing, margins, font inheritance. But CSS has moved fast, and a new generation of properties is now widely supported enough to use in production.
Here are five modern CSS features that belong in your base stylesheet in 2026, and that most reset sheets are still ignoring.
1. text-wrap: balance
Unbalanced headings are one of the most common typographic issues on the web. A title breaks onto two lines, with one long line and one word hanging alone underneath. It looks unfinished, and it is entirely avoidable.
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
text-wrap: balance tells the browser to distribute text as evenly as possible across lines. No JavaScript, no manual <br>, no magic numbers. One line of CSS, applied globally to all headings.
Browser support: Chrome 114+, Firefox 121+, Safari 17.5+.
2. field-sizing: content
Textareas have always been a pain point. By default, they are a fixed size and do not grow as the user types. The traditional solution involves a JavaScript resize observer or a hidden mirror element.
textarea {
field-sizing: content;
}
field-sizing: content makes the textarea grow automatically as content is added, with no script required. It also works on <input> elements, making them expand to fit their content.
As a fallback for unsupported browsers (currently Firefox and Safari), keep resize: vertical so the user can resize manually.
Browser support: Chrome 123+, Edge 123+. Firefox and Safari support is in progress.
3. scrollbar-gutter: stable
Layout shifts caused by the scrollbar are a classic problem. When a page transitions from short to tall content, the scrollbar appears and pushes the layout by 15 to 17 pixels. The content jumps. It looks broken.
html {
scrollbar-gutter: stable;
}
scrollbar-gutter: stable reserves space for the scrollbar permanently, even when it is not visible. The layout never shifts. No padding hacks, no JavaScript measurement, no overflow-y: scroll side effects.
Browser support: Chrome 94+, Firefox 97+, Safari 15.4+.
4. @starting-style
Entry animations on the web have always required JavaScript: adding a class after the element is inserted into the DOM, waiting a frame, triggering a transition. It is boilerplate everyone has written a dozen times.
dialog {
transition: opacity 0.3s ease;
opacity: 1;
@starting-style {
opacity: 0;
}
}
@starting-style defines the initial state of an element before its first render. The browser transitions from that state to the normal state automatically. No JavaScript, no class toggling, no requestAnimationFrame.
It works particularly well with the native <dialog> element, which now has broad support and is the right way to handle modals in 2026.
Browser support: Chrome 117+, Firefox 129+, Safari 17.5+.
5. color-scheme: light dark
Dark mode support is often treated as a feature to build later, with CSS variables, a toggle button, and a localStorage preference. That works, but there is a simpler approach for the base layer.
:root {
color-scheme: light dark;
}
This single declaration tells the browser to adapt its native elements (scrollbars, form controls, dialogs, the page background) to the user's system preference automatically. No media query, no variable swap, no JavaScript.
For a complete dark mode implementation with CSS variables, you still need prefers-color-scheme. But color-scheme alone already handles everything the browser controls natively.
@media (prefers-color-scheme: dark) {
:root {
--bux-color-background: #1a1a1a;
--bux-color-text: #e8e8e8;
}
}
Browser support: Chrome 81+, Firefox 96+, Safari 13+.
All Five, Already in Your Base Stylesheet
These five properties are included in browserux.css, a minimal CSS foundation built around modern UX and accessibility. Drop it in before your own styles and you get all of this, plus consistent cross-browser normalization, keyboard focus management, form validation UX, and full system preference support. See it in action on the interactive demo.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Effeilo/browserux.css/browserux.css">
Top comments (0)