I added a note about this a bit later in the post, but the issue was that all of the optimization services I use strip out the color profile, and I don’t know enough about webp or avif to re-add it. Other than re-saving it, which increases the size since it decompresses everything.
Yeah, sorry about that - there is specifically an issue with Firefox on Android. It’s a very small % of my traffic, and remote debugging Firefox seems a bit tricky, so I haven’t prioritized it. But I should spend some time and at least take a look!
Author here — yeah, so my goal with 200% was to make the code as comprehensible as possible. My actual glassy header does something quite similar to what you’re suggesting, but that also raises the bar quite a bit for how much CSS you need to know in order to understand this post.
I like making things like this copy/pasteable, rather than NPM-installable, so that more experienced developers can make tweaks like the one you suggest.
Your effort to make these posts consumable by the masses doesn’t go unnoticed. It’s clear you put a great deal of work into them, and the quality you achieve raises the bar in many ways for what to expect when learning about the web. If only all educational materials on MDN could reach these heights.
Honestly, I feel that `bottom: -32px` and `calc(100% - 32px)` might be easier to understand than `height: 200%` and `50%`. (Yeah, for early teaching I might step back from using `inset`.) It does require the one extra concept of calc(), but it’s exact and feels slightly more easily explicable than how 50% of 200% is back to 100%. The fact that the number 32 would be present in both makes it easier to track, whereas the fact that 200% and 50% are inverses is pretty easily overlooked.
Yeah, I was worried people would wonder about this!
It doesn't appear to have an effect in this example because all of the text is the same size (and therefore, they do all share the same baseline). In the devtools, try bumping one of the items up to font-size: 2rem, and you'll see the effect it has.
My initial version of this post didn't have “baseline” as an option, since yeah it doesn't demonstrate it well, but I figured people would wonder why a single value was excluded.
Incidentally, baseline alignment is so handy, but I couldn't fit everything into this post. We cover it in more detail in my course (https://css-for-js.dev/)
That is great, thanks. And thanks for this resource. If there is one thing I hate it is re-reading about flexbox. But playing with a widget is much more fun and tells me in 10 seconds what I need to know.
Named colors have one incredible use case: as placeholders in teaching environments. In my CSS course, I’d much rather use “color: hotpink” than “color: hsl(345deg 90% 50%)” (when color isn’t the focus of the lesson)
And yeah, the plan is to keep providing a bunch of free content, knowing that a small % of people who read the blog will go on to buy the course. Way more sustainable than it used to be, when this was something I did outside of my job.
