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 in 2026: Scroll State Queries, Contrast Colors, and Declarative Buttons

    CSS in 2026: Scroll State Queries, Contrast Colors, and Declarative Buttons

    Published on 25.01.2026

    #tailwindweekly
    #tailwindcss
    #css
    motyl.dev<div></div></>FRONTEND

    4 CSS Features Every Front-End Developer Should Know In 2026

    TLDR: CSS shipped major features in 2025 that are now stable in Chrome and Safari: sibling-index() for staggered animations, scroll-state queries for detecting stuck/snapped/scrollable elements, text-box for precise typographic control, and typed attr() for type-safe HTML-to-CSS bridging.

    4 CSS Features Every Front-End Developer Should Know In 2026


    How to Have the Browser Pick a Contrasting Color in CSS

    TLDR: The new contrast-color() CSS function automatically chooses black or white text based on which provides better contrast with a given background color, though it currently uses the WCAG 2 algorithm which has known limitations with mid-tone colors.

    How to have the browser pick a contrasting color in CSS


    The command and commandfor Attributes: Declarative Button Behavior

    TLDR: Chrome 135 introduces command and commandfor attributes that let buttons declaratively control other elements (popovers, dialogs) without JavaScript, replacing the older popovertarget and popovertargetaction attributes with a more powerful and extensible system.

    The command and commandfor Attributes


    Tools & Resources Roundup

    Tail Lens - Chrome Extension for Tailwind CSS

    A Chrome extension that brings visual Tailwind CSS editing directly into your browser. Inspect elements, see class alternatives, search any Tailwind class with live preview, and apply changes with a single click. Notably, it supports custom tailwind.config.js including themes and breakpoints, and works with both Tailwind v3 and v4 (including v4's new CSS-based configuration). At $29 for a lifetime license, it's positioned as a productivity tool for developers who iterate heavily on UI.

    Tail Lens

    TailwindSQL - A Satirical Take on Utility Classes

    Someone created TailwindSQL, a satirical project that applies Tailwind's utility-class philosophy to SQL queries. Write className="db-users-name-where-id-1" and get back database results. It's a React Server Component, supports SQLite, and is somehow type-safe. Whether this is genius or an abomination depends entirely on your sense of humor about where utility classes should and shouldn't go.

    TailwindSQL

    Heynote - A Scratchpad for Developers

    Heynote is a persistent text buffer divided into blocks—each block can have its own language for syntax highlighting and auto-formatting. It's the perfect place for that Slack message you don't want to accidentally send, a JSON response you're debugging, meeting notes, or quick calculations (Math blocks act as calculator scratchpads with variable and unit support). Multiple buffers, inline images, and file-based storage make it a genuine daily-driver scratchpad.

    Heynote

    Hopp - Open Source Remote Pair Programming

    Hopp positions itself as the pair programming tool that Slack Huddles and Google Meet should have been. Built specifically for developers, it offers full keyboard and mouse control for both participants, crystal-clear screen sharing (they fine-tuned libwebrtc for low latency), and support for up to 10 participants. It's open source, self-hostable, and offers free licenses for OSS contributors.

    Hopp

    Leonardo Trapani - Developer Portfolio

    A clean, Tailwind-styled portfolio from a 19-year-old developer who's already shipped products with real users: Rediredge (a self-hostable domain redirector), Hyprvoice (voice-powered typing for Linux with 1k+ users), and Nutrivetpet (a pet nutrition platform with 3k+ paying users). Worth bookmarking as an example of how to present technical work effectively.

    Leonardo Trapani


    This newsletter summary is provided for informational purposes. Always verify claims and conduct your own research before making technology decisions.

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

    4 CSS Features Every Front-End Developer Should Know In 2026

    nerdy.dev

    How to have the browser pick a contrasting color in CSS

    webkit.org

    The command and commandfor Attributes

    developer.chrome.com

    Tail Lens

    taillens.io

    TailwindSQL

    tailwindsql.xyz

    Heynote

    heynote.com

    Hopp

    gethopp.app

    Leonardo Trapani

    leotrapani.com

    Sign in to bookmark these links
    Previous
    React Compiler Deep Dive, ESLint Flat Config, and the AI Engineering Revolution
    Next
    OpenAI's Valley of Death: Competition Intensifies as IPO Looms
    Grzegorz Motyl

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

    GitHubTwitterEmail