What’s !essential #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and Extra

Builders have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics characteristic, a web-based OS for e-ink gadgets, changing img srcs utilizing content material, and extra. That is What’s !essential #10.

HTML-in-Canvas experiments

HTML-in-Canvas, a brand new API that allows us to render actual semantic HTML in a with visible results, is the speak of the city proper now, so let’s lead with that. Amit Sheen confirmed us how the HTML-in-Canvas API works, and in addition created some demos over on the HiC Showroom, like this one (requires Chrome 146 with the chrome://flags/#canvas-draw-element flag enabled):

Constructing a hexagonal world map-analytics characteristic

Ben Schwarz (superior identify, however no relation) talked about constructing a hexagonal world map-analytics characteristic. Whereas it’s extra of a retrospective than a developer walkthrough, it’s a actually attention-grabbing examine analytics, design constraints, inspiration, engineering, and naturally SVG and CSS.

Rekindle — a web-based OS for e-ink gadgets

Rekindle is mainly a web-based working system for e-ink gadgets like Kindle, Kobo, and Boox, which are sometimes low-powered with few options. Rekindle contains an insane variety of options and apps, and is designed in black-and-white, with no animations, and little doubt with many extra e-ink optimizations.

The takeaway isn’t a tutorial (sadly) and even some commentary (like with the world map retrospective above), it’s that we have now a complete bunch of media queries that’d be so helpful for e-ink gadgets if it weren’t for the truth that they’re transport with low-powered, proprietary net browsers that don’t acknowledge them. Media Queries Degree 5 can question hover functionality, the precision of pointers, show replace frequency, shade depth, monochromatic bit-depth, shade index measurement, dynamic vary, and extra, most likely.

Ideas? Is e-ink optimization prone to get away within the coming years, or is low demand for these media queries why a devoted service like Rekindle must exist? It’s price noting that the browsers and most of the media queries are in lively growth, so I don’t know. Watch this house, perhaps?

Both approach, I’d like to see a dev deep dive on Rekindle!

Changing img srcs utilizing content material

Jon found that CSS can be utilized to interchange picture sources, like this:

img {
  content material: url(new-image.png) / "New alt textual content";
}

TIL! Who knew you can change the “src” of an #HTML utilizing #CSS:

img { content material: url(no matter.png) }

NO PSEUDOS!

Appears to work in all present browsers too. How did I miss this?

— Jon (@scrwd.mastodon.social.ap.brid.gy) Apr 20, 2026 at 13:09

It’s actually attention-grabbing to be taught this in regards to the content material property, which has been Baseline for 11 years now. I experimented a bit extra and found that this trick additionally works with the image-set() perform:

img {
  content material: image-set(
    url("https://css-tricks.com/whats-important-10/picture.png") 1x,
    url("image-2x.png") 2x
  );
}

So if you happen to’re engaged on an internet site with non-responsive s and no strategy to change the markup, write the logic in CSS as a substitute.

Implementing responsive photographs with sizes=auto

Having mentioned that, if you happen to do have entry to the HTML, you’ll wish to serve responsive photographs utilizing the srcset and sizes HTML attributes. Mat Marquis demonstrated how the brand new sizes=auto attribute-value mixture replaces responsive breakpoints for photographs which are loaded lazily.

When you’re , Amit Sheen additionally talked about constructing layouts (not essentially photographs) with out breakpoints.

New net platform options and updates

When you’re eager for extra content material, right here’s Wes Bos and Scott Tolinski of Syntax.fm discussing 10 new CSS and HTML APIs:

Till subsequent time!