@property Is One Of The Coolest New CSS Features

[@nomadshiba]

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.

[@WebDevSimplified]

That is a great point!

[@thewhite8782]

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

[@Olympix_]

@@WebDevSimplified I watch you from Uzbekistan! You are really increadible Developer But i wanted to ask you creating a carousel(swiper) in react-js with all components like:text, image, links(Not only with images) please Wait your respond

[@w01dnick]

@@thewhite8782 e.g. you have linear-gradient for button and want make a transition to another gradient on hover. It's a background image, which is discrete property, so it wouldn't transitioned, just immediate switch from one state to another. To overcome this you can create CSS variables --bg-top and --bg-bottom and use them in linear gradient. But browser doesn't know that they are colors, so it would transition them too. But with `@property` you can define them as '' and then gradient would be transitioned as desired.

[@w01dnick]

@@thewhite8782 e.g. you have linear-gradient for button and want make a transition to another gradient on hover. It's a background image, which is discrete property, so it wouldn't transitioned, just immediate switch from one state to another. To overcome this you can create CSS variables --bg-top and --bg-bottom and use them in linear gradient. But browser doesn't know that they are colors, so it would transition them too. But with `@property` you can define them as '' and then gradient would be transitioned as desired.

[@nwfashionmedia]

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.

[@radhy9173]

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.

[@andreybogdanov3]

Congrats, you just discovered the purpose of TS🎉

[@ChadElliott_THEtheChad]

In addition to informing the browser what the variable type is so it can properly transition the value during an animation (something not covered in this video), it enables inheritance, default values, and helps enforce the usage of proper values, making it less likely to introduce inconsistencies or bugs. I would also like to note that it's opt in, and you can add types to existing variables at your discretion. Have a normal stylesheet and notice your Jr devs are constantly mangling a poorly named variable? You could simply add a type def for that variable and put some guard rails around it.

[@Microphunktv-jb3kj]

.... seems like useful for the css lib authors. how many of actually have used vanilla css lately , instead of eg tailwind and others? :D

[@nwfashionmedia]

@@Microphunktv-jb3kj I switched back to "vanilla CSS" a while ago. I prefer dealing with as few pre-processors/transpilers as possible. I used to use LESS, then SASS/SCSS, but in my recent work I haven't missed them.

[@morrowr08]

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?

[@sirajmussafirr147]

Yes, @property --box-color { syntax: "red | green"; inherits: false; initial-value: red; } .box { width: 200px; height: 200px; background-color: var(--box-color); } .box-2 { --box-color: blue; }

[@damiandamianowski8569]

Great, From now every web developer can fix what web browser should do automaticly. Great for you w3c!

[@injSrc]

The only use of this @propeties I see is the ability to transitions of custome property

[@mikescholz6429]

Thats the reason I’ve been waiting for it.

[@franzitaz]

In this video was not understanding the purpose of this @property. For someone that didn't understand: One of the use cases is to solve problems of animations in CSS. The best example of him is using @property in this video, in my opinion: kzbin.info/www/bejne/qYHFoXiijKZ9bJosi=NLNEMniA19ehiDV4&t=223 PS: I think that they could make the syntax simpler as well. But I imagine that it was the best that maybe they could implement. /*Instead of:*/ @property --scale { syntax: ""; inherits: false; initial-value: 1; } /****************************/ /*Something like without the and inherits as optional:*/ @property --scale { syntax: "number"; initial-value: 1; }

[@edmasi]

Gracias!

[@GilGoldshlager]

Cool feature, thanks 👍

[@Jumanji_Dev]

CSS becoming TypeScript 🤨Daaaamnnn 🙃

[@kamaboko1]

:root {} has been working well for years. Not sure how this TypeScript styled "solution?" is better.

[@youcefg9760]

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.

[@4120_PRATIKRATHOD]

It's been a long time I'm using it for animations

[@geforcesong]

excellent!!

[@ErikErosa]

Sounds interesting but… "Errors should never pass silently unless explicitly silenced" so I'm not convinced. Thanks for the info, though!

[@soushi8885]

Next step : Typed HTML !

[@AndrewTSq]

Half of internets webpages would stop working then lol

[@LatenightDev]

This will make future frontend dev more confused to figure out that custom property. Imagine it was named with spanish or latin words.

[@youcefg9760]

This is part of the CSS Houdini Properties and Values API Level 1 kzbin.info/www/bejne/qYHFoXiijKZ9bJo

[@tima1301]

💛💙

[@the-iter8]

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

[@tommysmith5479]

You keep saying "custom properties" - do you mean variables?

[@otaviocf4657]

the official documentation calls it custom properties

[@tommysmith5479]

@@otaviocf4657 Ok - I just wanted clarification: so custom properties are variables - var()?

[@Oskinavara]

@@tommysmith5479 yes

[@tommysmith5479]

@@Oskinavara Thanks all. That's rather confusing!

[@OneHundy]

Is there a shorthand for this?

[@davidcrowell3041]

Why?

[@IlyesCodes]

Best question to ask, why the heck do we need type checking for a stylesheet

[@rodrigolaporte274]

VERY cool!

[@anothermouth7077]

Another thing to be demanded by the recruiters which serves no purpose 😂

[@adamstuartclark]

Feels like CSS didn't really need this feature.

[@nEMOheartTaco]

Back when I was focused on building CSS frameworks and component libraries, this would have been really helpful. I think it just depends on your use-case.

[@LatenightDev]

@@nEMOheartTaco We already have root property, why you want to named your own property and become hard to understand for everyone ?

[@noggstaj]

durrrrrp

[@markg5891]

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...

[@linela]

Yeah, this is a high level of stupidity...

[@SardenR]

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.

[@markg5891]

@@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.

[@radhy9173]

​@@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.

[@dariantrama2591]

Maybe include a real world useful example for why this is actually helpful? I see in the comments that this could be helpful for transitions or animations but aside from that this just seems like over complicating CSS for little to no reason. I can control the colors of my divs just fine without it!

[@hishamelfangary722]

No. Stop. Just stop.

[@gomesbruno201]

css had only one job: copy sass. they did it wrong

[@MrJloa]

Over engineering 👍 Solves imaginary problem yey

[@IlyesCodes]

This is really a headache to think about, i dont see a reason to add type checking to css it is just a styling language. Next step HTML type checking

[@FalioV]

No tnx. I dont see how this will benefit me at all. I prefer to use out of the box UI library and style the components and put more effort in more complex part of the app then the visual looking. Those features will remain unusable (as many out there) for big part of the developers. Other then that interesting topic and good video as always! :)

[@AndrewTSq]

so CSS is soon a destroyed thing if they add types into it.. why??

[@floppa9415]

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.

[@specy_]

For example? What's some basic stuff that needs fixing

[@richarddefortune1329]

Curious as well

[@AndrewTSq]

I would like in drag & drop elements, that we could style the dragged element.

[@OmriTurge]

Terrible, and useless. No need any type safety in css, people should stop with this fashioned thing

[@Developer_hubs]

Thou shall not make CSS difficult with useless features!

[@arslan._.iftikhar]

.

[@diadetediotedio6918]

uh, this is more verbose than needed, I don't think it makes that sense. But if it fits your usecase, have some fun.

[@fathimashaikha996]

Wow

[@KimBarimg]

im early, yey✨

[@engine_man]

Except css rules have always had a specific type of value you can use.

[@AVidhanR]

WoW WoW that's a good feature for real 🎉

[@IlyesCodes]

Why the heck do we need types in css? Are we really trying to overcomplicate the simple things here? WHY DO WE NEED TYPES IN CSS I DONT GET IT

[@OmriTurge]

Simple, we dont😂

[@IlyesCodes]

@@OmriTurge XD TRUE

[@munna5553]

HTML, CSS alway a shit in never be a improved 😊

[@linela]

Can you stop shaking your head so often?

[@GHSB7462]

?

[@secretsquirrel5566]

Can you shut up and just learn?

[@charleschukwuemeka8482]

Stop watching his videos if that irritates you. It's the audacity for me

[@yonnierenton6177]

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!

[@yonnierenton6177]

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.

[@masar-at]

Bullshit

[@sanan4li]

Feel sad for people still prefer unmaintainable css over tailwindcss

[@HomePhone-y2s]

Feel worse for people that still believe class based frameworks like tailwind for CSS is actually understanding CSS

[@noggstaj]

yes, putting your css directly in your html is the way to go!

[@goonholiday656]

How about just don’t right invalid properties…