HTML boilerplate

Note

Matthias Zöchling wrote on

In reply to: @matuzo@front-end.social.

Please do. Looking forward to the cutting the mustard part.

@gray17@mastodon.social wrote on

In reply to: @matuzo@front-end.social.

I omit the <head> and <body> tags (reduces unnecessary indentation)

og:title is redundant with <title>, it seems silly to do both.
og:description seems to me the only useful og: tag.
well, og:image and og:image:alt are useful too if there’s a meaningful image. (I strongly resist the idea of meaningless hero images.)

add <meta name="color-scheme">
maybe also <meta name="text-scale">

@myfonj@typo.social wrote on

In reply to: @gray17@mastodon.social.

This 👆️. Although, personally, for "light dark" I’ve settled on using inline style on HTML, (like <html lang="…" style="color-scheme: light dark;">) rather than meta tag inside the head, since it seems more straightforward and can be leveraged later in a user toggle: html[style*="color-scheme: dark;"].

Matthias Zöchling wrote on

In reply to: @myfonj@typo.social.

Thanks to :has() you can have your cake and eat it. 🙂

@myfonj@typo.social wrote on

In reply to: @CSSence@mas.to.

Sure, just that html[style*="…"] feels a little bit more straightforward and possibly much more performant than html:has(>head>meta[…]). Either way, this hatch is basically just a very sad workaround for something we should not be forced to deal with to begin with: simply setting the palette through light-dark() function and setting color-scheme on element(s) should be all we need; no “prefers”, no classes, no attributes, nothing. It’s just the non-colour and non-images stuff, such as font weight, that we have to anchor this way, till CSS functions arrive…

Get involved

Have your say on Mastodon, or simply share this thread.