{ "slug": "css-baseline-changes", "name": "CSS Baseline 2026 change log", "description": "A staged, source-linked watch list of CSS features that web.dev and MDN describe as entering or approaching Web Platform Baseline in 2026.", "asOf": "2026-06-29", "publisher": "Shape Cat", "license": "Reference data for editorial citation and embed reuse with attribution.", "methodology": "Rows use web.dev monthly Baseline and new-platform posts as the primary source, MDN as the feature reference, and a manual Shape Cat check date. All rows remain verified:false and noindex until the owner can recheck exact Baseline dates and redistribution terms.", "citationHtml": "Source: CSS Baseline 2026 change log by Shape Cat", "changes": [ { "slug": "css-anchor-positioning-baseline-2026", "feature": "CSS Anchor Positioning", "title": "CSS Anchor Positioning is a 2026 Baseline watch item for popovers and tooltips", "summary": "CSS Anchor Positioning lets positioned elements align to an anchor without measuring coordinates in JavaScript. Use it to replace simple Floating UI or Popper.js patterns only after checking current Firefox and Safari support for your audience.", "status": "newly-available", "baselineMonth": "2026-01", "browsers": { "chrome": "144+ per web.dev January platform article", "edge": "144+ per Chromium version alignment", "firefox": "147+ noted by web.dev text", "safari": "26+ per web.dev Browser Support block" }, "replaces": "Floating UI or Popper.js for simple anchored panels, tooltips, teaching bubbles, and callouts", "snippet": ".button { anchor-name: --cta; }\n.popover { position: absolute; position-anchor: --cta; top: anchor(bottom); left: anchor(center); transform: translateX(-50%); }", "fallback": "Keep the anchored panel in normal flow or load a small positioning library behind @supports not (anchor-name: --cta).", "toolSlugs": [ "css-shadow", "css-gradient", "cubic-bezier" ], "sourceLabel": "web.dev: New to the web platform in January", "source": "https://web.dev/blog/web-platform-01-2026", "secondarySources": [ { "label": "MDN: CSS anchor positioning", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning" } ], "lastChecked": "2026-06-29", "confidence": "medium - official web.dev article names the feature, but exact Baseline date still needs owner recheck", "verified": false }, { "slug": "css-shape-function-baseline-feb-2026", "feature": "CSS shape() function", "title": "The CSS shape() function entered the February 2026 Baseline digest", "summary": "The shape() function gives authors a more CSS-native way to describe custom shapes for clipping and motion paths. Treat it as a progressive enhancement for decorative blobs, waves, and path-based accents until your target browsers are checked.", "status": "newly-available", "baselineMonth": "2026-02", "browsers": { "chrome": "February 2026 Baseline digest source", "edge": "February 2026 Baseline digest source", "firefox": "February 2026 Baseline digest source", "safari": "February 2026 Baseline digest source" }, "replaces": "Hard-coded SVG path assets for some decorative masks and motion paths", "snippet": ".blob { clip-path: shape(from 50% 0, curve to 100% 50% with 100% 22%, curve to 50% 100% with 100% 78%, curve to 0 50% with 0 78%, curve to 50% 0 with 0 22%); }", "fallback": "Use an inline SVG clipPath or a simpler border-radius blob when shape() is unsupported.", "toolSlugs": [ "svg-blob", "svg-wave", "shape-divider" ], "sourceLabel": "web.dev: Baseline monthly digest, February 2026", "source": "https://web.dev/blog/baseline-digest-feb-2026", "secondarySources": [ { "label": "MDN: shape()", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape" } ], "lastChecked": "2026-06-29", "confidence": "medium - web.dev provides the monthly Baseline digest; exact browser matrix should be rechecked", "verified": false }, { "slug": "text-indent-each-line-hanging-baseline-mar-2026", "feature": "text-indent: each-line and hanging", "title": "text-indent each-line and hanging appeared in the March 2026 Baseline digest", "summary": "The each-line and hanging values make typographic hanging indents easier without manual spans. This matters for editorial cards, pull quotes, and legal-style lists, but should be guarded because older engines can ignore the extra keywords.", "status": "newly-available", "baselineMonth": "2026-03", "browsers": { "chrome": "March 2026 Baseline digest source", "edge": "March 2026 Baseline digest source", "firefox": "March 2026 Baseline digest source", "safari": "March 2026 Baseline digest source" }, "replaces": "Manual inline wrappers for first-line or hanging-indent text treatments", "snippet": ".pull-quote { text-indent: 1.5em hanging each-line; }\n.pull-quote::first-letter { font-weight: 700; }", "fallback": "Use padding-left plus negative text-indent for the first line, and accept simpler indentation elsewhere.", "toolSlugs": [ "font-pairing", "brand-kit" ], "sourceLabel": "web.dev: Baseline monthly digest, March 2026", "source": "https://web.dev/blog/baseline-digest-mar-2026", "secondarySources": [ { "label": "MDN: text-indent", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent" } ], "lastChecked": "2026-06-29", "confidence": "medium - official digest source found; exact per-engine support should be checked before indexing", "verified": false }, { "slug": "contrast-color-css-2026", "feature": "contrast-color()", "title": "contrast-color() was listed in the April 2026 Baseline digest", "summary": "contrast-color() asks the browser to choose a readable contrasting color against a supplied background. It is promising for token systems and generated palettes, but production design systems should keep explicit fallback tokens for now.", "status": "newly-available", "baselineMonth": "2026-04", "browsers": { "chrome": "April 2026 Baseline digest source", "edge": "April 2026 Baseline digest source", "firefox": "April 2026 Baseline digest source", "safari": "April 2026 Baseline digest source" }, "replaces": "Some manual light/dark text token branching for generated color swatches", "snippet": ".chip { --chip-bg: oklch(72% 0.16 180); background: var(--chip-bg); color: contrast-color(var(--chip-bg)); }", "fallback": "Pair each generated background token with an explicit text token, then override inside @supports (color: contrast-color(white)).", "toolSlugs": [ "color-palette", "color-from-image", "brand-kit" ], "sourceLabel": "web.dev: Baseline monthly digest, April 2026", "source": "https://web.dev/blog/baseline-digest-apr-2026", "secondarySources": [ { "label": "MDN: contrast-color()", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color" } ], "lastChecked": "2026-06-29", "confidence": "medium - public documentation confirms the feature direction, but exact effective date remains staged", "verified": false }, { "slug": "container-style-queries-baseline-may-2026", "feature": "CSS container style queries", "title": "Container style queries appeared in the May 2026 Baseline digest", "summary": "Style queries let components react to custom property values on a container, not only its size. They can simplify theme-aware cards, badges, and brand-kit previews, but still need progressive-enhancement fallbacks in reusable components.", "status": "newly-available", "baselineMonth": "2026-05", "browsers": { "chrome": "May 2026 Baseline digest source", "edge": "May 2026 Baseline digest source", "firefox": "May 2026 Baseline digest source", "safari": "May 2026 Baseline digest source" }, "replaces": "Prop drilling or theme class duplication for some component state variants", "snippet": ".card-grid { container-name: cards; --density: compact; }\n@container cards style(--density: compact) { .card { padding: .75rem; } }", "fallback": "Keep the base class usable without the query, and add explicit modifier classes for older browsers.", "toolSlugs": [ "brand-kit", "css-gradient", "css-shadow" ], "sourceLabel": "web.dev: Baseline monthly digest, May 2026", "source": "https://web.dev/blog/baseline-digest-may-2026", "secondarySources": [ { "label": "MDN: Container size and style queries", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries" } ], "lastChecked": "2026-06-29", "confidence": "medium - official monthly digest source found; staged until exact support table is rechecked", "verified": false }, { "slug": "image-rendering-baseline-may-2026", "feature": "image-rendering", "title": "image-rendering was included in the May 2026 Baseline digest", "summary": "The image-rendering property controls how scaled images are sampled. It is useful for pixel-art previews, low-resolution placeholders, and crisp generated assets, but support behavior and visual quality should still be tested in target browsers.", "status": "newly-available", "baselineMonth": "2026-05", "browsers": { "chrome": "May 2026 Baseline digest source", "edge": "May 2026 Baseline digest source", "firefox": "May 2026 Baseline digest source", "safari": "May 2026 Baseline digest source" }, "replaces": "Canvas-only scaling workarounds for some pixel-perfect preview surfaces", "snippet": ".pixel-preview { image-rendering: pixelated; width: 320px; height: 320px; object-fit: contain; }", "fallback": "Keep the original asset dimensions available and avoid relying on one scaling mode for readability.", "toolSlugs": [ "placeholder", "og-image", "code-to-image" ], "sourceLabel": "web.dev: Baseline monthly digest, May 2026", "source": "https://web.dev/blog/baseline-digest-may-2026", "secondarySources": [ { "label": "MDN: image-rendering", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering" } ], "lastChecked": "2026-06-29", "confidence": "medium - official monthly digest source found; visual behavior still needs browser QA", "verified": false } ], "attribution": { "text": "CSS Baseline 2026 change log by Shape Cat", "url": "https://shapecat.com/css-changes", "siteUrl": "https://shapecat.com" }, "changeCount": 6, "generatedAt": "2026-06-29" }