@simevidas it's a demo to illustrate the input, you can easily add any text inside the label as a label. It's irrelevant to the demo so I didn't do it.
I don't understand why CSS is so verbose sometimes. Why couldn't I just do: color: --brand-red;
???
Why do I need to surround every use of it with var(...)? Wasn't the double-dash prefix was specifically chosen to not clash with any existing or future properties?
It's always so frustrating writing CSS. Especially compared to all the structure, abstractions, and terseness that programming languages offer.
@peterreeves not sure what you mean by shadowing but I am allowed to "name" a keyframes using --var and at the same time define a "custom property" --var. Two different things.
Your example is equivalent but with a different naming for the keyframes.
The browser need to know how to parse a "name" and a "variable".
Same logic with calculation. If we consider simple use cases, writing height: 3 * 10px should be valid but no, we need calc(3 * 10px) for the browser to know it's a calculation
Why in JS we need to place a string between quotes? it's much better to be able to write var x = I am a string;
You probably don't know all the mechanism of CSS but the introduction of var(), calc(), etc is a not random decision to make things look complex. There is a whole community debating, discussing before defining such features.
I've placed a disc made with a radial-gradient on the top of its container…but it's not actually at the top, there are a few pixels, any idea where it's come from?
I may be stupid but It drives me crazy 😒
I would say it depends on the percentage reference. In some cases, we cannot resolve the percentage so the 100% will fall to auto and you can see a different behavior.
I am sincerely wondering how hard it is to style a #HTML checkbox using #CSS. I'd be happy with just aligning them with a label, but this already seems to be asking for a lot. And most answers I find online are already outdated...