17 Sept 2025, 8:31 am IST - Notes

Ana Tudor wrote on Mastodon:

Stupid #CSS question because I’m losing my mind here: why isn’t calc(.5*a) working? What am I missing? It doesn’t seem to be working in any browser.

Ana is trying to use calc(.5 * a) as a part of the relative color syntax, presumably to create semi transparent outlines. But it is not working because calc(.5 * a) is an invalid property value. As Valtteri Laitinen replied, it should actually be alpha in there instead of a.

.class {
  outline-color: rgb(from currentcolor r g b / calc(0.5 * a)); /* ❌ invalid */
  outline-color: rgb(
    from currentcolor r g b / calc(0.5 * alpha)
  ); /* ✅ valid */
}