maybe a bit unrelated, but Why would you use a selector like
[src*="figure"] {
? It's as if you're trying to set up a time bomb to blow up in a few months. "hey, can you change that image from /figure.png to /image.png", boom, half your styling broken. I'd use a class instead, not only would it be more readable and intuitive and performant, it would also be less likely to break when doing unrelated changes.
While a very enjoyable article, also a good example how much one has to go for recreating in the browser what native graphics engines have provided since the last couple of decades.
> Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years.
I (subjectively) don’t think this is quite a fair thing to claim: some still don’t, and those that do can be very buggy, sometimes unusably so.
For starters, IE and Edge don’t support it. The article, incidentally, notes this for Edge, then suggesting using `@supports not (background-blend-mode: normal)`. I would suggest considering (whether you decide to do it or not) using progressive enhancement rather than graceful degradation, putting any necessary fallback in place by default, and adding the blending functionality in `@supports (background-blend-mode: normal)` instead: this will make it work for IE, which doesn’t support @supports. Plenty of people still use IE, and it’s generally desirable to structure things to support it where there is no particular cost to doing so. (I’m not suggesting pandering to IE; for my own stuff now, I make sure the content will still be accessible, but care naught about the accuracy of its formatting.)
Next, blending is one of the buggier areas of browsers, an area where it’s common to encounter serious bugs (because GPUs are awful, mostly). For instance, for my website redesign a few months ago (https://chrismorgan.info/blog/2019-website/) I designed it in Firefox using blending on my left sidebar and experienced no trouble; but when I checked it in Chrome, I was forced to gave up after a while because I kept running into severe bugs there. I think there were three major bugs that I came across; one I don’t recall, but the other two I do:
• https://bugs.chromium.org/p/chromium/issues/detail?id=711955: two and a half years ago, mix-blend-mode on the body regressed, breaking the very first example in the relevant spec. Quite a few people have complained, and the bug has clear and simple reproduction steps; but no action has been taken.
• https://bugs.chromium.org/p/chromium/issues/detail?id=992398: if you try to blend a large element (like some of my blog posts, when trying to blend essentially the entire page), it stops rendering after 8,192px (or probably 16,384 device pixels, but I haven’t confirmed that), so that half the page is just missing! I failed to devise a workaround. (Others have then claimed performance problems on such large surfaces, and I think it was measurably harming memory usage too, but I didn’t measure it particularly carefully at the time.)
So I ended up with a genuinely crippling bug in rendering so that I couldn’t use it the way I wanted to in at least Chrome on Windows, and a total lack of confidence in browser blending.
