Тёмный

@property Is One Of The Coolest New CSS Features 

Web Dev Simplified
Подписаться 1,6 млн
Просмотров 16 тыс.
50% 1

Опубликовано:

 

18 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 46   
@nomadshiba
@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
@WebDevSimplified День назад
That is a great point!
@thewhite8782
@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
@injSrc
@injSrc День назад
The only use of this @propeties I see is the ability to transitions of custome property
@mikescholz6429
@mikescholz6429 День назад
Thats the reason I’ve been waiting for it.
@morrowr08
@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?
@adamstuartclark
@adamstuartclark День назад
Feels like CSS didn't really need this feature.
@nwfashionmedia
@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.
@aimableruhumuriza8603
@aimableruhumuriza8603 21 час назад
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
@radhy9173
@radhy9173 19 часов назад
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
@andreybogdanov3 8 часов назад
Congrats, you just discovered the purpose of TS🎉
@youcefg9760
@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.
@the-iter8
@the-iter8 22 часа назад
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
@markg5891
@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
@linela День назад
Yeah, this is a high level of stupidity...
@SardenR
@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
@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
@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.
@tommysmith5479
@tommysmith5479 16 минут назад
You keep saying "custom properties" - do you mean variables?
@floppa9415
@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_
@specy_ Час назад
For example? What's some basic stuff that needs fixing
@richarddefortune1329
@richarddefortune1329 59 минут назад
Curious as well
@youcefg9760
@youcefg9760 День назад
This is part of the CSS Houdini Properties and Values API Level 1 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sPbpElWAJ68.html
@OneHundy
@OneHundy День назад
Is there a shorthand for this?
@rodrigolaporte274
@rodrigolaporte274 День назад
VERY cool!
@engine_man
@engine_man 17 часов назад
Except css rules have always had a specific type of value you can use.
@arslan._.iftikhar
@arslan._.iftikhar День назад
.
@AVidhanR
@AVidhanR День назад
WoW WoW that's a good feature for real 🎉
@fathimashaikha996
@fathimashaikha996 День назад
Wow
@KimBarimg
@KimBarimg День назад
im early, yey✨
@masaratech
@masaratech День назад
Bullshit
@sanan4li
@sanan4li День назад
Feel sad for people still prefer unmaintainable css over tailwindcss
@HomePhone-y2s
@HomePhone-y2s 13 часов назад
Feel worse for people that still believe class based frameworks like tailwind for CSS is actually understanding CSS
@linela
@linela День назад
Can you stop shaking your head so often?
@GHSB7462
@GHSB7462 День назад
?
@secretsquirrel5566
@secretsquirrel5566 День назад
Can you shut up and just learn?
@charleschukwuemeka8482
@charleschukwuemeka8482 День назад
Stop watching his videos if that irritates you. It's the audacity for me
@yonnierenton6177
@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
@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.
@munna5553
@munna5553 День назад
HTML, CSS alway a shit in never be a improved 😊
Далее
Node.js Doesn’t Suck Anymore
16:59
Просмотров 96 тыс.
Am I Good Enough To Solve These CSS Battles?
28:26
Просмотров 41 тыс.
БЕЛКА РОЖАЕТ? #cat
00:26
Просмотров 571 тыс.
Coding Was HARD Until I Learned These 5 Things...
8:34
Naming things just got easier thanks to @scope
26:22
Просмотров 48 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 476 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 955 тыс.
How To Debug React Apps Like A Senior Developer
21:07
Просмотров 137 тыс.
Learn Flexbox in 15 Minutes
15:12
Просмотров 1,2 млн
Only Noobs Build Beautiful Websites
18:13
Просмотров 131 тыс.