Web Standards

Field guide to the Chrome DevTools Performance panel

2026-08-20T12:00:00+02:00

Joan León uses interactive figures to walk through the colors of scripting, rendering, painting, loading, and idle work, the anatomy of a network request bar, and the two axes of the flame chart with self time versus total time. It also covers the four LCP phases, layout shifts, INP, compositing, and tables of common function and request signatures.

perf.reviews/profile-guide

You can also follow us on Mastodon, Bluesky, X

The case for tri-state dark mode toggles

2026-08-19T12:00:00+02:00

Bramus Van Damme replies to Lea Verou with the case a two-state control can’t cover: an OS that switches themes by time of day. Pick light during the day, and a toggle that maps one of its values back to system goes dark at night, against an explicit choice. Two states work only if the automatic value is labelled, or if real values are stored, and that needs a reset option, which is tri-state again. His own poll ran 43 to 7 for three states. Declan Chidlow’s pair of buttons, with neither highlighted while the OS is in charge, hides all three behind two.

bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles

You can also follow us on Mastodon, Bluesky, X

Firefox 154 release notes for developers

2026-08-18T12:00:00+02:00

This release adds the sibling-count() and sibling-index() CSS functions, the text-box-trim, text-box-edge, and text-box properties for trimming space above and below text, and the Iterator methods includes(), join(), chunks(), and windows(). WebRTC gains getSelectedCandidatePair(). Behind flags: unprefixed line-clamp, percentages for text-decoration-inset, the progress() function, and CSS Typed OM.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154

You can also follow us on Mastodon, Bluesky, X

Ask a nerd: can emails include dark and light mode themes?

2026-08-17T12:00:00+02:00

Matthew Guay explains that @media (prefers-color-scheme) works in roughly 42% of email clients, including Apple Mail, Outlook, and Fastmail, which covers most opens since Apple Mail alone handles 65% of them. Gmail, Outlook on Windows, Yahoo Mail, and Thunderbird ignore it, and Gmail on mobile inverts colors on its own. Avoid pure black and pure white to keep clients from inverting, and test in real apps.

buttondown.com/blog/dark-mode-emails

You can also follow us on Mastodon, Bluesky, X

Progressive Web Apps – mostly – rock

2026-08-14T12:00:00+02:00

Martin Grubinger lists what works and what still doesn’t: URLs and the back button behave the way the web intended, there are no 100MB downloads, and an update reaches users in one page reload instead of days of app review. The pain points are iOS install flows, Chromium install prompts driven by shifting heuristics, in-app browsers for outbound links, and missing capabilities like reading the Wi-Fi network name.

grooovinger.com/notes/progressive-web-apps-mostly-rock

You can also follow us on Mastodon, Bluesky, X

Five best practices for preventing chaos in Tailwind CSS

2026-08-13T12:00:00+02:00

Nina Torgunakova argues utility-first styling scales only on top of a design system and component architecture. Cut class noise with shorthands like py-4, define semantic tokens once in @theme or tailwind.config.js, and automate ordering with the official Prettier plugin. Expose fixed component variants instead of arbitrary classes through props. Tailwind 4 minifies automatically, 3 needs --minify.

evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css

You can also follow us on Mastodon, Bluesky, X

How Baseline can help you ship less JavaScript

2026-08-12T12:00:00+02:00

Jad Joubran walks through five dependency clusters where platform features replace npm packages: Intl formatters instead of timeago.js and numeral, fetch with AbortSignal.timeout() instead of axios, <dialog> and Popover instead of modal and tooltip libraries, structuredClone and Object.groupBy instead of Lodash. Temporal is the exception: its 44KB polyfill still cancels out the savings.

smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript

You can also follow us on Mastodon, Bluesky, X

Source maps or not?

2026-08-11T12:00:00+02:00

James Garbutt and Alex Lichter explain when npm packages should ship source maps, and when they just bloat installs. Publishing them grew the change-case package from 7.2KB to 22.7KB, while dropping them cut magic-string from 241KB to 155KB. Source maps only pay off when the published code is lossy: minified output or compiled syntaxes like Vue SFCs. Ship readable, unminified library code, or host sources remotely with sourceRoot.

e18e.dev/blog/source-maps-or-not.html

You can also follow us on Mastodon, Bluesky, X

State of CSS 2026 survey results

2026-08-10T12:00:00+02:00

Sacha Greif and Devographics polled 4,902 developers, and anchor positioning came out as the year’s favorite new feature, topping both the wish list and the browser support complaints. View Transitions and if() hit the same wall. CSS also resists AI, with only 28% of code generated on average, well below other stacks. Positioning, :has(), and @container size queries lead the pain points.

2026.stateofcss.com/en-US

You can also follow us on Mastodon, Bluesky, X

Dark mode toggles: two states are enough

2026-08-07T12:00:00+02:00

Lea Verou argues the common three-state light, dark, and system control is implementation-driven design, since people switch themes only when the current one feels wrong, not to plan ahead. Keep three states under the hood, show two, and label the toggle with the theme it will switch to. Clearing the stored override should happen only through user interaction. Tri-state still fits a separate settings panel.

lea.verou.me/blog/2026/dark-mode-toggles

You can also follow us on Mastodon, Bluesky, X

Styling the navigation: declarative route and navigation matching in CSS

2026-08-06T12:00:00+02:00

Bramus Van Damme walks through a CSS Route and Navigation Matching proposal that lets you style navigation declaratively instead of wiring it up in JavaScript. It adds a @route rule to name routes with URL patterns, a @navigation rule to react to a navigation’s from and to, a :nav-source pseudo-class for the triggering element, and a :link-to() selector to style links by destination.

bram.us/2026/07/30/styling-the-navigation-declarative-route-and-navigation-matching-in-css

You can also follow us on Mastodon, Bluesky, X

3D CSS guide: perspective, preserve-3d and translateZ

2026-08-05T12:00:00+02:00

Carmen Ansio walks through building real 3D scenes in CSS, framing it as the leap from Super Mario Bros 3’s painted depth to Super Mario 64’s true camera. The tour covers perspective and perspective-origin to place a camera, preserve-3d to keep real depth, reusable cuboids, animated camera moves, and translateZ, rotateX/Y/Z, scale3d, and matrix3d. All six properties are Baseline.

carmenansio.com/articles/3d-css-guide

You can also follow us on Mastodon, Bluesky, X

Liquid Glass 2.0 in CSS (Aqua’s revenge)

2026-08-04T12:00:00+02:00

Jared White recreates Apple’s refined Liquid Aqua look in pure CSS, adding dark contrasting borders on the horizontal axis and vertical gradient that echoes the old macOS Aqua. He walks through tuning colors, transparency, and gradient stops, using @property for CSS variables, handling repeated :active states, and wiring ontouchstart for touchscreens, all while warning not to trade readability for shine.

thathtml.blog/2026/07/liquid-glass-in-css-liquid-aqua

You can also follow us on Mastodon, Bluesky, X

CSS infinity use cases

2026-08-03T12:00:00+02:00

Adam Argyle explores what calc(infinity * 1px) and -infinity can do beyond a hack for pill shapes. Use them for perfect circles, maxing out z-index at the integer limit, freezing animations with infinite durations to inspect view transitions in DevTools, removing floor and ceiling limits in clamp(), building boolean logic, and controlling scroll-driven animation ranges. Elegant, and plain fun to use.

nerdy.dev/css-infinity-use-cases

You can also follow us on Mastodon, Bluesky, X

Cheatsheets for flex, grid, anchor positioning and invoker commands

2026-07-31T12:00:00+02:00

Kilian Valkhof shares four CSS references he made after repeatedly forgetting anchor positioning and grid-area syntax. Each is a desk-side lookup for the properties and values of its topic. They are free to download as PDF and PNG in print-ready A5.

polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands

You can also follow us on Mastodon, Bluesky, X

The secure way to release an npm package in 2026

2026-07-30T12:00:00+02:00

Andrey Sitnik breaks down how supply chain attacks now run semi-automatically, compromising hundreds of packages a day, and frames security as raising the cost for attackers rather than chasing perfection. The quick wins, most doable in under a day, include npm Trusted and Staged Publishing, org-wide 2FA, admin-only tags, CI actions pinned to SHA, and a 3-day dependency cooldown.

evilmartians.com/chronicles/the-secure-way-to-release-an-npm-package

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 151

2026-07-29T12:00:00+02:00

The new <usermedia> element manages camera and microphone access, handling prompts and MediaStream delivery without a separate getUserMedia() call. The shadowrootslotassignment attribute on <template> enables manual slot assignment in HTML. Two new performance entries, soft-navigation and interaction-contentful-paint, measure interaction-driven timing in single-page apps.

developer.chrome.com/release-notes/151

You can also follow us on Mastodon, Bluesky, X

WebKit features for Safari 26.6

2026-07-28T12:00:00+02:00

Jen Simmons covers a small but focused update: a new compileOptions parameter lets you use JS String Builtins with WebAssembly.compileStreaming() and instantiateStreaming() without falling back to non-streaming compilation. Plus eight bug fixes across CSS, networking, service workers, web extensions, and WebRTC.

webkit.org/blog/18178/webkit-features-for-safari-26-6

You can also follow us on Mastodon, Bluesky, X

Cross-Origin Storage API: stop downloading twice

2026-07-27T12:00:00+02:00

Dennis Morello explains a proposed browser standard that stores and retrieves large files by their SHA-256 hash instead of URLs, creating a shared cache across origins. A single requestFileHandle() method returns the file if present or downloads and stores it. Privacy is built in: no file enumeration, ambiguous not-found responses, and a public hash list for globally shared files.

morello.dev/blog/cross-origin-storage-api

You can also follow us on Mastodon, Bluesky, X

Building an accessible modal dialog on the native

2026-07-24T12:00:00+02:00

Agustin Barrientos leans on showModal() to get focus trapping, Escape to close, and focus restoration for free, then wraps it in a reusable Lit component with typed events. He sets deliberate initial focus, adds light-dismiss with the closedby attribute, animates with the :open pseudo-class and @starting-style, and respects prefers-reduced-motion.

agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog

You can also follow us on Mastodon, Bluesky, X

Rebuilding FIFA standings layout with CSS subgrid

2026-07-23T12:00:00+02:00

Ahmad Shadeed reconstructs the World Cup bracket with a cleaner DOM, dropping the site’s wrapper hacks. CSS Grid defines the columns and rows, subgrid lets nested matches inherit the parent tracks, and negative grid lines like grid-column: -2 keep positioning flexible. Flexbox centers each match vertically, and container queries adapt the layout as space changes.

ishadeed.com/article/fifa-layout

You can also follow us on Mastodon, Bluesky, X

Firefox 153 release notes for developers

2026-07-22T12:00:00+02:00

This release adds Intl.Locale info methods like getCalendars(), getWeekInfo(), and getTextInfo(), the Error.stackTraceLimit property, import source for loading unevaluated modules, getAllRecords() for IndexedDB object stores and indexes, desktop Picture-in-Picture API support, WebAssembly JS Promise Integration via WebAssembly.Suspending, and the experimental link-parameters CSS property for passing parameters to SVG.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/153

You can also follow us on Mastodon, Bluesky, X

SVG filters on type

2026-07-21T12:00:00+02:00

Carmen Ansio shows how SVG filter primitives recreate historical printing effects on web typography: feMorphology draws true outer strokes, stacked feOffset layers extrude letters into 3D, feSpecularLighting mimics light on raised type, and feDisplacementMap with feTurbulence distorts text organically. She builds gilded initials, chromatic splits, neon glow, and gooey letter merging, with notes on sRGB blending and performance.

carmenansio.com/articles/svg-filters-on-type

You can also follow us on Mastodon, Bluesky, X

Playing with text-fit

2026-07-20T12:00:00+02:00

Krijn Hoetmer explores the new text-fit CSS property, filling the gap while docs are still sparse. It scales text automatically: grow enlarges from the base size, shrink reduces it to fit the container. Modes let you scale consistently, per line, or per line including the last, with optional percentages setting min and max limits. It only affects rendering, so the computed font-size stays put. For now, it’s only in Chrome 150.

krijnhoetmer.nl/log/2026/07/playing-with-text-fit

You can also follow us on Mastodon, Bluesky, X

Do we still need build tools?

2026-07-17T12:00:00+02:00

Ollie Williams weighs whether frontend tooling still earns its place in 2026. Vendor prefixes and Sass fade as CSS gains nesting, custom properties, and color functions, yet bundling and minification still pay off for compression and fewer requests. On the JS side, module preloading can replace bundling for small projects, transpilers default to modern output, and JSDoc adds types without a build step.

olliewilliams.xyz/blog/no-build

You can also follow us on Mastodon, Bluesky, X