@property Is One Of The Coolest New CSS Features

@property is one of the coolest CSS features that has been released in the last few years. I think it has the potential to be as revolutionary as grid and flexbox, but there are a few tooling changes that need to happen for that first.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:32 - The Problem
01:20 - @property Feature
05:30 - VSCode Downside
06:06 - Defining Types

#CSS #WDS #CSSTypeSafety

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

[injSrc]

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

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

[morrowr]

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?

[the-iter]

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

[youcefg]

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.

[adamstuartclark]

Feels like CSS didn't really need this feature.

[anothermouth]

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

[markg]

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

[tommysmith]

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

[floppa]

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.

[sylviagardner]

Hernandez Margaret Lopez Richard Moore Mary

[youcefg]

This is part of the CSS Houdini Properties and Values API Level 1

[MrJloa]

Over engineering 👍
Solves imaginary problem yey

[AVidhanR]

WoW WoW that's a good feature for real 🎉

[JacksonBandons-ef]

Moore John Rodriguez Sandra Walker Maria

[engine_man]

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

[linela]

Can you stop shaking your head so often?

[munna]

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

[sananli]

Feel sad for people still prefer unmaintainable css over tailwindcss