demo · v131
Data Table Unit Labels
A registered syntax: "<string>" custom property drives unit labels in a
performance-metrics table. Labels propagate down every column via CSS inheritance — no
JavaScript required for rendering. Switching the view updates --unit-label on the
column header; every cell in that column reflects the change automatically.
Web Performance Metrics — Core Web Vitals
| Page | LCP | CLS | FCP | TTFB |
|---|
--unit-label is set on each <th class="metric-col">.
Because inherits: true, every <td> in the same column
inherits the value and its ::after pseudo-element renders
content: var(--unit-label) automatically.
the code
/* Register a typed string property with a blank initial value */
@property --unit-label {
syntax: "<string>";
inherits: true;
initial-value: "";
}
/* Set the label on each column header — cells inherit it */
.metric-col[data-col="lcp"] { --unit-label: " s"; }
.metric-col[data-col="cls"] { --unit-label: ""; }
.metric-col[data-col="fcp"] { --unit-label: " s"; }
.metric-col[data-col="ttfb"] { --unit-label: " ms"; }
/* Every cell in the column picks it up via inheritance */
.data-cell::after {
content: var(--unit-label);
font-size: 0.7em;
color: var(--text-muted);
margin-left: 0.1em;
}
/* View toggle: override all columns at once via a class on the table */
.data-table.view-no-units .metric-col { --unit-label: ""; }
.data-table.view-percent .metric-col { --unit-label: "%"; }
/* Per-column override: JS sets the inline style on the <th> only */
th.style.setProperty('--unit-label', JSON.stringify(newLabel));
/* Removing it restores the stylesheet rule */
th.style.removeProperty('--unit-label');