Best of CSS — April 2026

  1. 1
    Article
    Avatar of nerdydevAdam Argyle·6w

    Why AI Sucks At Front End · April 12, 2026

    A critical take on why AI coding tools consistently underperform on front-end development tasks. The author identifies four core reasons: AI trained on outdated, template-heavy data; LLMs cannot render or visually perceive output; they lack understanding of architectural intent (SDD, BDD, state machines); and they have zero control over the chaotic browser environment with its endless permutations of viewport sizes, input types, user preferences, and browser versions. While AI handles boilerplate scaffolding and token migration well, it fails at bespoke interactions, pixel-perfect layouts, accessibility, performance optimization, and complex component states. The unpredictability of human behavior compounds the problem further.

  2. 2
    Article
    Avatar of joshwcomeauJosh W Comeau·3w

    Scroll-Driven Animations • Josh W. Comeau

    The CSS Animation Timeline API enables scroll-driven animations without JavaScript by mapping keyframe animations to scroll progress instead of time. Using `animation-timeline: view()` or `scroll()`, developers can trigger animations based on an element's position in the viewport. The post covers animation ranges (cover, contain, entry, exit), range percentages for precise control, scroll progress timelines for reading indicators, and linked timelines using `view-timeline` and `timeline-scope` to animate one element based on another element's scroll position.

  3. 3
    Article
    Avatar of chromeChrome Developers·6w

    Chrome for Developers

    Chrome 147 introduces three notable features for web developers. Element-scoped view transitions expose startViewTransition() on arbitrary HTML elements, enabling concurrent and nested transitions while keeping the rest of the page interactive. The new CSS contrast-color() function automatically returns black or white based on which provides higher contrast against a given color, aiding accessibility compliance. The CSS border-shape property allows creating non-rectangular borders using arbitrary shapes like polygons, circles, or shape() values, differing from clip-path by decorating the border rather than clipping the entire element.

  4. 4
    Article
    Avatar of csstipCSS Tip·6w

    Convert Complex SVG Shapes into CSS

    An SVG-to-CSS converter tool has been updated to support multiple SVG path elements, not just a single path. It merges multiple path elements by concatenating their 'd' attribute values and converts them into a single CSS shape() function, producing responsive single-element code. A border-only version using border-shape is also available (Chrome-only). The technique works when paths form separate portions of the same shape, share the same color, and have no transforms applied. The author emphasizes that shape() is not a replacement for SVG but a proof-of-concept tool.

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·6w

    Selecting a Date Range in CSS

    A tutorial demonstrating how to build a CSS-driven date range selector using the `:nth-child(n of selector)` syntax. The approach uses checkboxes for state and CSS selectors to handle both the range highlighting and the JavaScript logic for managing which dates are selected. The key insight is that `:nth-child(2 of :has(:checked))` lets you target checked elements by their position among checked siblings, simplifying both the JS range-adjustment logic and the CSS range styling to just a few lines.

  6. 6
    Article
    Avatar of webweb.dev·4w

    New to the web platform in April

    Chrome 147 and Firefox 150 shipped to stable in April 2026, bringing several new web platform features. Highlights include the contrast-color() CSS function reaching Baseline (returns black or white for maximum contrast against a given color), scroll-driven animation range properties becoming Baseline, the ariaNotify() method for screen reader announcements, auto sizes for lazy-loaded images, element-scoped view transitions, the CSS border-shape property for non-rectangular borders, SVG textPath path attribute support, modulepreload for JSON and CSS modules, and Math.sumPrecise. Beta releases (Chrome 148, Firefox 151, Safari 26.5) preview name-only container queries, lazy loading for video/audio, CSS container style queries, and the :open pseudo-class.

  7. 7
    Article
    Avatar of css_tricksCSS-Tricks·6w

    7 View Transitions Recipes to Try

    Seven ready-to-use CSS View Transition recipes are presented with full code snippets: pixelate dissolve, wipe up (with directional variants), rotate in-out, circle wipe-out, diagonal push, curtain reveal, and 3D flip. Each recipe uses the @view-transition at-rule with a named type, paired with ::view-transition-old and ::view-transition-new pseudo-elements and @keyframes animations. The setup section explains how to opt in to view transitions, use the types descriptor to avoid conflicts, and wrap everything in a prefers-reduced-motion media query for accessibility.

  8. 8
    Article
    Avatar of css_tricksCSS-Tricks·7w

    Making Complex CSS Shapes Using shape()

    The CSS shape() function enables creation of complex organic shapes like blobs, wavy dividers, and squiggly frames directly in CSS without SVG. The technique relies on chaining smooth curve commands where each shared point between adjacent curves is the midpoint of their control points. Generators are available for wavy dividers, blobs, and fancy frames. Shapes can be animated by interpolating between two shape() values with the same granularity, and scroll-driven animations are supported via animation-timeline: scroll(). The post walks through the mathematical logic behind smooth curve generation and showcases demos including animated wavy layouts, squishy buttons, and CSS loaders.

  9. 9
    Video
    Avatar of kevinpowellKevin Powell·6w

    I'm a CSS noob

    A developer shares a critical YouTube comment calling them a 'CSS noob' for allegedly promoting bad practices and obfuscating code. The post reflects on receiving negative feedback about CSS advice shared publicly.

  10. 10
    Article
    Avatar of frontendmastersFrontend Masters·6w

    How I Lost MadCSS – Frontend Masters Blog

    Chris Coyier recounts losing a CSS coding battle (MadCSS) due to a cascade of self-inflicted mistakes: unnecessary forced widths using 100vw, a bungled grid setup with incorrect repeat() and percentage row values, using overflow:clip instead of overflow:hidden, and insufficient horizontal space for a long unbreakable name combined with extra padding. Each mistake compounded the others, causing a grid blowout. The post walks through each error and the correct approaches, serving as a candid post-mortem on common CSS layout pitfalls.

  11. 11
    Video
    Avatar of wdsWeb Dev Simplified·5w

    Can I Build This UI In 10 Minutes

    A developer attempts to recreate a UI design using only CSS in 10 minutes as part of a timed challenge on CSSBattle-style platform. The walkthrough covers planning the layout using flexbox, applying CSS variables for colors, styling score rows with dotted borders, and fine-tuning typography and spacing. After achieving a 73% match manually, the author tests the same challenge with AI, which scores only 61% and produces quirky artifacts like unnecessary linear gradients, hardcoded pixel values, and ignored CSS variable instructions — concluding that AI is a useful starting point but not a reliable replacement for hands-on CSS skills.

  12. 12
    Article
    Avatar of vaadinVaadin·7w

    CSS Performance Optimizations for Grid

    Vaadin's engineering team shares three CSS optimizations made for Grid and Tree Grid in Vaadin 25 to address severe rendering slowdowns with the new Aura theme. The key fixes were: replacing CSS box shadows (computed via custom properties) with regular borders, cutting rendering time by ~50%; switching from CSS part attribute selectors to class selectors, reducing selector match attempts by 3.5x and improving scrolling frame time from 90ms to 40ms; and registering CSS custom properties that use light-dark() with explicit <color> syntax via the Houdini @property API, reducing Aura rendering time by ~60%. Together these brought a 180-column grid's initial render from ~7.2s down to ~1s.

  13. 13
    Article
    Avatar of nerdydevAdam Argyle·4w

    CSS Recently In All Browsers · April 26, 2026

    A roundup of CSS features that reached cross-browser baseline between October 2025 and April 2026, making them safe to use in production. Covered features include: Anchor Positioning for natively tethering UI components, @scope for selector scoping and donut-hole cascade limiting, name-only container queries (no size condition required), the shape() function for responsive CSS geometry, shape-outside with xywh() and rect(), light-dark() support for image values, view-transition-class and types for SPA-like routing animations, and new root-relative typographic units (rcap, rch, rex, ric).

  14. 14
    Article
    Avatar of lobstersLobsters·7w

    devins.page/dev.css

    dev.css is a tiny (~5.5kb minified) classless CSS framework inspired by new.css that makes plain HTML files look modern and responsive without any class names. It supports semantic HTML elements including header, main, aside (sidebar), and footer. The framework offers optional addons (sticky header, one-line header, scroll-to-top button, responsive sidebar) and themes including Catppuccin and terminal styles. It can be installed via CDN link or npm package and is best suited for simple blogs, personal sites, link pages, or HTML prototyping.

  15. 15
    Article
    Avatar of joshwcomeauJosh W Comeau·6w

    Squash and Stretch • Josh W. Comeau

    A tutorial on applying Disney's 'squash and stretch' animation principle to SVG micro-interactions on the web. Covers implementing stretchy arrow icons using CSS path transitions and the Motion JavaScript library, with tips on spring physics easing and event-based (vs. state-based) hover interactions. Also includes a bouncing ball playground demonstrating the same principle with CSS keyframes and custom properties.

  16. 16
    Article
    Avatar of frontendmastersFrontend Masters·6w

    Name-Only Containers: The Scoping We Needed – Frontend Masters Blog

    CSS name-only containers (supported in Safari 26.4+) offer a native scoping mechanism for component styles. By assigning a container-name to each component's root element without specifying a container-type, developers can write @container blocks that scope styles to that component without conflicts — no build tools, no specificity hacks, no BEM required. This approach mirrors what CSS Modules does programmatically, but uses the web platform directly. The author argues @scope fell short of this use case, while name-only containers finally deliver the component-level style isolation developers have long wanted.

  17. 17
    Article
    Avatar of vscodeVisual Studio Code·6w

    Visual Studio Code 1.116

    Visual Studio Code 1.116 release notes cover incremental updates including keyboard navigation commands for the Agents app, an accessibility help dialog for screen reader users in the Agents app chat input, and CSS @import node_modules resolution support enabling Ctrl+click navigation through bundler imports.

  18. 18
    Video
    Avatar of kevinpowellKevin Powell·4w

    No more magic numbers for your breakpoints

    Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to break at 90ch, each column is roughly 30 characters wide — aligning with minimum readable line-length guidelines. Unlike media queries, container queries respect the element's own font size, so breakpoints adapt automatically when the base font size changes. This approach replaces magic numbers with meaningful, content-first breakpoints.

  19. 19
    Video
    Avatar of kevinpowellKevin Powell·5w

    Are we over-engineering with modern CSS?

    A web developer reflects on community backlash after using modern CSS techniques to build a wrapper/container component. The original solution used complex CSS functions like min() and ch units in a way that confused junior developers, prompting a discussion about whether clever CSS is over-engineering when it adds no practical value. The author explores a middle-ground approach using CSS custom properties with fallbacks and logical properties to allow easy modifiers, while acknowledging the tension between showcasing modern CSS capabilities and writing maintainable, readable code.

  20. 20
    Article
    Avatar of allthingsopenAll Things Open·4w

    Building a D&D productivity tracker with generative music

    Bree Hall, Senior Developer Advocate at Atlassian, discusses her passion for front-end customization and a creative side project: a Dungeons & Dragons-style productivity tracker that uses dice rolls to select tasks and durations, paired with generative music (dungeon synth or fairy music). She also shares her mission to make tech more equitable by being the mentor she wished she had, and advises developers to stay flexible in open source to capture unexpected opportunities.

  21. 21
    Video
    Avatar of joyofcodeJoy of Code·4w

    Animate Entry And Exit Transitions With Modern CSS

    A walkthrough of modern CSS entry and exit animations using @starting-style, CSS transitions, and the View transitions API. Key topics include: using @starting-style to define initial states without JavaScript class toggling, the advantage of CSS transitions over keyframes (cancelable mid-animation), animating the display property with 'allow-discrete', and using the View transitions API for smooth layout shifts when DOM elements are added or removed. The dialog element and popover API are shown as ideal use cases for @starting-style.

  22. 22
    Article
    Avatar of chromeChrome Developers·6w

    Chrome for Developers

    Chrome 148 beta introduces a range of CSS and Web API improvements. CSS highlights include name-only container queries, lazy loading for video/audio elements, the new `revert-rule` keyword, `at-rule()` for feature detection, and `text-decoration-skip-ink: all`. On the Web API side, notable additions are the Prompt API for on-device AI (text, image, audio), SharedWorker re-enabled on Android with an extended lifetime option, Web Serial API on Android, WebGPU linear_indexing, Web Authentication Immediate UI mode, and WebRTC `alwaysNegotiateDataChannels`. New origin trials include HTML-in-canvas, Container Timing, Declarative CSS Module Scripts, OpaqueRange, and Agentic Federated Login.

  23. 23
    Article
    Avatar of thoughbotthoughbot·6w

    You, too, can make a boilerplate

    A guide to creating your own code boilerplate, inspired by the release of Roux, a native CSS styles and architecture library by Thoughtbot. Covers the history of the term 'boilerplate', its value in development (reducing decision fatigue, standardizing conventions, accelerating onboarding), and practical steps for building one: auditing past projects, capturing painful setup steps, cherry-picking best patterns, stripping project-specific details, and treating it as a living document. Also addresses why personal boilerplates remain valuable even in the age of AI code generation.

  24. 24
    Article
    Avatar of infoqInfoQ·6w

    Tailwind CSS 4.2 Ships Webpack Plugin, New Palettes and Logical Property Utilities

    Tailwind CSS 4.2.0 ships a first-class webpack plugin that eliminates the need for manual PostCSS configuration, bringing webpack projects to parity with Vite integration. The release adds four new muted color palettes (mauve, olive, mist, taupe), expands logical property utilities for internationalized and RTL layouts, and delivers a 3.8x recompilation speed improvement across all integrations. Teams still on v3 can use the automated migration tool, though some rough edges remain around @apply usage in component libraries.

See all CSS archives