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.

This would help wonderfully with lazy loading content via your framework of choice (e.g. React.lazy), and/or HTML's new `<template for="">` "out-of-order patching", etc etc I just want teams to own their own `@property` at-rules, lazy load them, and not affect the rest of the page when doing so.

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

I believe github.com/w3c/csswg-dr... is the issue you are looking for.