Pisandelli Comments - Answer Overflow

I always used :root... but with @property I can have more control over properties types, etc... It was not clear to me if I can use it instead of :root without having any downside

61 replies

KPCKevin Powell - Community

•Created by Pisandelli on 1/27/2025 in #front-end

CSS @property or :root?

I'm using JS and wanna create CSS file for a web app theme. The thing is change the theme using design tokens. Drop the token in a folder, and during the app building we read the token and generate the theme.

61 replies

KPCKevin Powell - Community

•Created by Pisandelli on 1/27/2025 in #front-end

CSS @property or :root?

I'm building a Design token parser (it will be part of another project). My idea was create a defaults.css with the CSS variables. These variables would be used for theme the app. I used to create this file using root.

:root {
--color-primary: blue;
--color-secondary: red;
}

:root {
--color-primary: blue;
--color-secondary: red;
}

Now I was wondering if I can create the same thing with more deep control using @property

@property --color-primary {
    syntax: '<color>';
    inherits: false;
    initial-value: blue;
  }


@property --color-secondary {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
  }

@property --color-primary {
    syntax: '<color>';
    inherits: false;
    initial-value: blue;
  }


@property --color-secondary {
    syntax: '<color>';
    inherits: false;
    initial-value: red;
  }

61 replies

KPCKevin Powell - Community

•Created by Pisandelli on 1/27/2025 in #front-end

CSS @property or :root?

And using @property I can animate gradient as well.. So I have good features

61 replies

KPCKevin Powell - Community

•Created by Pisandelli on 1/27/2025 in #front-end

CSS @property or :root?

No problem using a global CSS using only @property instead of :root...

61 replies

Gaming

Programming