v154 · font-width

Writing for both

Two names for one property means declaration order decides the winner in browsers that understand both, and which name survives in browsers that understand one. Three orderings, measured — the answer is not the one people reach for first.

Three orderings, measured

Press the button.

A detection helper

// Which name does this browser understand? Ask the parser, then confirm
// with the computed style — a value can parse and still not take effect.
function fontWidthProperty() {
  if (!CSS.supports("font-width", "75%")) return "font-stretch";
  const probe = document.createElement("span");
  probe.style.cssText = "position:absolute;visibility:hidden";
  probe.style.setProperty("font-width", "75%");
  document.body.append(probe);
  const applied = getComputedStyle(probe).fontStretch === "75%";
  probe.remove();
  return applied ? "font-width" : "font-stretch";
}

Running it here right now returns: …

For the object model the same idea applies: "width" in FontFace.prototype is not enough, because an unknown property assignment on a FontFace silently becomes an ordinary expando that nothing reads. Write it and read the other name back.

Result of that check here: …

see also