demo · v131

typed string property for generated content

Before v131, a CSS variable containing a string had no type — you could write garbage into it and CSS would shrug. Registering with syntax: "<string>" gives you a real typed slot: invalid assignments revert to the initial value, and the property animates through discrete strings. The classic use: badge labels generated through content:.

swap badges in pure CSS

WebGPU

Render and compute via the GPU.

Compute Pressure

Adapt to system load.

Sanitizer API

Safe HTML insertion.

Battery Status

Removed for privacy reasons.

custom badge via input

your component

The badge above this card is generated from the typed string variable. Without quotes the assignment becomes invalid and the property reverts.

typed vs untyped revert

typed: invalid reverts

typed

Wrote a number to a <string> — reverted to "preview".

untyped (no @property): no guard

untyped

Without registration, the number leaks into content and breaks.

the api

@property --tier-label {
  syntax: "<string>";
  inherits: false;
  initial-value: "preview";
}

.tier-stable { --tier-label: "stable"; }
.card::after { content: var(--tier-label); }