Builders have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics characteristic, a web-based OS for e-ink units, changing img srcs utilizing content material, and extra. That is What’s !vital #10.
HTML-in-Canvas experiments
HTML-in-Canvas, a brand new API that permits 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 likewise 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 units
Rekindle is principally a web-based working system for e-ink units 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’ve a complete bunch of media queries that’d be so helpful for e-ink units if it weren’t for the truth that they’re delivery 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, colour depth, monochromatic bit-depth, colour index dimension, dynamic vary, and extra, in all probability.
Ideas? Is e-ink optimization more likely to escape 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 method, 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 would 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 study this concerning 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 when you’re engaged on an internet site with non-responsive
Implementing responsive photographs with sizes=auto
Having mentioned that, when you do have entry to the HTML, you’ll need 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.
Should you’re , Amit Sheen additionally talked about constructing layouts (not essentially photographs) with out breakpoints.
New net platform options and updates
Should 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!
