Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions. @bramus built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. It handles document.startViewTransition(), the ViewTransition class with its promises, and view transition types. Animations are skipped in unsupported browsers, but DOM updates work as expected. #viewtransition #polyfill
Un-Sass’ing my CSS: native CSS nesting. @sturobson walks through how native CSS nesting works in modern browsers and compares it to Sass. He covers specificity, the & symbol, practical differences from Sass, and real-world component examples, including alerts, cards, and search forms. The article also explores integration with container queries, :has(), and prefers-reduced-motion. #css #learn
https://www.alwaystwisted.com/articles/UnSassing-my-CSS-nesting
You don’t know HTML tables. @paceaux goes beyond the basics, exploring table vocabulary, the Table Object Model API, header cell semantics with scope and headers attributes, and practical patterns for building accessible, well-structured tables with <thead>, <tbody>, <tfoot>, and JavaScript helpers. #html #a11y
https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/
What’s new in Chrome 146. Scroll-triggered animations let you drive CSS animations from scroll position declaratively. The Sanitizer API helps build XSS-free applications. WebGPU gets compatibility mode for older graphics APIs. Other additions include Iterator.concat for sequencing iterables, a meta element for text scaling on mobile, Navigation API improvements, and more accurate LCP metrics. #chrome #browser
Everything you never wanted to know about visually-hidden. @db digs into the two-decade history of the visually-hidden CSS pattern, examining whether just position: absolute and clip-path: circle(0) suffice in 2026. The article explains why the platform still lacks a native alternative and why standardizing the hack might encourage misuse rather than address underlying design problems. #a11y #css
SVGs on the web: performance comparison based on how you load them. @nucliweb compares five loading methods and how each affects caching, requests, and rendering: inline <svg>, <img>, <object>, CSS background, and sprites with <use>. A key anti-pattern: embedding raster images as base64 inside SVGs increases file size by 33% and blocks rendering. #svg #performance
The new @codepen 2.0 is now in public beta. Pens now have their own file system with folders, a new block-based build process that lets you mix and match technologies without config, real-time collaboration by invite, an omnibar for quick access to files and commands, and real privacy controls with passwords and invite-only access. No install, no command line, no complicated setup. #tools #css
The too early breakpoint. @shadeed9 explains why many websites switch to a mobile layout too soon. With examples from Time and TechCrunch, he shows how designs break in split-screen, tablet, and iOS link previews. The fix: intermediate breakpoints, container queries, and flexible CSS Grid and Flexbox layouts that adapt to available space instead of relying on rigid viewport widths. #css #layout
A new meta tag for respecting text scaling on mobile. @matuzo demonstrates the proposed <meta name="textscale"> element, an opt-in that makes websites honor OS text size settings in mobile browsers. Relative units like em and rem will scale with user preferences while pixel values stay unchanged. Currently only available in Chrome Canary. Firefox already reacts to OS settings but zooms the entire viewport instead of scaling text alone. #html #a11y
Dictionary compression is finally here, and it’s ridiculously good. @pimterry explains how Compression Dictionary Transport works with Zstandard and Brotli over HTTP, using previous responses as dictionaries to compress data down to near-diffs. YouTube JS bundles shrink up to 90% vs plain Brotli, Google Search HTML nearly 50%. Already deployed by Google, Shopify, Pinterest, and Notion. Chrome 130+, Safari and Firefox on the way. #performance #http
https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/
Define the theme color for Safari 26. @grooovinger explains how Safari 26 dropped the <meta name="theme-color"> and now derives chrome color from the body background or a fixed-position element at the top. The article proposes a CSS workaround using scroll-driven animations: a hidden fixed element maintains the desired color while being scrolled out of view. The approach has limitations when pages reload at non-top scroll positions. #safari #css
https://grooovinger.com/notes/2026-02-27-safari-26-header-background
Native random values in CSS. @alvaromontoro explores random() and random-item(), two new CSS functions from the Values and Units Module Level 5. random() returns a value within a range with optional step increments, while random-item() picks from a list of discrete values. Both support sharing options to correlate results across properties and elements. Only Safari 26.2 has partial support so far. #css #safari
https://alvaromontoro.com/blog/68092/native-random-values-in-css
Making WebAssembly a first-class language on the Web. @ryan argues JS-only loading, Web API glue code, and leaky abstractions keep WebAssembly niche and says the WebAssembly Component Model and WIT could enable <script> loading, direct Web API bindings, and faster DOM updates. #webassembly #firefox
https://hacks.mozilla.org/2026/02/making-webassembly-a-first-class-language-on-the-web/
Practical guide to the <img> element: from basics to LCP. @nucliweb explains responsive images with srcset and sizes, modern formats AVIF and WebP via <picture>, and performance attributes like loading=lazy, width and height to cut CLS, decoding, and fetchpriority. Plus when to preload LCP images and when an image CDN is the pragmatic shortcut. #performance #html
Firefox 148 release notes for developers. The release adds the HTML Sanitizer API and Trusted Types, plus Iterator.zip() and zipKeyed(), the CSS shape() function, improved anchor positioning, and the experimental Document Picture-in-Picture API. #firefox #browser
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148
Sprites on the web. @joshwcomeau shows how to animate spritesheets in CSS within the <img> viewport: object-fit, object-position, and steps(jump-none) for clean frame-by-frame motion, plus when sprites beat GIFs, and when procedural animation is better. #css #animation
An in-depth guide to customizing lists with CSS. @Richr shows how to size indents with lh units, tweak markers with ::marker, and build cross-browser symbols with @counter-style, while noting that support for some features is limited and you might still need a ::before fallback. #css
https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
Border-shape: the future of the non-rectangular web. @Una introduces border-shape, an upcoming CSS property that redefines an element’s box so the background, border image, focus outline, and box shadow follow the same custom geometry. It’s already in Chrome Canary ready for testing. #css #chrome
Accessible building blocks for web. A series of short videos by @TetraLogical covering basics of building accessible interfaces: headings, images, buttons, links, and form fields. It highlights clear labels, strong contrast, logical content order, and semantic HTML for keyboard and screen reader users. #a11y #video
https://www.youtube.com/playlist?list=PLTqm2yVMMUKV_6GjmzgxqLuG9Ydgrk5QT
Declarative dialog menu with invoker commands. @db shows a hamburger menu powered by native <dialog> and the new Invoker Command API, with a tiny JS fallback for older browsers. Plus, notes on a WebKit :focus-visible quirk, closedby="any", and view transitions. #html #css
https://dbushell.com/2026/02/12/declarative-dialog-menu-invoker-commands/
Client Info
Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst