Notices by Lea Verou (leaverou@front-end.social)

A web tale in three acts:

Yesterday, I spent most of my workday investigating this Safari bug and figuring out ways to work around it.

Folks, I nearly lost my mind. 😵💫

But, I did my duty and reported it, then pinged some folks that I knew had worked on WebKit’s css-color-4 implementation
https://bugs.webkit.org/show_bug.cgi?id=287637

Sam Weining submitted a patch that same day.

Today, his PR was merged, and the bug is now officially fixed! 🎉

👏🏼 REPORT 👏🏼 BROWSER 👏🏼 BUGS 👏🏼

🎉 OMG OMG OMG Chrome is shipping CSS attr() for every property!!! 🎉
I’ve been asking for this for over a decade!! w00t!!! 🤩

https://developer.chrome.com/blog/advanced-attr

Every time someone says LLMs are useless because they are so often wrong, I can’t help but wonder if they also consider talking to humans useless for the same reason.

“React proponents might claim that React will teach you modern UI, but from what I've seen it barely copes with modern UI.”

💯

Great read by @keithamus

https://indieweb.social/@keithamus/113518012130847468

Ah, the things we do when styling HTML we don’t control… 🫠

One of life’s big mysteries: Do sessions in visa application and banking websites time out so fast because of some misguided notion of security, or because they were made by sadistic bastards who enjoy human suffering? 🤔

I guess we’ll never know…

Whenever I feel bad about yak shaving, I’m reminded of Donald Knuth.

Apparently, he was writing his masterwork “The Art of Computer Programming” and decided to take a few weeks to write a better typesetter.

Thus, TeX was born.

10 years later he returned to continue the writing of the actual book…

Less than a week ago, I predicted that @Firefox would implement Relative Colors (RCS) *very* soon.

I didn’t expect my prediction to come true that quickly: Firefox 128 (Nightly) shipped with RCS support! 🎉
Pretty solid implementation too.

This means that Relative Colors will be Baseline 2024! 🎉

Testcase: https://dabblet.com/gist/58ec6a5493b95097a0c6a17b0cc9a840

Now if someone could update caniuse…

https://front-end.social/@leaverou/112451790361014358

We’ve always told devs that browsers prioritize what to implement based on dev demand.

There is one exception: #SVG.

SVG is used on >65% of websites. Yet, browsers have been *refusing* to work on SVG, ignoring pressure and pain points from web devs.

#StateOfHTML showed SVG as the top content pain point: https://2023.stateofhtml.com/en-US/features/content/#content_pain_points

Tons of work (SVG 2, fill & stroke, and more) has sat unimplemented for years. At this point, in standards circles, we know not to touch SVG with a barge pole.

[1/2]

[2/2]

Pasting a URL *to edit an existing MD link* would create an (invalid) nested link. There was no escape, beyond “Paste As…”. UX deteriorated; the convenience became a hindrance.

3. The feature now requires manual opt-in. Pasting URLs on a selection replaces the text (rarely matching user intent) unless MD paste is explicitly triggered via “Paste As…”, a flow more tedious than writing the 4 extra chars manually.

GIF from @github’s comment UI, which implements this pattern *really* well.

The evolution of most products / product features:
1. Value creation
2. Enshittification
3. Death

Case in point: VS Code’s automatic Markdown links when pasting URLs on selected text.

1. Originally, the feature added value as it facilitated a common pattern by heuristically detecting user intent with a very high success rate.

2. The success rate of the heuristic plummeted as it expanded beyond initial cases.

[1/2]

Realization: CSS Nesting also allows you to basically do "else" clauses in selectors.

complex-selector {
if-styles;

:not(&) {
else-styles
}
}

(if you’re wondering what this code is for, it’s for a bookmarklet to show element boxes for educational reasons)

My first attempt dabbling with CSS subgrid (did you know it’s now supported across the board?? 🤯):

Using arbitrary elements as list markers, with a checklist example where the markers are checkboxes! (+ :has() for different styling when elements are done)

https://codepen.io/leaverou/pen/LYaWNGg

Thanks @fantasai for helping me fix my original attempt, when I still had an inaccurate mental model of how subgrid works.

I hate to say “I told you so”, but @svgeesus and I did warn browser vendors that shipping wide gamut support without gamut mapping would render these color spaces almost unusable.

They thought we were exaggerating.
They thought getting out of gamut is an edge case.
They thought clipping was “good enough”.

Well… this is one of these times that I’m really not happy to have been right. 😕
https://github.com/w3c/csswg-drafts/issues/9449

Worse yet, the CSS impls are many folks’ first contact with these color models 😞