Directional CSS with scroll-state(scrolled). @una.im shows how the new scroll-state() container query landing in Chrome 144 will let CSS respond to scroll direction for dynamic UI effects, all without JS. #css #scroll una.im/scroll-state...

Introducing CSS Grid Lanes. The WebKit team announced the next major step in web layouts: long-awaited native masonry-style layouts are now available in Safari TP 234. It uses the new item-tolerance CSS property and leverages full CSS grid power. #css #layout webkit.org/blog/17660/i...

IDREFs: what they are and how to use them. @kilianvalkhof.com explains how attributes for, form, list, and ARIA IDREFs work for better structure and accessibility and the importance of unique, existing IDs and cross-browser testing. #html #a11y htmhell.dev/adventcalend...

Smooth view transitions for dialogs. Thomas Günther shows how to combine <dialog> and View Transition API for smooth, accessible animations using startViewTransition(), showModal(), and close(). Works in all major browsers, apart from closedby missing from Safari. medienbaecker.com/articles/dia...

Results of the State of HTML 2025, led by @sachagreif.com and designed by @lea.verou.me, show developers still value dropdowns, dialogs, and forms over AI or 3D. Customization and styling lead as key challenges. #html #survey 2025.stateofhtml.com

Speeding up CSS with compression dictionaries. @yoav.ws shows how combining critical and full CSS via compression dictionaries cuts bandwidth and accelerates page transitions. Works now in Chromium. #performance #css calendar.perfplanet.com/2025/how-to-...

WebKit Features for Safari 26.2. Sixty two features and 165 fixes. Highlights: CSS field-sizing, HTML command attributes, Navigation API, CHIPS for partitioned cookies, and text shaping updates. #safari #webkit webkit.org/blog/17640/w...

How HTML changes in ePub. Robin Whittleton shows how ePub reshapes HTML into XHTML with XML rules and limited CSS. The Standard Ebooks toolset is a good place to start if you want to build your own ebook. #html #epub htmhell.dev/adventcalend...

A pragmatic guide to modern CSS colors, part two. Kevin Powell explains how new CSS color tools like oklch() and color-mix() help developers create perceptually consistent, flexible color systems directly in the browser. #css #color piccalil.li/blog/a-pragm...

Firefox 146 release notes for developers: CSS contrast-color(), @​scope, and text-decoration-inset, updates to MathML and SubtleCrypto, and experimental support for @​custom-media and Navigation API. #firefox #browser developer.mozilla.org/en-US/docs/M...

Chrome’s CSS wrapped 2025. Showcase with 17 new CSS and UI features, from customizable select and invoker commands to scroll-state queries and shape(). Presented by the Chrome DevRel team to empower a more declarative and accessible web. #css #chrome chrome.dev/css-wrapped-...

APCA + WCAG 2 contrast checker. @ox.ca’s tool to test colors for both WCAG 2.x and APCA compliance with modern CSS support. #a11y #color mgifford.github.io/contrast-plus/

Jared White advocates for using JavaScript with JSDoc and TypeScript’s tsc for typing instead of full TypeScript. The combo provides type safety, clarity, and simplicity. He calls it the best of both worlds. #javascript #jsdoc thathtml.blog/2025/12/nuan...

What’s new in Chrome 143. CSS and API updates, WebTransport improvements, and new Web Smart Card API. Unicode 16, FedCM upgrades, and digital credentials trials arrive. XSLT is deprecated due to security risks and low usage. #chrome #webdev developer.chrome.com/release-note...

Non-square image blur extensions in CSS. @anatudor.bsky.social shares a pattern for wrapping images in a square, padding gaps with a blurred copy, and optionally fading edges into the background for more flexible layouts. #css #webdev frontendmasters.com/blog/non-squ...

Top layer troubles: popover vs dialog. Stephanie Eckles opens this year’s HTMHell Advent Calendar with a peculiar case: a toast popovers over a modal dialog can be visible but inert. Solution? Moving them into the dialog DOM and use popover="manual". #a11y #css htmhell.dev/adventcalend...

Using CSS to fix the irradiation illusion. Adam Argyle uses variable fonts and the GRAD axis to keep text weight consistent in dark mode, fix bold link hovers, and respect prefers-contrast without layout shift. #css #typography nerdy.dev/adjust-perce...

Build your own SPA router with URLPattern. Jim Schofield uses the URLPattern and History APIs to match routes, intercept links, and respond to popstate with vanilla JS. #javascript #routing jschof.dev/posts/2025/1...

Dialog and popover: layered UI patterns. David Herron shows how built-in <dialog> and popover handle focus, backdrops, and top layer stacking so you can drop most custom modal JS and UX hacks. #html #baseline web.dev/articles/bas...

Brand new layouts with CSS subgrid. Josh Comeau shows how subgrid lets nested cards, portfolios, and pricing tables share tracks so images and text stay aligned, plus gotchas like reserved rows and line numbers, and fallbacks for older browsers. #css #layout www.joshwcomeau.com/css/subgrid/

Performance monitoring for web components. Cassondra Roberts shows how the User Timing API tracks lifecycle milestones and reveals metrics important to user experience. #performance #webcomponents allons-y.llc/posts/2025-1...

HTML popover attribute in practice. Manuel Matuzović shows how to connect buttons to popovers, use auto, manual, and hint modes, position them via implicit anchors, and control them with JavaScript. #html #a11y youtu.be/KX8YQW7stzs

Testing HTML Light DOM web components is easier than expected. Gerardo Rodriguez shows how Vitest, Lit, and Testing Library make Light DOM components easy to query, test events and forms, and verify accessibility. #js #webcomponents #testing cloudfour.com/thinks/testi...

Perfecting Baseline for everyday use. Patrick Brosset shows how Baseline’s newly/widely available labels are becoming a better starting point, with work on accessibility signals, browser mappings, and guidance around polyfills and progressive enhancement. #baseline piccalil.li/blog/perfect...

Building a multi-stage timetable with modern CSS. Nils Binder explains how grid, subgrid, round() and mod() map times to rows, align stages, and add sticky hour markers with scroll-driven animations for headlines. A full CSS approach to complex schedules. #css #layout 9elements.com/blog/buildin...

The inner workings of JavaScript source maps. Manoj Vivek explains how VLQ-encoded mappings let DevTools trace minified JS back to original sources with minimal overhead, covering build stages and decoding examples. #js #devtools www.polarsignals.com/blog/posts/2...

A complete guide to the <input type="number">. Ollie Williams covers spinner removal, step/min/max attributes logic, decimal/localization quirks, and best-use cases. #html #a11y olliewilliams.xyz/blog/guide-t...

Nineteen CascadiaJS 2025 talks cover GPT in vanilla JS, collaborative editing, big data, frameworks, AI apps, React state, CSS, client‑side agents, GPT‑5, React/Next.js updates, web monetization, new UI models, and more. #js #video www.youtube.com/playlist?lis...

Simple one-time passcode inputs. Tyler Sticka shows how a complete OTP form can be made with plain HTML: accessible, autofill-ready, and easily enhanced with CSS or JS. #html #a11y cloudfour.com/thinks/simpl...

Firefox 145 release notes for developers. Adds text-autospace, math font, Atomics.waitAsync(), Integrity-Policy, Matroska, and experimental Anchor Positioning and Trusted Types. #browser #firefox developer.mozilla.org/en-US/docs/M...

HTML’s best kept secret: <output>. Den Odell reminds developers that it natively announces dynamic updates via role="status", links inputs through for="", and works beyond forms with full browser support. #html #a11y denodell.com/blog/html-be...

<color‑input>, a wide‑gamut color picker web component by Adam Argyle. It supports sRGB, Display P3 and Rec2020 with auto detection, converts between sRGB, HSL, LAB, LCH and OKLCH, uses Color.js, Preact Signals, CSS parts, and works with browsers supporting the Popover API. color-input.netlify.app

Searchable, collapsible sections with hidden=until-found. Nathan Knowler shows how to make collapsible content searchable using this new HTML attribute and the beforematch event. #html #a11y knowler.dev/blog/searcha...

Directives and the platform boundary. Tanner Linsley cautions that custom directives like use client and use server blur the line between framework and platform, urging developers to prefer explicit APIs and real standards. #js tanstack.com/blog/directi...

Harmonizer, an accessible color palette generator by Evil Martians. A Figma plugin and web app that use OKLCH with WCAG or APCA formulas to keep colors perceptually consistent across hues and themes. #design #a11y harmonizer.evilmartians.com

WebKit Features for Safari 26.1. Safari adds SVG support for rem, viewport, typography-relative, and container query units, improves Anchor Positioning, and fixes dozens of bugs across CSS and rendering. #browser #safari webkit.org/blog/17541/w...

setHTML(), Trusted Types and the Sanitizer API. Ollie Williams shows how these APIs protect against XSS by sanitizing HTML safely and enforcing trusted types. Supported in Firefox Nightly and Chrome Canary, with wider adoption coming. #security #html olliewilliams.xyz/blog/sanitiz...

Perfectly pointed tooltips. Temani Afif explains how to build responsive tooltips with the CSS Anchor Positioning. Tooltips flip, stay visible, and keep their tails, all in pure CSS. Now supported in Chrome, Edge, and Safari. #css frontendmasters.com/blog/perfect...

Chrome 142 adds range syntax for CSS style queries, interestfor attribute for buttons and links, unified <select> rendering, SVG download support, WebGPU and FedCM improvements, permissions for local network access, and more. #browser #chrome developer.chrome.com/release-note...

Evaluating framework performance. Loren Stewart compared 10 meta-frameworks: Marko, SolidStart, SvelteKit, Qwik, and Nuxt hit 35–39 ms FCP with bundles from 28.8 to 176 kB. React has an architectural ceiling: even TanStack Start + React is 2× heavier than Solid. www.lorenstew.art/blog/10-kanb...

Deprecating XSLT in browsers. Chrome plans to remove XSLT (the XML transformation language) due to low usage and security risks. Deprecation starts in version 143, full removal in 155. WHATWG, Firefox, and Safari expressed support. #browser #chrome groups.google.com/a/chromium.o...