The case for tri-state dark mode toggles. @bramus replies to @leaverou with the case two states can’t cover: an OS that switches themes by time of day. Pick light during the day, and a toggle that maps one value 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, which then needs a reset. His poll ran 43 to 7 for three states. #design #color

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

Firefox 154 release notes for developers. 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. #firefox #browser

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

Can emails include dark and light mode themes? @maguay explains that @​media (prefers-color-scheme) works in 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. #email #css

https://buttondown.com/blog/dark-mode-emails

Progressive Web Apps mostly rock. @grooovinger 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 WiFi network name. #pwa #browser

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

Five best practices for preventing chaos in Tailwind CSS. 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. #css #tools

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

How Baseline can help you ship less JavaScript. 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. #baseline #js

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

Source maps or not? @43081j and @manniL explain when npm packages should ship source maps and when they just bloat installs. Publishing them grew the change-case package from 7.2 to 22.7KB, while dropping them cut magic-string from 241 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. #npm

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

State of CSS 2026 survey results. @sachagreif 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. #css #survey

https://2026.stateofcss.com/en-US

Dark mode toggles: two states are enough. @leaverou argues the 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. #design #css

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

Styling the navigation: declarative route and navigation matching in CSS. @bramus 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 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. #css #router

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

3D CSS guide: perspective, preserve-3d and translateZ. @carmenansio 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. #css #3d

https://www.carmenansio.com/articles/3d-css-guide/

Liquid Glass 2.0 in CSS (Aqua’s revenge). @jaredwhite recreates Apple’s refined Liquid Aqua look in pure CSS, adding 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. #css #design

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

CSS infinity use cases. @argyleink 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. #css #animation

https://nerdy.dev/css-infinity-use-cases

Cheatsheets for flex, grid, anchor positioning and invoker commands. @Kilian 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. #css #learn

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

The secure way to release an npm package in 2026. @sitnik_en 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. #npm #security

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

What’s new in Chrome 151. 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. #chrome #browser

https://developer.chrome.com/release-notes/151

WebKit features for Safari 26.6. @jensimmons 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. #safari #wasm

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

Cross-Origin Storage API: stop downloading twice. @morellodev 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. #performance #browser

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

Building an accessible modal dialog on the native <dialog>. 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. #dialog #a11y

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

Rebuilding FIFA standings layout with CSS subgrid. @shadeed9 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. #css #layout

https://ishadeed.com/article/fifa-layout/