CSS @property or :root?
Could/Should I use
@property indistinctly from declaring CSS variables using :root?
Is there any downside to using only @property?
Thanks in advance! 👍39 Replies
both have different uses and different support
with
@property, you can drill a bit deeper and set a syntax and a type for the custom property
you can't do that with variablesGot it. So there's no such thing like "It's better to use @property for 'this kind of scenario' and :root for 'that kind'...", right? The choice is totally up to me.
If I want more control over my variables
@property is a good option... if I wanna something more simple, :root is fine. At the end the result will be the same.
Thanks @ἔρωςthere are things you cant do with just
--xyeah
I'm aware
thats just the difference
My concern was just if I can use @property the same way I used :root
by the way, if you add a variable to
:root, you should also add to ::backdrop as well
you can use bothtrue
you can do
:root { --x: 5; }
and have a @property for the same --xNo problem using a global CSS using only @property instead of :root...
nope, you dont even need the
@property if you set a default valueAnd using @property I can animate gradient as well.. So I have good features
i think you can without it too
but never tried to animate gradients
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.
Now I was wondering if I can create the same thing with more deep control using @property
you can, but reading that will require a state machine, while the first version wont
which backend language are you using to generate the css files?
also, why are you trying to read from a css file?
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.
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 downsidethe only downside is the browser support
hum
if im not mistaken, some devices still supported by apple may have an ios version that is too old
Modern browsers only
people skip updating ios because it tends to absolutely butcher the performance of older devices
and the first versions tend to be really buggy
Oh I see
This is trully something to be on radar
firefox also only got support for it in july
Well I think I'll be doing more tests!!
Thanks @ἔρως
you should test with firefox esr
I use Firefox
Chrome is not my default
that's still on 126 while the
@property came in 128huuum
esr is different from the main line version
good point
esr is the extended support release, which gets updates for a long time
and im not sure if it gets feature updates
if i were you, i would just have the variables in a json file, and then you generate the css from it
Firefox is on v134
and the theme could have a json file or a special comment or variable with the json embed, if you dont like separated files
thats the main release, not the esr release
yes is a good idea
it's a lot easier too
you can just do
import 'file.json' as theme; and it should workyep!
or you have to use
import() or something
i know it works amazinglyI'll give it a try
Thakns for the tip!
you're welcome
by the way, store a version indicator in the file
you will thank me for that