Yeah I like it, good point. I’d probably use px all around for this particular thing. Will update when I get a chance.

May I raise an accessibility concern with using 1 rem on the body for horizontal padding? 16px does not scale while 1rem does.

Perhaps it’d be better stated as:

body {
 padding: 1rem 16px;
}
@media (min-width: 30em) { /* 480px rather than 500px - but do use ems */
  body {padding: 2rem;}
}

Now if I increase the font size to 200% for accessibility, the left (and right) margin doesn’t take up as much horizontal real estate.
It also makes it easier to find the start of the content at severe scaling (500%+).

Good catch, will fix.

Will testing your starter, I encountered an issue. When setting “list-style: inside;” on the lists elements, you’re overriding ol {list-style-type: decimal;} from the user agent stylesheet.

Easily fixed by setting “list-style-position: inside;” instead though.

Great stuff anyway, thanks for searching !

but as someone with an ultrawide monitor, this kind of thing pains me to have everything blow up large just for moving a long screen.

Hence the clamp() there. There is a limit to how big it gets, which should hit long before the ultra in ultrawide matters. I mean fair enough if it’s still too big for you, but the idea is to NOT just use viewport units but instead keep it contained.

at least deprioritize it with :where() so folks that have overridden the default already thru userStyles

The whole thing is in a @layer so should be easily overridable by user agent styles which aren’t, yes?

the issue is the browser vendors not exposing user’s preferred tab stop in the preferences like they do for font & sizes.

Good point! Seems like that would be a useful setting. I wish all browsers had a similar approach to visual overrides.

font-size: clamp(1rem, 1rem + 0.5dvw, 2rem);

I know you said it could be “controversial”, but as someone with an ultrawide monitor, this kind of thing pains me to have everything blow up large just for moving a long screen. Where it really bugs me is long form blogs/posts where I just want the body font to be the default I set for readability in my user agent (where 1rem is all you need)—I have already bumped up the default a little bit to 18 for my eyes & don’t need more.

But speaking of readability…

tab-size: 2;

Man, as I have aged, 2-space code is nigh unreadable (which is why I support tabs for indentation so I can fix the presentation on my & while not bothering others). 8 isn’t a good practical default, but at least deprioritize it with :where() so folks that have overridden the default already thru userStyles can have our settings respected. Tho let’s be real, the issue is the browser vendors not exposing user’s preferred tab stop in the preferences like they do for font & sizes.

My browser’s are set to dark mode and use the style regularly and I’ve never experienced that at all.

not sure if I would put the default view-transition in a prefers-reduced-motion, since this not considered a harmful animation.

It kinda feels like it could be harmful to me as it affects the entire page (by default). Even thought it’s just a fade, not movement, it feels like it could be a lot for some. This is just a hunch and not backed by anything.

Makes me think about how it would be interesting if style-queries worked for more than custom properties, so like

p {
  @container not style(text-align: center) {
    max-inline-size: 88ch;
  }
}

(That’s not actually a real thing, just would be neat.)