#cssGotcha `:has()` cannot be nested!

From the spec: `:has()` is not valid within `:has()`.

#CSS #gotcha #code #coding #frontend #webDev #dev #web #webDevelopment #cssSelector

#CSS gotcha: if you set a list of gradient stops on an element:
.a { --l: var(--c0), var(--c1) }

... and expect to be able to get *a different gradient* if you just modify --c0 & --c1 on its .b children... I have bad news.😾

You need to set:
.a, .b { --l: var(--c0), var(--c1) }

Live demo on @codepen
https://codepen.io/thebabydino/pen/rNEpbJK?editors=1100

Particularly annoying when that gradient is used on tens of various children. 😿

#cssVariable #gotcha #cssGotcha #code #coding #fronten #web #webDev #dev #webDevelopment

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#maths #mathematics #cssMaths #trigonometry #gotcha #cssGotcha #code #coding #frontend #webDev #web #dev #webDevelopment #houdini #cssVariables #customProperties #cssFunction