CSS Remedy

There is a 15-year history of CSS resets. In fact, a “reset” isn’t really the right word. Tantek Çelik’s take in 2004 was called “undohtml.css” and it wasn’t until a few years later when Eric Meyer called his version a reset, that the word became the default term. When Normalize came around, it called itself a reset alternative, which felt right, because it wasn’t trying to obliterate all styles, but instead bring the base styles that browsers provide in their User Agent Stylesheet in line with each other.

We’ve taken a romp through this history before in Reboot, Resets, and Reasoning. Every single take on this — let’s call them “base” stylesheets — has a bit of a different angle. How much does it try to preserve the UA defaults? How opinionated does it get? How far back does it consider for browser support?

Along comes CSS Remedy (they say it’s not ready for usage), with yet another different spin:

Sets CSS properties or values to what they would be if the CSSWG were creating the CSS today, from scratch, and didn’t have to worry about backwards compatibility.

Fascinating to think about.

CSS Remedy re-draws the line for what is opinionated and what isn’t. I’d say that something like * { box-sizing: border-box; } is a fairly strong opinion for a base stylesheet to have. No UA stylesheet does this, so it’s applying a blanket rule everywhere just because it’s desirable. It’s definitely desirable! It’s just opinionated.

But not having border-box be the default is considered a CSS mistake. So if CSS Remedy is what a UA stylesheet would be if we were starting from scratch, border-box isn’t opinionated; it’s the new default.

Sadly, we probably can never have a fresh UA stylesheet in browsers, because the danger of breaking sites is so high. If Firefox shipped some new modernized UA stylesheet that was tastefully done and appears to be nice, but only until you browse around the billion websites that weren’t built to handle the new CSS being applied to them, them people would blame Firefox — and not incorrectly. Gracefully handling legacy code is a massive strength of the web and something that holds us back. It’s more the former than the latter, though.

It’s been fun watching Jen think through and gather thoughts on stuff like this though:

img {
display: inline;
vertical-align: baseline; }

is a dumb default for web development.

Which would be better?

img {
display: inline;
vertical-align: bottom; }
(removes mysterious gap)

or

img {
display: block; }
(blockifies)https://t.co/UyBtRO6SAv

— Jen Simmons (@jensimmons) February 10, 2019

I agree! That little space below images has confounded an absolute ton of people. It’s easy enough to fix, but it being the fault of vertical-align is a bit silly and a great candidate for fixing in what would be a new UA stylesheet.

I tossed the in-progress version into the comparison tool:

See the Pen
HTML Kitchen-sink by Chris Coyier (@chriscoyier)
on CodePen.

Direct Link →