font-family Fallbacks, Breakpoint-Free Layouts, and HTML in Canvas
Published on 23.04.2026
font-family Doesn't Fall Back the Way You Think
TLDR: When you declare font-family on a child element with only a single custom font value, the browser does not walk up the DOM to inherit your body's fallback stack. It exhausts the declaration's own options, then falls back to the browser default, which is typically Times New Roman. The fix is dead simple: always declare a full font stack on every element.
font-family Doesn't Fall Back the Way You Think
Building a UI Without Breakpoints
TLDR: A detailed Frontend Masters article proposes shifting responsive design from viewport-breakpoint orchestration to a system of intrinsic layouts, fluid values, container units, and container queries. Breakpoints don't disappear, but they stop being the primary layout engine and become a narrow tool for device capability detection and user preferences.
Building a UI Without Breakpoints
Firefox 150: Media Pseudo-Classes, animation-range, and More
TLDR: Firefox 150 ships a collection of notable CSS and API additions including media-state pseudo-classes for audio and video elements, the animation-range properties for scroll-driven animations, the revert-rule keyword, and expanded color-mix() support. Also notable: ariaNotify() as a screen reader announcement API.
Firefox 150 Release Notes for Developers
Chrome's Soft Navigations API Enters Final Origin Trial
TLDR: Chrome is preparing to ship the Soft Navigations API, with a final origin trial running from Chrome 147 to 149. The API enables accurate Core Web Vitals measurement for Single Page Applications by detecting client-side navigations that update content and URL without a real page load.
Final Soft Navigations Origin Trial in Chrome 147
Thoughts on Claude Design and the Source-of-Truth Shift
TLDR: Designer Sam Henri Gold argues that Claude Design's bet on HTML and JS as the native medium is structurally sound because Figma's decade of proprietary primitives excluded it from LLM training data, positioning code as the inevitable source of truth for design.
Thoughts and Feelings around Claude Design
Delivering a Dynamic Hexagonal World Map in 10kb
TLDR: The Calibre team built a hex cartogram world map for their RUM Audience report as a single 144kb SVG file that compresses to 10kb over the wire, using Node.js, Turf.js for geospatial simplification, d3-geo for projection, and SVG's symbol and use elements to avoid redrawing the hex shape thousands of times.
Delivering a Dynamic Hexagonal World Map in Just 10kb
The Web Is Fun Again: HTML in Canvas
TLDR: The experimental HTML-in-Canvas API, available behind a flag in Chromium 146+, lets you render real DOM elements into a canvas context and then apply 2D canvas effects, pixel manipulation, or WebGL shaders to the output while preserving full interactivity of the original HTML elements.
The Web Is Fun Again: First Experiments with HTML in Canvas
Details That Make Interfaces Feel Better
TLDR: A compact, interactive reference covering a dozen small CSS and animation details that compound into noticeably higher quality interfaces, including text-wrap: balance, concentric radius math, interruptible transitions, staggered enter animations, and tabular number sizing.
Details That Make Interfaces Feel Better
Making Your Site Visible to LLMs: What Works and What Doesn't
TLDR: Evil Martians tested and evaluated every "AI SEO" technique available, concluding that six approaches have genuine value (llms.txt, .md routes, <link> and HTTP Link headers, a hidden hint div, llms-full.txt, and HTTP content negotiation) while eight widely promoted techniques have no evidence behind them and several are actively misleading.
Making Your Site Visible to LLMs: 6 Techniques That Work, 8 That Don't
Why Some Images Look Brighter Than Your Screen
TLDR: HDR images using either the Ultra HDR JPEG extension or an HDR color profile (Rec.2100 PQ) can render selected highlights physically brighter than the SDR white ceiling on supported displays, a capability that marketers are beginning to use for logo and product images on platforms that allow custom uploads.
Why Some Images Look Brighter Than Your Screen
box-shadow Is No Alternative to outline
TLDR: Using box-shadow to style focus indicators and setting outline: none breaks focus visibility in Forced Colors mode because box-shadow computes to none in that mode. The fix is to set outline: 2px solid transparent instead, which becomes visible in Forced Colors while remaining invisible in the default color mode.
box-shadow is no alternative to outline
MJML 5.0.0 Released
TLDR: MJML 5.0.0 ships with a modernized toolchain replacing legacy html-minifier and js-beautify with htmlnano and cssnano, stricter and more secure handling of mj-include, a restructured outer HTML skeleton tied to mj-body, Node.js 20/22/24 support, and a smaller browser bundle.
LiquidGlass: WebGL Glass Refraction for HTML Elements
TLDR: LiquidGlass is a TypeScript library that applies realistic glass refraction, blur, chromatic aberration, and lighting effects to HTML elements using a multi-pass WebGL shader pipeline that captures DOM content as a texture behind each glass element and composites the result in real time.
TypeGPU: Type-Safe WebGPU Toolkit
TLDR: TypeGPU is a TypeScript-first library that wraps WebGPU's raw API with a typed schema layer, enabling IDE-level type safety and inference across both JavaScript/TypeScript and WGSL shader code, reducing the mental overhead of maintaining consistency between the CPU and GPU sides of a WebGPU application.