7 ms·

Wow, reading this, I can _feel_ my brain resist an unfamiliar concept. I recommend people read the MDN article linked to in the first sentence before moving ont

by ikesau 2y ago

Wow, reading this, I can _feel_ my brain resist an unfamiliar concept. I recommend people read the MDN article linked to in the first sentence before moving onto the examples in the blog. I'll have to play around with @property myself to get a sense of how it works - knowing esoteric CSS features is a superpower if you've got a complex UI to implement but wanna minimize JS dependencies.

ffsm8 2y ago
After reading through the mdn article I'm hopelessly confused. Isn't that literally just css variables? werent they cascading too, so the variable could be "overwritten" via classes etc? Isn't that even how tailwind does bg-opacity etc?
- cdrini 2y ago
  I think of them as effectively CSS variables with types and that can be animated. By default CSS variables can't be animated since it has no idea what unit it's animating between
  - webstrand 2y ago
    Critically, CSS custom properties are not evaluated by default until you use them. They're more akin to preprocessor substitution. Yes, this does mean that: calc(var(--foo) * 2) can have a different result than: calc((var(--foo)) * 2) Since they're basically just strings, there's no way for the animation system to interpolate between different values. `@property` fixes this allowing the immediate evaluation of the value into a concrete value that _can_ be interpolated.
- deleted 2y ago
  [deleted]
- the_mitsuhiko 2y ago
  What's particularly interesting about @property is that you can associate custom rendering code. I think this website does a pretty good job showing the powers: https://houdini.how/ https://houdini.how/
  - mihaic 2y ago
    What's absolutely amazing about that is how far people go to do everything in pure CSS, without Javascript, that they put Javascript inside their CSS.
    - galaxyLogic 2y ago
      CSS is becoming ever more like a programming language. But you cannot debug it. So why not use a programming language instead where you can do that, and can do pretty much anything you want.
      - russelg 2y ago
        Because the browser can more effectively GPU accelerate CSS animations, which seems to be the main driver for features like this.
      - spartanatreyu 2y ago
        CSS is absolutely debuggable, every browser has dev tools just for this very thing. To do this, you can add or remove rules, or change the values of variables. Something that might be a source of confusion for you is that CSS isn't an imperative language, it's a declarative language. If you're not aware of the distinction: - Declarative languages describe what they want the output to be but doesn't go through every single step on how to create the output. (e.g. html, css, regex, sql, nix, etc...) - Imperative languages describe every single step on how to create an output, but not what the output actually is. (e.g. js/ts, php, go, c++, rust, etc...) Since CSS is declarative, it doesn't have imperative steps on how to draw things (e.g. calculate a bunch of co-ords, then loop through all pixels between the co-ords while setting their pixel values to #0000FF). Instead we describe what we want (.box { background-color: blue }) and leave it up to the browser to decide how to do it. This has several advantages from a web browsing perspective: If someone figures out a better way to draw a blue box then every website developer doesn't need to go back and change their box drawing code. Instead, the browser developers change their box drawing code and now every website is automatically upgraded at the same time. A browser might also make decisions on which way to draw a box. It might loop through each pixel one-at-a-time on a cheap cpu-only device, whereas it might pass some info to the GPU and have its shaders draw the blue box, or it might use some clever heuristics to determine that the blue box is above a large box that already has the same blue so there's no need to draw over the same space a second time. There are other advantages to declarative languages too. Typically around being able to specify constraints to eliminate certain problems in the design of the language itself (e.g. race conditions, side-effects, indeterminate states, halting problem, etc...). In the end, you want to use the language paradigm that makes the most sense for the situation at hand. For scripting: you want imperative languages. For information and presentation: you want declarative languages.
- deleted 2y ago
  [deleted]
- bryanrasmussen 2y ago
  well technically the selectors cascade, so that when you have a selector that overrides another one the variable value you set in that selector takes precedence, the cool thing being that the variable is of course not just set for its element but also the subtree under the element. Since there are lots of ways to do this kind of thing, pseudo selectors, attr function etc. the ability to do dynamic and complex things from CSS, or with just CSS and HTML combined is pretty big, but as a general rule if you want to do this kind of thing statefully it is probably best to do it in JS - maintaining what variable values are in play on a particular element by setting it that way.
- brigandish 2y ago
  As is so often the case with articles that cause frantic head-scratching and hair pulling (my lack of which I could possibly blame on people who write CSS blogs), they didn't bother to explain the case that the shiny new thing is supposed to fix. Imagine trying to get someone to use Git without explaining the problems it's supposed to tackle. Who could come away from that conversation thinking "this is tool I must use" and not "that was confusing"?
jongjong 2y ago
Same. I think this article does a terrible job at explaining it. From the MDN article, it sounds like it's basically the same as plain old CSS variables but scoped to specific elements and/or children with some additional constraints so that it has some awareness of CSS units like angles, percentages, etc... I probably won't be using it though. Such slight benefits don't justify added complexity and compatibility tradeoffs. I try to avoid using unnecessary new fancy syntax. I kind of stopped caring about new additions to CSS after CSS variables. I'm sure it's very difficult and stressful to be a surgeon, but once you receive that big paycheck at the end of the week/month while sitting comfortably in your expensive home with a view, scrolling through your stock portfolio on your phone, thinking about what shares/companies you will buy next and where your next holiday will be, it can't be that hard to recover!
nyarlathotep_ 2y ago
> Wow, reading this, I can _feel_ my brain resist an unfamiliar concept. Ha, thought it was just me. This strikes me as very strange. I'm not sure what the benefits are over just using CSS transforms.

by ikesau 2y ago

ffsm8 2y ago

After reading through the mdn article I'm hopelessly confused. Isn't that literally just css variables? werent they cascading too, so the variable could be "overwritten" via classes etc? Isn't that even how tailwind does bg-opacity etc?

cdrini 2y ago
I think of them as effectively CSS variables with types and that can be animated. By default CSS variables can't be animated since it has no idea what unit it's animating between
- webstrand 2y ago
  Critically, CSS custom properties are not evaluated by default until you use them. They're more akin to preprocessor substitution. Yes, this does mean that: calc(var(--foo) * 2) can have a different result than: calc((var(--foo)) * 2) Since they're basically just strings, there's no way for the animation system to interpolate between different values. `@property` fixes this allowing the immediate evaluation of the value into a concrete value that _can_ be interpolated.
deleted 2y ago
[deleted]
the_mitsuhiko 2y ago
What's particularly interesting about @property is that you can associate custom rendering code. I think this website does a pretty good job showing the powers: https://houdini.how/ https://houdini.how/
- mihaic 2y ago
  What's absolutely amazing about that is how far people go to do everything in pure CSS, without Javascript, that they put Javascript inside their CSS.
  - galaxyLogic 2y ago
    CSS is becoming ever more like a programming language. But you cannot debug it. So why not use a programming language instead where you can do that, and can do pretty much anything you want.
    - russelg 2y ago
      Because the browser can more effectively GPU accelerate CSS animations, which seems to be the main driver for features like this.
    - spartanatreyu 2y ago
      CSS is absolutely debuggable, every browser has dev tools just for this very thing. To do this, you can add or remove rules, or change the values of variables. Something that might be a source of confusion for you is that CSS isn't an imperative language, it's a declarative language. If you're not aware of the distinction: - Declarative languages describe what they want the output to be but doesn't go through every single step on how to create the output. (e.g. html, css, regex, sql, nix, etc...) - Imperative languages describe every single step on how to create an output, but not what the output actually is. (e.g. js/ts, php, go, c++, rust, etc...) Since CSS is declarative, it doesn't have imperative steps on how to draw things (e.g. calculate a bunch of co-ords, then loop through all pixels between the co-ords while setting their pixel values to #0000FF). Instead we describe what we want (.box { background-color: blue }) and leave it up to the browser to decide how to do it. This has several advantages from a web browsing perspective: If someone figures out a better way to draw a blue box then every website developer doesn't need to go back and change their box drawing code. Instead, the browser developers change their box drawing code and now every website is automatically upgraded at the same time. A browser might also make decisions on which way to draw a box. It might loop through each pixel one-at-a-time on a cheap cpu-only device, whereas it might pass some info to the GPU and have its shaders draw the blue box, or it might use some clever heuristics to determine that the blue box is above a large box that already has the same blue so there's no need to draw over the same space a second time. There are other advantages to declarative languages too. Typically around being able to specify constraints to eliminate certain problems in the design of the language itself (e.g. race conditions, side-effects, indeterminate states, halting problem, etc...). In the end, you want to use the language paradigm that makes the most sense for the situation at hand. For scripting: you want imperative languages. For information and presentation: you want declarative languages.
deleted 2y ago
[deleted]
bryanrasmussen 2y ago
well technically the selectors cascade, so that when you have a selector that overrides another one the variable value you set in that selector takes precedence, the cool thing being that the variable is of course not just set for its element but also the subtree under the element. Since there are lots of ways to do this kind of thing, pseudo selectors, attr function etc. the ability to do dynamic and complex things from CSS, or with just CSS and HTML combined is pretty big, but as a general rule if you want to do this kind of thing statefully it is probably best to do it in JS - maintaining what variable values are in play on a particular element by setting it that way.
brigandish 2y ago
As is so often the case with articles that cause frantic head-scratching and hair pulling (my lack of which I could possibly blame on people who write CSS blogs), they didn't bother to explain the case that the shiny new thing is supposed to fix. Imagine trying to get someone to use Git without explaining the problems it's supposed to tackle. Who could come away from that conversation thinking "this is tool I must use" and not "that was confusing"?

jongjong 2y ago

Same. I think this article does a terrible job at explaining it. From the MDN article, it sounds like it's basically the same as plain old CSS variables but scoped to specific elements and/or children with some additional constraints so that it has some awareness of CSS units like angles, percentages, etc... I probably won't be using it though. Such slight benefits don't justify added complexity and compatibility tradeoffs. I try to avoid using unnecessary new fancy syntax. I kind of stopped caring about new additions to CSS after CSS variables. I'm sure it's very difficult and stressful to be a surgeon, but once you receive that big paycheck at the end of the week/month while sitting comfortably in your expensive home with a view, scrolling through your stock portfolio on your phone, thinking about what shares/companies you will buy next and where your next holiday will be, it can't be that hard to recover!

nyarlathotep_ 2y ago

> Wow, reading this, I can _feel_ my brain resist an unfamiliar concept. Ha, thought it was just me. This strikes me as very strange. I'm not sure what the benefits are over just using CSS transforms.