Home/ Changelog

Changelog

A log of all updates, new features, and fixes on modern.css.

Apr 18, 2026

  • Added media pseudo-classes snippet. Covers :playing, :paused, :buffering, :muted, and :seeking for styling video state without JavaScript event listeners. Limited support today (Safari and Firefox), flagged as Interop 2026 focus area.

Mar 31, 2026

  • Added outline-driven type scale snippet. Covers experimental type scales with :heading(), sibling-index(), and pow() plus a safe fallback ladder.
  • Added attr() data-driven layouts snippet. Covers tiny dashboards that size bars and cards directly from data-* attributes with typed attr().
  • Updated attr() compatibility messaging across snippet and reference pages. Baseline now reflects broad attr() support while clearly marking typed non-content usage as experimental.
  • Added browser support note cards under compatibility sections. Notes now render as separate cards outside the main support card on both snippets and reference pages.
  • Fixed attr() in Reference search by renaming the entry label from to attr(). This makes search results easier to find.
  • Added live demos for the new snippets: automatic type scales and attr()-driven data bars. Each demo includes a clear fallback path for unsupported browsers.

Mar 4, 2026

  • Added CSS Grid playground. Pick a column template, drag the gap slider, and click any item to change how many columns it spans. Includes a float vs flexbox vs grid comparison strip.
  • Added CSS random() snippet. Covers generating per-element random values in CSS for rotation, delay, and size. Replaces the Math.random() loop and inline style pattern.
  • Added CSS Scroll Snap playground. Toggle mandatory vs proximity snapping, snap-align position, and scroll-snap-stop. Each toggle updates the live scrollable strip and generated CSS in real time.
  • Added CSS color-mix() playground. Pick two colors, adjust the mix percentage, and switch between five color spaces. A comparison grid shows how oklch, srgb, and hsl produce different midpoints from the same inputs.

Mar 3, 2026

  • Added A History of CSS page. An interactive timeline covering 7 eras from 1991 to 2026: the proposals, the browser wars, the dark ages hacks, and the modern CSS era. Includes a sticky era scrubber, milestone cards, and live mini-demos for CSS Grid, custom properties, clamp(), and :has().
  • Added Article, BreadcrumbList, and FAQPage structured data schemas to the History of CSS page for better search and AI engine visibility.
  • Added motion path animation snippet. Covers animating elements along a curved path with offset-path and offset-distance. Replaces GSAP motionPath plugin.
  • Added nth-child selector visualizer playground. Click any selector pattern and see which items match in real time. Includes a custom input for testing your own selectors.
  • Added CSS Filters playground. Drag sliders for blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia, invert, and opacity. Each filter axis is isolated so you can see exactly what it controls.
  • Added CSS Scroll Snap playground. Toggle snap-type (mandatory vs proximity) and snap-align (start, center, end) on a live scrollable strip. Shows the difference mandatory and proximity make.
  • Added CSS color-mix() playground. Pick two colors, adjust the mix percentage, and switch color spaces. Includes a live comparison of all four color spaces side by side.

Mar 1, 2026

  • Added HTML category. Six existing snippets (dialog, popover, invoker commands, exclusive accordions, customizable selects, dialog light dismiss) moved from Layout into the new category.
  • Added datalist snippet. Covers native browser autocomplete with no JavaScript library.
  • Added details and summary snippet. Covers expand/collapse accordions with no JS click handlers.
  • Added loading=lazy snippet. Covers native image and iframe lazy loading with no IntersectionObserver.
  • Added output element snippet. Covers live form results with no DOM writes.
  • Added inputmode and enterkeyhint snippet. Covers mobile keyboard hints with no JavaScript.
  • Updated nav Snippets link to a dropdown with All snippets, CSS, and HTML options.

Feb 24, 2026

  • Launched the CSS Reference. A visual directory of 700 properties, selectors, and at-rules with live compatibility metrics.

Feb 21, 2026

  • Added Tailwind equivalents to 25 snippets: aspect-ratio, backdrop-filter, color-mix, container-queries, dynamic-viewport-units, field-sizing, fluid-typography, focus-visible, gap, has-selector, individual-transforms, inset, line-clamp, logical-properties, object-fit, overscroll-behavior, prefers-reduced-motion, scroll-snap, sticky-positioning, stretch, subgrid, text-wrap-balance, user-valid, wide-gamut, variable-fonts, and color-scheme.
  • Added FAQ section to the home page. Five questions covering the site, browser support, Sass alternatives, CSS Baseline, and how the accordion itself is built. Uses native details and summary elements, no JavaScript.
  • Added FAQPage, Organization, and SearchAction structured data schemas to the home page for better search and AI engine visibility.
  • Fixed BreadcrumbList schema on snippet pages. Position 2 now correctly links to the category page instead of home.
  • Added author field to TechArticle schema on snippet pages. Articles already had this, snippets were missing it.
  • Added OAI-SearchBot, Bytespider, and cohere-ai to robots.txt.
  • Added og:image:alt to Open Graph meta tags.

Feb 20, 2026

  • Fixed external links: ctrl/cmd/shift + click now bypasses the leaving page and opens the link directly.
  • Fixed field-sizing baseline label from Newly available to Limited availability. Firefox 130 shipped it but cross-browser support is still limited.
  • Fixed accordion demo on the interpolate-size snippet page. Switched from a JS onclick toggle to native details and summary elements. No JavaScript involved in the toggle.
  • Added Tailwind equivalent tab to the code comparison panel. Snippets with a Tailwind mapping now show a TW Tailwind tab alongside the Modern tab, with the class string and a usage example.
  • Updated the Learn more about Baseline link to point to the canonical WebDX CG home page at web-platform-dx.github.io/web-features.
  • Removed the checkmark and cross symbols from the Modern and Old code comparison labels. The labels now read Modern and Old without implying the old approach is wrong.
  • Added a tooltip to the global usage percentage in the browser support section. Hovering shows: Percentage of browsers worldwide that support this feature.
  • Fixed dialog-light-dismiss, invoker-commands, and dialog-element snippets missing baseline data. All three now show the correct badge, browser icons, and support description.
  • Fixed oklch snippet: the tailwind field was an object instead of a string, which broke the code comparison panel entirely.
  • Fixed the gap property demo. The label text was appearing beside the boxes instead of below them due to both elements being direct children of the flex viewport.
  • Added browser support fallback messages to the closedby and commandfor demos. Unsupported browsers see a notice instead of a broken or empty demo.
  • Added accessibility notes to the carousel, scroll spy, and popover snippets. Each note covers what aria attributes and keyboard behavior still require JavaScript.

Feb 19, 2026

  • Added RSS support with 3 feeds: all content (/feed/), articles (/feed/articles/), and snippets (/feed/snippets/). Feeds archive page at /feeds/. Autodiscovery link in head, RSS icon in footer.
  • Added text-wrap: balance to all headings. No more orphaned single words on the last line.
  • Added prefers-reduced-motion support. All transitions and animations collapse to near-instant for users who request reduced motion in their OS.
  • Added Google Analytics preconnect hint in for faster script load
  • Added browser caching headers for static assets (1 year, immutable) and security headers (X-Content-Type-Options, X-Frame-Options, Referrer-Policy) via .htaccess
  • Fixed mixed content: footer newsletter social link updated from http://buttondown.email to https://buttondown.com
  • Added og:image:type, og:image:width, og:image:height to Open Graph meta tags
  • Fixed manifest.json icon paths from relative to absolute
  • Extracted shared JSON cache logic into loaders/cache.helper.php. Snippets, articles, and playgrounds loaders now share one function.
  • Removed service worker. Manifest.json still enables PWA install prompt, offline caching removed.
  • Under the Hood page updated to 15 techniques (added text-wrap: balance and prefers-reduced-motion)

Feb 18, 2026

  • Added 7 new snippets: dynamic viewport units (dvh/svh/lvh), scrollbar-color + scrollbar-width, media query range syntax, linear() easing, exclusive accordions (details name), @supports feature detection, prefers-reduced-motion
  • Added IndexNow support with auto-ping on content changes and cache/indexnow-log.txt for ping history
  • Added CSS cache busting via filemtime query string on modern.css
  • Fixed update-browser-support.js SNIPPETS_DIR path (was pointing to assets/js/snippets, now correctly points to data/snippets)
  • Added robots.txt entries for AI crawlers (GPTBot, ClaudeBot, PerplexityBot, Meta-ExternalAgent) and AI user agents

Feb 16, 2026

  • Added 8 new snippets: interpolate-size (height: auto animations), field-sizing (auto-growing textarea), :user-valid/:user-invalid (form validation), object-fit (responsive images), overscroll-behavior (scroll chaining), scrollbar-gutter (layout shift prevention), backdrop-filter (frosted glass), oklch (perceptually uniform colors)
  • Added mobile tap-to-toggle for snippet cards. First tap reveals modern code, second tap navigates.
  • Added author meta to article pages: Schema.org Person structured data, rel=author link, and inline byline with avatar, social links, and publish date
  • Added update-browser-support.js script to refresh all snippet usage percentages from caniuse and MDN BCD
  • Updated global usage percentages for 46 snippets using live caniuse + MDN BCD data (range-style-queries: 32%→88%, customizable-selects: 72%→96%, view-transitions: 78%→89%, and more)
  • Updated browser support percentages for interpolate-size (69%), field-sizing (73%), and :user-valid (85%)
  • Fixed staggered-animations snippet: corrected browser support from "widely available since 2018" to "limited availability" (Chrome 138+, Edge 138+, Safari 26.2+, no Firefox support)
  • Fixed staggered-animations demo to use real sibling-index() instead of PHP-set --i variables
  • Fixed CSS nesting explanation: bare element selectors no longer require the & prefix in relaxed nesting syntax
  • Clarified scrollbar-gutter explanation: overlay scrollbars on macOS and iOS are unaffected by scrollbar-gutter: stable
  • Added prefers-color-scheme light mode support with full light color palette
  • Changed default filter to "Newly available" so visitors see cross-browser features first
  • Added AGENTS.md with modern CSS patterns for AI coding assistants
  • Fixed scroll-driven animations: changed from "newly" to "limited" (Firefox has not shipped support)
  • Fixed content-visibility: added missing Safari to browsers display list
  • Fixed sticky-positioning baselineYear from 2017 to 2022 (Safari 13 shipped in 2019)
  • Fixed wide-gamut Safari version from 15 to 15.4 (oklch support started in Safari 15.4)
  • Fixed line-clamp Chrome version from 6 to 14

Feb 15, 2026

  • Added offcanvas mobile navigation menu with hamburger button
  • Added "Browser compatibility" label to filter pills
  • Added client-side year filtering on What's New archive page
  • Newsletter now shows on all pages (moved to global footer)
  • Swapped card hover behavior. Old code shown by default, modern revealed on hover.
  • Hero code comparison now links to the centering snippet
  • Browser icon CSS loaded locally instead of CDN
  • Updated llms.txt with latest site features and removed deleted snippets
  • Added changelog page

Feb 14, 2026

  • Added browser compatibility filter pills (All / Widely available / Newly available / Limited) on home and category pages
  • Filter state synced to URL params for shareable links
  • Added Baseline description text and "Learn more about Baseline" link to browser support section
  • Added global usage percentage to browser support section
  • Added MDN documentation links to all snippets (47 snippets)
  • Added polyfill links for scroll-animations, view-transitions, popover, text-wrap-balance, and anchor-positioning
  • Fixed hero centering comparison: .center → .child/.parent to correctly show scope difference
  • Restructured browser support section with left/right layout (badge + browsers)
  • Fixed browser support data for responsive-clip-paths (was incorrectly marked as "widely", now "limited")
  • Fixed missing browser icons on 13 "limited" snippets by adding baselineBrowsers data
  • Fixed double-encoded → arrows in 30 JSON snippet files
  • Fixed popover demo positioning using CSS anchor positioning
  • Removed 3 non-CSS snippets: dialog element, invoker commands, dialog light dismiss
  • Added 301 redirects for removed snippet URLs

Feb 9, 2026

  • Launched modern-css.com
ESC
↑↓ navigate ↵ open esc close