Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing img srcs using content, and more. This is What’s !important #10.
HTML-in-Canvas, a new API that enables us to render real semantic HTML in a <canvas> with visual effects, is the talk of the town right now, so let’s lead with that. Amit Sheen showed us how the HTML-in-Canvas API works, and also created some demos over at the HiC Showroom, like this one (requires Chrome 146 with the chrome://flags/#canvas-draw-element flag enabled):
Ben Schwarz (awesome name, but no relation) talked about building a hexagonal world map-analytics feature. While it’s more of a retrospective than a developer walkthrough, it’s a really interesting read about analytics, design constraints, inspiration, engineering, and of course SVG and CSS.
Rekindle is basically a web-based operating system for e-ink devices like Kindle, Kobo, and Boox, which are often low-powered with few features. Rekindle includes an insane number of features and apps, and is designed in black-and-white, with no animations, and no doubt with many more e-ink optimizations.
The takeaway isn’t a tutorial (unfortunately) or even some commentary (like with the world map retrospective above), it’s that we have a whole bunch of media queries that’d be so useful for e-ink devices if it weren’t for the fact that they’re shipping with low-powered, proprietary web browsers that don’t recognize them. Media Queries Level 5 can query hover capability, the precision of pointers, display update frequency, color depth, monochromatic bit-depth, color index size, dynamic range, and more, probably.
Thoughts? Is e-ink optimization likely to break out in the coming years, or is low demand for these media queries why a dedicated service like Rekindle needs to exist? It’s worth noting that the browsers and many of the media queries are in active development, so I don’t know. Watch this space, maybe?
Either way, I’d love to see a dev deep dive on Rekindle!
img srcs using contentJon discovered that CSS can be used to replace image sources, like this:
<img src="image.png" alt="Alt text">img {
content: url(new-image.png) / "New alt text";
}TIL! Who knew you could change the "src" of an #HTML <img> using #CSS: img { content: url(whatever.png) } NO PSEUDOS! Seems to work in all current browsers too. How did I miss this?
— Jon (@scrwd.mastodon.social.ap.brid.gy) Apr 20, 2026 at 13:09
It’s really interesting to learn this about the content property, which has been Baseline for 11 years now. I experimented a bit more and discovered that this trick also works with the image-set() function:
img {
content: image-set(
url("image.png") 1x,
url("image-2x.png") 2x
);
}So if you’re working on a website with non-responsive <img>s and no way to change the markup, write the logic in CSS instead.
sizes=autoHaving said that, if you do have access to the HTML, you’ll want to serve responsive images using the srcset and sizes HTML attributes. Mat Marquis demonstrated how the new sizes=auto attribute-value combination replaces responsive breakpoints for images that are loaded lazily.
If you’re interested, Amit Sheen also talked about building layouts (not necessarily images) without breakpoints.
:muted and all other media-based pseudo-classes (no Chrome support)revert-rule (no Safari support)sizes=auto (no Safari support)light-dark() with image support (no Chrome/Safari support)color-mix() with the syntax for two or more colors (no Chrome/Safari support)ariaNotify() (no Chrome/Safari support)If you’re keen for more content, here’s Wes Bos and Scott Tolinski of Syntax.fm discussing 10 new CSS and HTML APIs:
Until next time!
What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
With a high of F and a low of 31F. Currently, it's 45F and Clear outside. Current wind speeds: 6 from the Northeast Pollen: 0 Su...
