v157 · css · alignment · migration
Serialization contract
The aliasing cuts both ways: once these keywords ship, either spelling serializes as flow-start/flow-end — including in getComputedStyle. Code that does style.justifyContent === "flex-start" silently stops matching. This page round-trips every spelling through the CSSOM in your browser and runs the audit that finds the comparisons at risk.
Probing this browser…
CSSOM round-trip, live
| assigned via setProperty | specified reads back | computed reads back | verdict |
|---|
The audit your codebase needs
This button scans a small sample “legacy component” (inline script on this page, visible below) the way you would scan a real codebase: it evaluates each equality check against both serialization regimes and reports which ones break.
Not run yet.
the contract, and the fix
el.style.justifyContent = "flex-start";
el.style.justifyContent;
// pre-157: "flex-start"
// post: "flow-start" ← the breaking read
// brittle:
if (getComputedStyle(el).justifyContent === "flex-start") { … }
// robust across the transition:
const v = getComputedStyle(el).justifyContent;
if (v === "flex-start" || v === "flow-start") { … }
// or test behaviour, not strings:
if (CSS.supports("justify-content", "flow-start")) { /* new regime */ }