Design system · Component review 31

Feature support

The Guide explains compatibility in context. A small Design System label can additionally report whether this browser parses a specific CSS feature query, while the adjacent example retains its real fallback.

The refined shared support label is adopted. The Compatibility Guide keeps its original guidance.

Support treatments

The second query is intentionally unsupported. Compare the text and marker in light and dark modes; the status is based on the current browser, not a server guess.

01

Original Guide

Support explained in prose

Browser support depends on the final property, value, selector, at-rule, or platform feature. Check the feature and keep a fallback when the target browser may not support it.

The Compatibility Guide explains that feature support comes from the generated CSS and advises a fallback for target browsers. That guidance remains the source of truth.

02

Current

Browser syntax status

(field-sizing: content)Checking this browser…

(not-a-css-property: value)Checking this browser…

The live status tests CSS.supports in this browser. It reports syntax recognition, not that an entire interaction or platform behavior works.

03

Adopted

Compact status with explicit signal

(field-sizing: content)Checking this browser…

(not-a-css-property: value)Checking this browser…

The syntax stays readable, while a small status marker and steadier spacing distinguish recognized and unsupported queries without relying on color alone.

Actual Guide example

A native property example uses the Guide rule: generated CSS is useful only when the target browser supports it.

Open /guide/compatibility
HTML
<label for="project-note" class="block mb-xs text-sm font-medium">Project note</label><textarea id="project-note" rows="3"  class="block field-sizing:content min-w:0 max-w:100% w:100%         min-h:6rem max-h:12rem p-sm b:1px|solid|var(--color-line-base) r-sm         surface-raised text-body font:inherit resize:vertical         outline:2px|solid|var(--color-blue):focus-visible outline-offset:2px:focus-visible"  aria-describedby="note-help">Keep the interaction close to its context.</textarea><p id="note-help" class="mt-xs mb:0 text-xs text-muted">Add a few lines to try content-based sizing.</p>
A field that follows its content
The textarea uses native field-sizing. Minimum and maximum heights bound the enhancement; unsupported browsers retain a usable field.
Generated CSS
@layer theme {  :root,  :host {    --spacing-xs: .5rem;    --font-size-sm: .875rem;    --font-weight-medium: 500;    --spacing-sm: .75rem;    --color-line-base: oklch(0% 0 none / .12);    --radius-sm: .25rem;    --color-surface-raised: oklch(100% 0 none);    --color-gray-90: oklch(23.5% 0 none);    --color-text-body: var(--color-neutral-70);    --color-neutral-70: oklch(39% .024 273);    --color-gray-30: oklch(73.5% 0 none);    --color-blue: var(--color-blue-60);    --color-blue-60: oklch(51.83% .2687 266.1);    --color-blue-50: oklch(58.22% .2279 263.9);    --font-size-xs: .75rem;    --color-text-muted: var(--color-neutral-60);    --color-neutral-60: oklch(48% .028 273);    --color-gray-40: oklch(65% 0 none)  }  @media (prefers-color-scheme:light) {    :root {      --color-line-base: oklch(0% 0 none / .12);      --color-surface-raised: oklch(100% 0 none);      --color-text-body: var(--color-neutral-70);      --color-blue: var(--color-blue-60);      --color-text-muted: var(--color-neutral-60)    }  }  @media (prefers-color-scheme:light) {    :host {      --color-line-base: oklch(0% 0 none / .12);      --color-surface-raised: oklch(100% 0 none);      --color-text-body: var(--color-neutral-70);      --color-blue: var(--color-blue-60);      --color-text-muted: var(--color-neutral-60)    }  }  @media (prefers-color-scheme:dark) {    :root {      --color-line-base: oklch(100% 0 none / .12);      --color-surface-raised: var(--color-gray-90);      --color-text-body: var(--color-gray-30);      --color-blue: var(--color-blue-50);      --color-text-muted: var(--color-gray-40)    }  }  @media (prefers-color-scheme:dark) {    :host {      --color-line-base: oklch(100% 0 none / .12);      --color-surface-raised: var(--color-gray-90);      --color-text-body: var(--color-gray-30);      --color-blue: var(--color-blue-50);      --color-text-muted: var(--color-gray-40)    }  }}@layer utilities {  .block {    display: block  }  .r-sm {    border-radius: var(--radius-sm)  }  .text-sm {    font-size: var(--font-size-sm);    line-height: max(1.8em - max(0rem, var(--font-size-sm) - 1rem) * 1.12, var(--font-size-sm));    letter-spacing: clamp(-.072em, calc((var(--font-size-sm) - 1rem) * -.048), 0em)  }  .text-xs {    font-size: var(--font-size-xs);    line-height: max(1.8em - max(0rem, var(--font-size-xs) - 1rem) * 1.12, var(--font-size-xs));    letter-spacing: clamp(-.072em, calc((var(--font-size-xs) - 1rem) * -.048), 0em)  }  .p-sm {    padding: var(--spacing-sm)  }  .b\:1px\|solid\|var\(--color-line-base\) {    border: 1px solid var(--color-line-base)  }  .font\:inherit {    font: inherit  }  .surface-raised {    background-color: var(--color-surface-raised)  }  .text-body {    color: var(--color-text-body)  }  .text-muted {    color: var(--color-text-muted)  }  .font-medium {    font-weight: var(--font-weight-medium)  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .mt-xs {    margin-top: var(--spacing-xs)  }  .field-sizing\:content {    field-sizing: content  }  .mb\:0 {    margin-bottom: 0  }  .max-h\:12rem {    max-height: 12rem  }  .max-w\:100\% {    max-width: 100%  }  .min-h\:6rem {    min-height: 6rem  }  .min-w\:0 {    min-width: 0  }  .resize\:vertical {    resize: vertical  }  .w\:100\% {    width: 100%  }  .outline\:2px\|solid\|var\(--color-blue\)\:focus-visible:focus-visible {    outline: 2px solid var(--color-blue)  }  .outline-offset\:2px\:focus-visible:focus-visible {    outline-offset: 2px  }}

This preview uses the same field-sizing example as the Design System. The Compatibility Guide keeps its original prose and generated-CSS explanation.