motyl.dev
TrendingNewsletterBlogNewsAbout
Support
Grzegorz Motyl

© 2026 Grzegorz Motyl. Raising the bar of professional software development.

GitHubTwitterEmail
Home
News
Blog
Me
    /
    motyl.dev
    TrendingNewsletterBlogNewsAbout
    Support
    1. Home
    2. News
    3. CSS Is Eating JavaScript: The Great Platform Expansion of 2026

    CSS Is Eating JavaScript: The Great Platform Expansion of 2026

    Published on 25.03.2026

    #frontend-focus
    #frontend
    #css
    motyl.dev<div></div></>FRONTEND

    The Great CSS Expansion

    TLDR: A comprehensive audit reveals that roughly 322 kB of common JavaScript UI libraries can now be replaced by native CSS and HTML features. Anchor positioning, the Popover API, scroll-driven animations, view transitions, customizable selects, and more are shipping or nearly shipping across browsers.

    The Great CSS Expansion


    Announcing TypeScript 6.0

    TLDR: TypeScript 6.0 is the bridge release before the native Go-based TypeScript 7.0. It changes major defaults like strict mode being on by default, deprecates ES5 and AMD targets, and introduces a stable type ordering flag to prepare for parallel type checking.

    Announcing TypeScript 6.0


    WebKit Features for Safari 26.4

    TLDR: Safari 26.4 ships 44 features and 191 fixes, headlined by CSS Grid Lanes for masonry layouts, WebTransport for low-latency communication, and the Keyboard Lock API. The release focuses heavily on spec compliance and bug fixes rather than flashy new features.

    WebKit Features for Safari 26.4


    CSS Refactoring with an AI Safety Net

    TLDR: A developer used Claude Code to plan and execute a seven-phase CSS refactoring, using Playwright screenshots compared by AI to catch visual regressions. The technique caught a subtle line-height change that would have been missed by manual review.

    CSS Refactoring with an AI Safety Net


    More Easy Light-Dark Mode Switching: light-dark() Is About to Support Images

    TLDR: The CSS light-dark() function is being extended to accept image values, not just colors. Firefox 150 ships it in April, Chromium has it behind a flag, and Safari has no support yet.

    More Easy Light-Dark Mode Switching: light-dark() is about to support images!


    Sneaky Header Blocker Trick

    TLDR: Josh Comeau reveals how his blog's header appears to change background color as you scroll, using sticky "blocker" elements color-matched to each section rather than any JavaScript scroll detection.

    Sneaky Header Blocker Trick


    The Color System I Wish I Understood Sooner

    TLDR: A two-layer color system using primitive tokens for palette values and semantic tokens for usage context solves the maintenance problems that either approach alone creates.

    The Color System I Wish I Understood Sooner


    Experimenting With Scroll-Driven corner-shape Animations

    TLDR: The new CSS corner-shape property combined with scroll-driven animations creates dynamic viewport-level shape effects. The superellipse() function makes corner shapes animatable, enabling notch-to-square transitions tied to scroll position.

    Experimenting With Scroll-Driven corner-shape Animations


    Split View in Firefox

    TLDR: Firefox 149 introduces Split View, letting you place two tabs side by side in the same window. Right-click a tab and choose Add Split View to compare, reference, or work across two pages simultaneously.

    Split View in Firefox


    Highlighting Footnotes with CSS

    TLDR: Using the :target pseudo-class with a carefully positioned pseudo-element, you can highlight linked footnotes with a fading squircle animation, all in pure CSS with no JavaScript.

    Highlighting Footnotes


    Progressive Web Components with Elena

    TLDR: Elena is a 2.6 kB library for building Progressive Web Components that render HTML and CSS first, then hydrate with JavaScript. It targets design system teams who need cross-framework portability without the typical web component pain points.

    Progressive Web Components


    SVG Favicons That Respect Theme Preference

    TLDR: SVG favicons can use embedded CSS with prefers-color-scheme media queries to adapt to light and dark mode, but Safari currently ignores the media queries while Chrome requires a refresh to update.

    SVG favicons that respect theme preference


    Structure Revealer: A New A11y Bookmarklet

    TLDR: A new bookmarklet from A11y Tools lets you visualize page structure by selectively highlighting semantic HTML elements, with the ability to add custom CSS selectors and persist your preferences across sessions.

    New bookmarklet – Structure Revealer


    Expo UI in SDK 55: Jetpack Compose for React Native

    TLDR: Expo UI SDK 55 brings Jetpack Compose support to beta with enough Material Design 3 components to build complete apps, and aligns SwiftUI APIs with Apple's conventions so native framework knowledge transfers directly.

    Expo UI in SDK 55: Jetpack Compose now available for React Native apps


    Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js

    TLDR: A detailed tutorial on creating a fluid X-ray reveal effect using Three.js with TSL and WebGPU, combining a ping-pong fluid simulation, instanced dual scenes, and a multi-pass post-processing pipeline.

    Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js

    ☕ Knowledge costs tokens,fuel meHelp me keep the content flowing
    External Links (15)

    The Great CSS Expansion

    blog.gitbutler.com

    Announcing TypeScript 6.0

    devblogs.microsoft.com

    WebKit Features for Safari 26.4

    webkit.org

    CSS Refactoring with an AI Safety Net

    danielabaron.me

    More Easy Light-Dark Mode Switching: light-dark() is about to support images!

    bram.us

    Sneaky Header Blocker Trick

    joshwcomeau.com

    The Color System I Wish I Understood Sooner

    theadminbar.com

    Experimenting With Scroll-Driven corner-shape Animations

    css-tricks.com

    Split View in Firefox

    blog.mozilla.org

    Highlighting Footnotes

    kittygiraudel.com

    Progressive Web Components

    arielsalminen.com

    SVG favicons that respect theme preference

    pawelgrzybek.com

    New bookmarklet – Structure Revealer

    a11y-tools.com

    Expo UI in SDK 55: Jetpack Compose now available for React Native apps

    expo.dev

    Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js

    tympanus.net

    Sign in to bookmark these links
    Previous
    Shadow AI: Your Developers Already Decided While Your Committee Was Meeting
    Next
    Emotional Design, Messy Docs, and the AI Design-to-Code Gap
    Grzegorz Motyl

    © 2026 Grzegorz Motyl. Raising the bar of professional software development.

    GitHubTwitterEmail