What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More
Experiment with HTML‑in‑Canvas, hex maps, and e‑ink optimizations, and test new media queries and CSS features in your projects.
Implement HTML‑in‑Canvas for complex rendering, use content to replace img src, and test new media queries on e‑ink devices.
Summary
What's !important #10 covers a range of experimental web platform features, starting with the HTML‑in‑Canvas API that lets developers render semantic HTML inside a <canvas> element, demonstrated by Amit Sheen in Chrome 146. The article also highlights a hexagonal world map analytics feature built with SVG and CSS, and a web‑based OS called Rekindle that targets low‑power e‑ink devices by leveraging media queries for hover, pointer precision, and color depth. It showcases a CSS trick that replaces an <img> src using the content property, which works in all current browsers and can also use image‑set() for responsive images. The piece discusses the new sizes=auto attribute‑value combination that eliminates the need for responsive breakpoints, as well as upcoming browser releases: Firefox 150 adds :muted, revert‑rule, sizes=auto, light‑dark(), and color‑mix(); Safari TP 242 introduces closedby and advanced attr(). The article encourages developers to experiment with these APIs, test media queries on e‑ink devices, and explore the potential of HTML‑in‑Canvas for complex rendering. It also references a discussion by Wes Bos and Scott Tolinski about ten new CSS and HTML APIs. Overall, the article serves as a roundup of cutting‑edge features that can improve performance, accessibility, and design flexibility.
Key changes
- HTML‑in‑Canvas API renders semantic HTML inside a <canvas> element (Chrome 146 flag).
- Hexagonal world map analytics feature uses SVG and CSS for interactive maps.
- Rekindle OS targets e‑ink devices using media queries for hover, pointer precision, color depth, etc.
- CSS content property can replace <img> src and support image‑set() for responsive images.
- sizes=auto attribute-value combination replaces responsive breakpoints for lazy‑loaded images.
- Firefox 150 adds :muted, revert‑rule, sizes=auto, light‑dark(), color‑mix() (no Safari support).
- Safari TP 242 adds closedby and advanced attr() (no Firefox support).
- Encourages experimentation with new APIs and media queries for performance and accessibility.