4 ms·

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 "o

• 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.
  • nixosbestos 2y ago
    I have no idea how naive this question is... but here goes. Some privacy-conscious users disable JS, or use NoScript to selectively enable JS. My understanding is that this is (1) because JS engines are often themselves a source of vulnerabilities, (2) untrusted code execution might be risky in the face of speculation execution/access attacks. Do such users need to worry about either, or both, with such advanced, compute-y CSS primitives?
    • lelandfe 2y ago
      Well, exfiltration via CSS is possible already: https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d https://infosecwriteups.com/exfiltration-via-css-injection-4... I don't see these new CSS features opening up privacy issues, though.
    • creata 2y ago
      Imo, those are security reasons to disable JS. The main privacy reason (again, imo) to disable JS is simply that JS can just send each and every one of your inputs to the server. But as lelandfe points out, CSS can do that, too, for form and mouse/touch inputs at least. So the main difference is that JS tracking is ubiquitous, and CSS tracking is very rare afaik. (This isn't a response to the question about whether speculative execution attacks are possible, sorry.)
    • brigandish 2y ago
      I've disabled CSS too (via uBlock), it's amazing how many sites break because of it (less than the reliance on JS though). Still, the experience is generally still better enough times that I've left it as the default.
    • chefandy 2y ago
      It depends on the use case. JS makes browser fingerprinting a lot more accurate. If you're using a VPN, I believe JS can leak your real IP, but I'm not positive about that. There's also a big chunk of zero-day attack surface that's gone. Obviously they can't do in-browser bidding scripts for ad space or whatever. Personally I always keep it on, but for some use cases or levels of privacy paranoia, it makes sense.
• 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"?