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
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!
