Post

THIS COMMON CSS FEATURE TANKS YOUR PERFORMANCE!!1!1! Ok, how was that for a flamebait headline? For real, though, let's talk about `@property` Do you lazy load content to improve performance? Did you know that, if your lazily-loaded CSS includes `@property`, you're causing a full dom restyle?

If you have a large DOM / heavy content / lots of features running when that happens, that can really hurt. So, what if we could have a non-global `@property` at-rule to limit the restyling to just what was loaded? frehner.me/blog/non-glo... THIS IS NOT "SCOPED" `@property`!

I don't want to change how CSS Custom Properties cascade; I don't want to "stop" the value cascade at a certain point. Don't bring the word "scope" into this! haha. I just want a non-global `@property`, that only applies to a selector, and that doesn't cause a full DOM restyle when loaded.

Thoughts? Reactions? Also, I included a whole section of references, because there has been a lot of talk about "scoped" CSS vars, and why they can't work. And I wanted to be clear that this proposal isn't that. Haha.

Ship it. We really need to better flag these footguns.

Yeah! I’ll post an issue in the CSSWG repo soon; just wanted to see if I was crazy and/or if people would still think this can’t be shipped because of the previous “scoped” discussions