Container Style Variant Card

A card whose accent color and badge react to a plain custom property on its own wrapper — no JS, no className map, no per-variant component — using CSS container **style** queries: `@container <name> style(--tone: sale){ ... }`. A CMS or template only ever has to set one inline custom property (`style="--tone: sale"`) on the slot wrapping the card; the card's own CSS decides what 'sale' or 'new' looks like. This is the same job the `if()`/`style()` entry in this catalog ('Conditional Status Badge') does for a value on the element itself, but style queries solve the more common real case — a value set on an ANCESTOR, read by its descendants — which `if()`'s self-referencing style query cannot do. **Verified while building this (not shipped on a guess):** a style-query container can only be queried from an element's ancestor, never from the exact same element carrying the custom property — confirmed against the CSS WG's own container-queries spec discussion and MDN's 'Using container size and style queries' guide, which both state plainly that a container currently cannot select itself; a wrapper (`.csv-slot`, `container-type: normal; container-name: csv-slot`) is required around the card for this reason, same structure this demo actually ships. **Real, current, cross-checked support** (not a single-source guess): Chrome/Edge shipped style queries for custom properties from Chrome 111 and Safari from 18 (both per caniuse's `css-container-queries-style` table); Firefox was the last to land it — Mozilla's own Bugzilla bug 2030645 ('Enable container style queries on all channels') is RESOLVED FIXED for Firefox 151, and Firefox 151.0.2/.3 shipped to the stable channel in late May/early June 2026 (per MDN's Firefox 151 release notes and Mozilla's release history) — so all three engines have genuinely carried this in a stable release since around mid-2026, not merely 'on a roadmap'. Treated two SEO-style '2026 tutorial' blog posts that claimed different, suspiciously rounder version numbers (a 'Chrome 148 / Safari 26.5 / Firefox 138' story) as unverified and did not use them — Bugzilla and MDN's own release notes are the primary sources here, and they disagree with that story. **Honest fallback:** a browser that doesn't parse `style()` inside `@container` simply drops that whole conditional block as invalid and keeps the card's plain default styling underneath — same cascade-based safety net as every `if()`/`@container`/`@supports`-guarded entry in this catalog, never a broken or blank card. No WebGL, no scroll-jacking, no router — fits the DIY $999 tier as cleanly as it fits here. (Vanilla example: live iframe preview + HTML/CSS tabs, three card slots side by side — only their wrapper's `--tone` value differs.)

<div class="csv-grid">
  <div class="csv-slot" style="--tone: sale">
    <article class="csv-card">
      <span class="csv-badge">Sale</span>
      <h3 class="csv-title">Trail Runner</h3>
      <p class="csv-price">$89</p>
    </article>
  </div>
  <div class="csv-slot" style="--tone: new">
    <article class="csv-card">
      <span class="csv-badge">New</span>
      <h3 class="csv-title">Studio Hoodie</h3>
      <p class="csv-price">$64</p>
    </article>
  </div>
  <div class="csv-slot">
    <article class="csv-card">
      <span class="csv-badge">—</span>
      <h3 class="csv-title">Everyday Tee</h3>
      <p class="csv-price">$28</p>
    </article>
  </div>
</div>