you didnt talk about how it benefits transitions. because normally you cant transition custom properties because browser doesnt know the type of it, so it cant know how to transition it but with @property we can transition the custom properties.
Can the `syntax` inside property be a variable? If so, could you potentially have all your color variables and then create a variable that is essentially an enum and dev can only select one of those options?
Feels like a solution looking for a problem. What does this solve? Someone constantly assigning px values to color variables? The only value I can see here is that maybe I can bill more hours because I had to make the CSS type-safe. Or maybe I can finally win that award for Most Overly Complex CSS.
That is true for most of framworks and libraries in these days. Instead of improving existing ones to solve new problems, a new one will be created and become must have skill to learn. It's crazy
By default browsers only knows css values as string, which make it disables behaviours like transitions for some stuff like gradient. Assigning it to the correct type allow browser to animate those by assigning the typed custom properties instead. That is the basic stuff this feature enables. More advanced use case would be usage of inside worklet to hack into low-level CSS engine with CSS Houdini so devs can author their own CSS styles that can be configured with CSS variables.
Honestly it seems like a solution that no body really needed, I would rather put some safety rules on properties like color, fontsize etc to not to accept raw values but to only accept variables. Not related to type safety but would be a great-kind-of-contextual solution
Oh my... Web development truly has gone ludicrously stupid. CSS is "fairly" strong typed. You have a property (color) which can have a defined set of values. But no, people wanted variables to "clean up" redundant css and reuse. And yes, for big css files it does look better with variables. And it might even be vital for themes. Now people want those variables to have that same strong type as CSS has without variables. So lets pollute the CSS with more garbage to have strong typed properties. And why? Because devs apparently make mistakes and fill in the wrong type (like pixels) where a color is intended...Thus this type safety is __ONLY__ a developer aid. It serves __NO__ purpose when you visit your site. Next i suppose we're gonna get "css debug symbols" akin to .map files for js. A file describing the property strong types. If you want to have a "typescript for css" (which this essentially is going to boil down to) then just cram this bs into SCSS and leave it out of the plain CSS files. If you have those dreaded .map files your browser already shows you the scss files so just go that route if you like added complexity. End of my rant...
Maybe before before spouting so much bs learn a little about the thing you shiting about? @property has been there for a while along with other new low-level CSS features like houdini, paint API, etc for years now. If you think this feature is merely for type safety that serve no purpose whatsoever only shows how informed you are about the topic you are talking about.
@@SardenR Thank you for pointing me to that! Years means nothing for a feature to get standardized and usable everywhere, which is what this "@property" is about. Reg. houdini and paint api. I looked into it. It ties CSS and js even more, the exact opposite of what i want. It makes it even worse then i thought.
@@markg5891 it doesn't mean anything that it is the exact opposite of what you want because many people have been waiting and watching the progress for about 4 years now. Many people including me would like the ability to hack into low level engine of CSS with houdini features and worklet, @property is one of the foundation being worked upon to achieve that and just because you don't like it won't make it less important to the rest of us.
Browsers are adding the most random stuff to CSS without fixing basic stuff really annoys people, mainly that when doing complex layout stuff everything behaves in a so unpredicatably.
says so much, please don't make him change? like he is real-time explaining with expression/s and passion. (focus on the code) const result = shakeDetected ? (goodContent && tested && knowledgeable ? "❤ Love it: the shake is perfect, priceless, don't ever change!" : "⚠ Shake detected, but needs some refinement.") : "🤔 No shake or unclear movement, let's work on it."; and he shows us, what is good if he believes in it, does it work, can he stand by it etc... cheers. much love!
you didnt talk about how it benefits transitions.
because normally you cant transition custom properties because browser doesnt know the type of it, so it cant know how to transition it
but with @property we can transition the custom properties.
That is a great point!
Can you give an example or what to look up to understand this? I don't know what's meant with custom property transitions but I'm interested to know
The only use of this @propeties I see is the ability to transitions of custome property
Thats the reason I’ve been waiting for it.
Can the `syntax` inside property be a variable? If so, could you potentially have all your color variables and then create a variable that is essentially an enum and dev can only select one of those options?
Feels like CSS didn't really need this feature.
Feels like a solution looking for a problem. What does this solve? Someone constantly assigning px values to color variables? The only value I can see here is that maybe I can bill more hours because I had to make the CSS type-safe. Or maybe I can finally win that award for Most Overly Complex CSS.
That is true for most of framworks and libraries in these days. Instead of improving existing ones to solve new problems, a new one will be created and become must have skill to learn. It's crazy
By default browsers only knows css values as string, which make it disables behaviours like transitions for some stuff like gradient. Assigning it to the correct type allow browser to animate those by assigning the typed custom properties instead. That is the basic stuff this feature enables. More advanced use case would be usage of inside worklet to hack into low-level CSS engine with CSS Houdini so devs can author their own CSS styles that can be configured with CSS variables.
Congrats, you just discovered the purpose of TS🎉
I didn't notice this was added to Firefox in v128.0 (Jul 9th)
Now only Paint API and Typed OM left to catch-up to the other browsers.
Honestly it seems like a solution that no body really needed, I would rather put some safety rules on properties like color, fontsize etc to not to accept raw values but to only accept variables. Not related to type safety but would be a great-kind-of-contextual solution
Oh my... Web development truly has gone ludicrously stupid. CSS is "fairly" strong typed. You have a property (color) which can have a defined set of values.
But no, people wanted variables to "clean up" redundant css and reuse. And yes, for big css files it does look better with variables. And it might even be vital for themes.
Now people want those variables to have that same strong type as CSS has without variables.
So lets pollute the CSS with more garbage to have strong typed properties.
And why? Because devs apparently make mistakes and fill in the wrong type (like pixels) where a color is intended...Thus this type safety is __ONLY__ a developer aid. It serves __NO__ purpose when you visit your site.
Next i suppose we're gonna get "css debug symbols" akin to .map files for js. A file describing the property strong types.
If you want to have a "typescript for css" (which this essentially is going to boil down to) then just cram this bs into SCSS and leave it out of the plain CSS files. If you have those dreaded .map files your browser already shows you the scss files so just go that route if you like added complexity.
End of my rant...
Yeah, this is a high level of stupidity...
Maybe before before spouting so much bs learn a little about the thing you shiting about? @property has been there for a while along with other new low-level CSS features like houdini, paint API, etc for years now. If you think this feature is merely for type safety that serve no purpose whatsoever only shows how informed you are about the topic you are talking about.
@@SardenR Thank you for pointing me to that! Years means nothing for a feature to get standardized and usable everywhere, which is what this "@property" is about. Reg. houdini and paint api. I looked into it. It ties CSS and js even more, the exact opposite of what i want. It makes it even worse then i thought.
@@markg5891 it doesn't mean anything that it is the exact opposite of what you want because many people have been waiting and watching the progress for about 4 years now. Many people including me would like the ability to hack into low level engine of CSS with houdini features and worklet, @property is one of the foundation being worked upon to achieve that and just because you don't like it won't make it less important to the rest of us.
Browsers are adding the most random stuff to CSS without fixing basic stuff really annoys people, mainly that when doing complex layout stuff everything behaves in a so unpredicatably.
For example? What's some basic stuff that needs fixing
Curious as well
This is part of the CSS Houdini Properties and Values API Level 1
ua-cam.com/video/sPbpElWAJ68/v-deo.html
Is there a shorthand for this?
VERY cool!
Except css rules have always had a specific type of value you can use.
.
WoW WoW that's a good feature for real 🎉
Wow
im early, yey✨
Bullshit
Feel sad for people still prefer unmaintainable css over tailwindcss
Feel worse for people that still believe class based frameworks like tailwind for CSS is actually understanding CSS
Can you stop shaking your head so often?
?
Can you shut up and just learn?
Stop watching his videos if that irritates you. It's the audacity for me
says so much, please don't make him change? like he is real-time explaining with expression/s and passion. (focus on the code) const result = shakeDetected ? (goodContent && tested && knowledgeable ? "❤ Love it: the shake is perfect, priceless, don't ever change!" : "⚠ Shake detected, but needs some refinement.") : "🤔 No shake or unclear movement, let's work on it."; and he shows us, what is good if he believes in it, does it work, can he stand by it etc... cheers. much love!
what did I learn, use tailwind lol, hope this is taken good, what I say. meaning this is good, love it everything about this channel, cheers.
HTML, CSS alway a shit in never be a improved 😊