Z’s Still Not Dead Baby, Z’s Still Not Dead

https://24ways.org/2019/zs-still-not-dead-baby-zs-still-not-dead/

by matthberg • 7 years ago

67 11 7 years ago

24ways.org

dralley• 7 years ago

Before clicking, I was pretty sure this article was going to be about IBM Z mainframes.

lookdangerous• 7 years ago

Ditto. The design in the article is a stellar look!

RickJWagner• 7 years ago

Yeah, me too.

I read a bit of the article, considered trying to educate myself on design issues, and quickly decided not to.

Hats off to the web-design types. It's not for me, but I'm glad that somebody cares deeply about this stuff and makes our web pages pretty.

Ice_cream_suit• 7 years ago

Disappointing.

I had hoped that it was about the Z notation.

sudhirj• 7 years ago

Please add a comma after "Dead". This indicates that the Baby Z is still not dead, and I'm wondering what this baby has done to deserve its fate.

Z's Still Not Dead, Baby, Z's Sill Not Dead

corvuscorvid• 7 years ago

Zed's dead, baby. Zed's dead.

vinniejames• 7 years ago

Who's motorcycle is that?

chrismorgan• 7 years ago

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.

pjmlp• 7 years ago

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.

janpot• 7 years ago

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.

skavi• 7 years ago

Wouldn't this stuff still be considered flat design? There weren't any gradients apart from the image of the car.

Z’s Still Not Dead Baby, Z’s Still Not Dead

Related Stories