Tagged: css

Posted on Wednesday, 17 Sept 2025
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 */ }
More about this
Posted on Wednesday, 13 Aug 2025
I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:
index.html
<style> :root { --theme: blue; } </style> <meta name="theme-color" content="var(--theme)" />
I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.
More about this
Posted on Friday, 19 Jan 2024
Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.
<a href="https://example.com">Example</a>
a { text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */ text-underline-offset: 16px; /* Only impacts underline */ }
More about this