CSS @property and the new style
https://ryanmulligan.dev/blog/css-property-new-style/- What the hell, CSS has types now?
-- szkosma Reply - Always has.
You can see them in the specs.
You might have a variable that has the type: A|D, or maybe even A&D.
And you might have a case where a rule can interpolate values of type A, B, or C, but not D.
The @property syntax allows you to say: This variable will only ever have a type of A, so now it can be animated.
-- spartanatreyu Reply - This demo reminded me of 2001-2002 when I was hanging out on forums about Macromedia Flash: people were making crazy demos with a mix of hand-drawn shapes, animations and ActionScript.
What you can do in modern HTML+CSS+JS is incredible. Too bad people bury it down under millions of layers of frameworks and code transformers.
-- oleganza Reply - Hand-written HTML+CSS+JS can scale, but cool-react-demo.dev is more impressive for all sorts of reasons. You also can't blame people for chasing the skills that get you hired.
Lots of factors got us into this framework and transformer hellscape, and the 'people' that made is happen are right here. I'm not without some blame within my own organization for sure.
-- efields Reply - New Tailwind classes "look-good-mobile md:look-good" /s
-- bschmidt1 Reply - I'm not a web developer, but I've built toy websites (without frameworks) and can do basic things in a few web frameworks. I remember when CSS was "invented". After a small amount of time, I could reasonably fit all of it in my head without needing to look anything up.
I looked at the CSS for the first codepen example, and it looks like gibberish to me.
Should we really have a mini animations programming language in the styling system? This seems like a bit much. More than a bit much.
Can't this be done with Javascript? I get that a lot of people have a knee-jerk negative reaction to using JS for everything, but it's a programming language... this is kinda its job.
-- kelnos Reply - > I remember when CSS was "invented". After a small amount of time, I could reasonably fit all of it in my head without needing to look anything up. I looked at the CSS for the first codepen example, and it looks like gibberish to me. Should we really have a mini animations programming language in the styling system?
I don't understand this sentiment. If you are not a web developer, and in particular not a frontend web developer, then you probably aren't building html elements with these fancy effects. And if so, then why does it matter what advanced things CSS is capable of?
> Can't this be done with Javascript?
You can totally do this with javascript. You can plop in a canvas, and use webgl to program this effect on the GPU, like a real graphics programmer. You would have to recreate all accessibility features of the html button on your own. Is it going to be easier? I doubt it. But you certainly can.
-- azangru Reply - > Can't this be done with Javascript?
I welcome opportunities to avoid javascript in my sites, even if it's more work for me. It makes life easy for visitors who prefer to disable javascript, thereby avoiding many of the exploits, trackers, etc. that plague the web today.
By the same token, I appreciate sites that do not require javascript.
-- foresto Reply - Honest question. Is really "animations" a thing related with styling?
IMHO, I see all those bells & whistles more related to scripting than to styling. I'd prefer to be able to navigate with Javascript disabled and not having to suffer some superfluous animations, but maintain the styles.
-- luismedel Reply - At least in terms of animations being superfluous, there's an accessibility setting to reduce animations that at least built in browser CSS animations can reliably respect, whereas with hand-coded Javascript animations, you're relying on each individual author to write code to respect that setting.
-- lewispollard Reply - Is there a future where CSS’ expanding surface area leads to exploits and tracking? For instance, some time ago I saw an article about how font face rules can be used to fingerprint users
-- outlore Reply - Yes and yes. You’ve already pointed out fingerprinting, but there are other attacks that can be done.
See:
- CSS keylogger, 2018: https://github.com/maxchehab/CSS-Keylogging
- OWASP cites CSS injection as a mechanism for XSS and data exfiltration: https://owasp.org/www-project-web-security-testing-guide/sta...
Luckily we haven’t seen new classes of attacks here, but being concerned about attack surface of any browser technology is valid and reasonable.
-- d4mi3n Reply - https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and...
They try to sandbox it.
There are more clever ways now. Like... everything you interact with is a binary search into a projection of your (2^n-interaction) "guess"-ed/history.
If you interact with it, then it is assumed that you can see it.
Even detecting if the room is generally lit or not via the Ambient Light API can be paired with bright and dark elements to ping flashes off your face, in a dark room, to read whether or not elements were of that certain color.
But lets scrap :Visited and use arcane browser implementations and user behaviors; even something as innocuous as zooming slightly in or out is a session-persistent signal. The browsers explicit and even _inferred_ zoom level can be leveraged. A few irrational numbers and difference in spec implementations and your zoom level on Compromised_Site_A can identify you exactly from Compromised_Site_B even without Javascript.
But let's reset zoom between domains. Easy? sure.
But something still has to get painted to the page, like images, that could be cached....depending on how long they have been visited, and from what domain, and from what order. And the timing between all those are almost certainly unique to few, and sensitive to all.
If you load a thumbnail from Bad_site_a within 100ms in a country that blocked the original resource....thats a paddlin.
Those are just the first few, I could go on.
-- Jerrrrrrry Reply - More than half of the examples you listed only partially use CSS as part of the exploit chain and could be done without CSS at all. For instance, you can certainly flash the screen but CSS is never going to be able to, on its own, read and exfiltrate the data necessary. You're relying on things like access logs at that point.
-- mynameisvlad Reply CSS is never going to be able to, on its own, read and exfiltrate the data necessary.
CSS knows a lot, and it can send it back via image requests, triggered in states through animations, 'lazier'-loading, unqie font-choosing, etc.https://blog.sheddow.xyz/css-timing-attack/
You're relying on things like access logs at that point.
Well, yes. The timing and unique request path make identifying possible. And CSS can be dropped in context by other users, crafted to refer to a different domain, so CSS worms can definitely ex-filtrate data without the webmaster being evil.
-- Jerrrrrrry Reply- Needing a full feature programming language for things purely related to the page aesthetic is not a great idea.
The reasoning: some hosting platforms allow you to personalize your personal page changing the HTML and CSS bits, but not the JS - for security reason, obviously. Itch.io is an exmaple of that, where you can personalize your game and profile. By using CSS animations I can create cool effects without any of the security concern that allowing access to JS gives me. It makes sense and it's nice to be able to do so.
-- valbis Reply - Performance. JS would need to run 60 times a second without hiccups. But JS is single-threaded, therefore any time something clogs your main thread you'll skip a frame. Plus, as incredible as modern JS engines are they're still not as efficient as the native code, which leads to extra CPU usage and that spells trouble for battery life.
-- ckocagil Reply - The way animations are done in react native for instance, is that you use JS to define the animation and send it to the native code which actually executes it.
JS should just do the same in the browser instead of relying on an arcane language not designed for this
-- ativzzz Reply - JS animation libraries let you declaratively define and hook into CSS animations.
"Arcane language" not only is CSS one of the core languages of the web, but also if you find this arcane I wonder what you think of the "native" code that react native is generating for the animations.
CSS as an animation engine is completely acceptable, and it's limitations (like the one in TFA) are slowly being pushed back.
-- MisterKent Reply >"Arcane language"
>"native" code that react native is generating for the animations.
>CSS as an animation engine is completely acceptable, and it's limitation
>TFA
No way that pun is intended, but CSS is kinda a Tunable/Timed Finite Automaton; but being of a lower class of technically-capable expression than Javacscript, which is of a higher set of class of automata.
-- Jerrrrrrry Reply- Whether a language is arcane or not depends on the levels of comfort one is familiar with the language, or how approximately familiar someone is with similar languages.
-- Arisaka1 Reply - Good news! You can with the Web Animations API.
-- ARCarr Reply - Just recently I had to code a little but complex animation and I ended up using the web animations API. It's nice, it was a lot less code than the css counterpart.
But, if I* have to write this same animation in two years and @property is widely available, I'll reach up for that first.
*To be honest, it will be 100% an LLM that writes it for me.
-- armandososa Reply - Which are CSS animations underneath
-- MisterKent Reply - Yes, but you define them with Javascript rather than in CSS which is a key difference since the syntax is more intuitive for some (myself included)
-- nfw2 Reply - So since the original comment was questioning the necessity of animations in CSS, and JS is essentially using CSS animations for many things, I'd say the answer is yes. It's also a great way for UI designers to use subtle movement to hint at actions/status/next steps/etc without having to execute any JavaScript. When you've got a purely visual task, I'd say involving a general purpose programming tool is the unnecessary part— like using sed or the like vs opening up a repl in Python or whatever.
-- chefandy Reply - No - CSS and JavaScript are two ways of defining the same thing, an animation. Safari runs its accelerated animations with CoreAnimation - is CoreAnimation a CSS animation?
-- mattgperry Reply - Shhh, don't tell him that.
-- ARCarr Reply - Also just moving problems to the graphics card. The common rotate, transform, and so on, are all classic graphics hardware tasks.
-- nitwit005 Reply - You said what we were all thinking. There was a lot of debate when CSS introduced these animation properties; I didn't have too strong opinions about it. But is has morphed into something rather complex...
-- bjarneh Reply - 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.
-- ikesau Reply - 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?
-- ffsm8 Reply - 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/
-- the_mitsuhiko Reply - 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?
-- nixosbestos Reply - 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.)
-- creata Reply - 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.
-- chefandy Reply - Well, exfiltration via CSS is possible already: https://infosecwriteups.com/exfiltration-via-css-injection-4...
I don't see these new CSS features opening up privacy issues, though.
-- lelandfe Reply - 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.
-- brigandish Reply - 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.
-- mihaic Reply - 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.
-- galaxyLogic Reply - 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.
-- spartanatreyu Reply - Yes the CSS debugging tooling that comes with every major browser is incredibly useful.
-- chefandy Reply - Because the browser can more effectively GPU accelerate CSS animations, which seems to be the main driver for features like this.
-- russelg Reply
-- Reply- 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
-- cdrini Reply - 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.
-- webstrand Reply - 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.
-- bryanrasmussen Reply
-- Reply
-- Reply- 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"?
-- brigandish Reply - 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!
-- jongjong Reply - As someone who really enjoys working with CSS, but also working with colleagues who struggle with it, I strongly recommend Kevin Powell’s YouTube channel.
He has touched on exact feature a few times, here’s a video he uploaded a week ago that shows one useful feature that registered properties enables: https://youtu.be/U8NykwZNbGs
There’s also this article that breaks down registered properties with an easy-to-follow example: https://moderncss.dev/providing-type-definitions-for-css-wit...
-- nraf Reply - A nice short article. If you want to dive deeper with lot more examples, quite a lot of them much simpler to get to have an idea faster, I'd like to suggest an old article from CSS-Tricks. The article is from 2021 but still very valid and well-done.
https://css-tricks.com/exploring-property-and-its-animating-...
You will particularly like the Airport number/timer flip display type example.
-- Brajeshwar Reply - I'm excited about the recent work on CSS (particular Houdini). I haven't felt like this since I got a book of IE 5.5 features. Don't get me wrong -- CSS has gotten a lot of new features over the last 14 years, but they've been like basic things you kind of expect in a style framework, like new layout options or variables.
But IE devs were unhinged. You could build JS code as a module and attach it to elements using CSS.
Finally we're getting those kind of unhinged features again.
e.g. https://developer.chrome.com/docs/css-ui/houdini
-- treflop Reply - Unclear to me wether you are using the term "unhinged" in a positive or negative way
-- colordrops Reply - Lol that’s how css3pie (http://css3pie.com/) worked, right?
-- kcrwfrd_ Reply - Wait, so `@property` isn't scoped by anything else other than the variable name itself right? That means an explicit single global scope for variable names, which is not a new thing but never affected the actual usage until now. I can easily imagine a future where variable names are mangled just like class names...
-- lifthrasiir Reply - This website makes me happy.
I've always loved noodling with CSS. After a decade+ of web dev and through making a career of web stuff I learned how much people seem to hate CSS.
I can pour countless hours into exploring and tinkering with hand rolled HTML+CSS. Deploying it just to see how it feels for real on my phone. And 99% of it all never going anywhere.
I guess for most people that's called a waste of time. Well this site sure does make my day =)
-- apsurd Reply - I think it's fun to play with, and new features are always interesting to explore. But I often get the feeling that CSS features come from a place of "Hmm, what else can we come up with?". I guess there must be a forum with serious discussions somewhere, that I am missing.
-- kristiandupont Reply - I really like CSS. I find it easy enough to understand. It has grown in complexity over the last 10 years, but now you can do the stuff from 10 years ago a lot more simply. And all the code from 10 years ago still works.
-- efields Reply - I’ve been testing out the (experimental) animation-timeline and scroll() functionality and it’s incredible.
It’s great to see new features coming to html/css that reduce or eliminate the need for JavaScript.
The more that can be done with declarative interfaces with the browser assuming the optimization and complexity instead of hand coding in JavaScript, the better.
-- prisenco Reply - I think it's like this: Håkon/Bert did aim a bit high with the initial design of CSS. It was harder to understand and internalize than HTML.
This hindered adoption.
Then over the years the overall complexity of the web stack (and its' Javascript-based "derivatives") grew, and suddenly CSS is no longer so complex - in comparison.
-- lysace Reply - It is more complex, but the complexity in spec can help keep codebases simpler... a lot of the new complexity takes place of some gnarly JS and CSS hacks. Looking back at my career it's hard to believe we used to build websites entirely in tables for layout.
-- micromacrofoot Reply - Mine is still pretty minimal, but I've been making a point of using more hand-rolled CSS myself to get a clearer idea of how to work outside of tools like Bootstrap and Tailwind (which I have more direct experience with in professional settings).
Coming from also writing frontends pretty much entirely with JSX (in prod, especially), my understanding of the query logic has generally improved by a lot ever since I happened into a separate rabbit hole on Web scraping.
My related hot take is that the query logic wouldn't be nearly as much of a pain if professional settings used semantic elements more. (Never mind how much bare HTML has defined behaviors you don't then have to maintain, like modals.)
-- chaosharmonic Reply - people seem to hate CSS.
The people who are vocal about hating CSS are mostly just people who don't understand CSS.
That's perfectly OK. I don't understand APEX, or AP/L, or the framework-of-the-day. But I do understand CSS, and because of that I enjoy it quite a bit.
For some people it clicks, and for other people it doesn't.
The rub comes when someone for whom CSS doesn't click is required by their job to do things in CSS. Naturally, they hate it. I'd hate it if my job made me maintain an Active Directory installation. Not my thing. But CSS isn't inherently bad.
-- reaperducer Reply - > After a decade+ of web dev and through making a career of web stuff I learned how much people seem to hate CSS.
Yeah because as soon as you're not tinkering with only your particular combination of device/screen/browser/browser version/OS/OS version but have to implement something reasonably widely supported all the subtle "we're not following the specs" get really annoying to deal with.
Microsoft used to be the most notorious specs violator, today it's Apple.
-- mschuster91 Reply - I think it depends mainly on where your personal sense of curiosity sits, on the spectrum of technical and finicky problems to solve in any given project, whether you'll hate it categorically because of the variances in implementation. I'd argue more of the general hatred comes from people naively expecting visual stuff to be trivial, instead of actually harder than a lot of other software implementation details. It's evident in the UX designers (hopefully of the past) that basically brought zero technical skills to the table and had no knowledge of even why mobile-first responsive design was more than just a marginally ideal approach.
Apply some deadline pressure, and the constraints of an existing complex frontend project, and all of a sudden the estimate you pulled out of your ass for a pixel-perfect design doesn't look so achievable; ergo, CSS sucks for some people.
-- brailsafe Reply - I've been out of web development for awhile, and it took me way too long to figure out what this actually does. I don't think the article does a good job describing it.
From what I gather, this new feature lets you write:
from var(--gradient-angle)
Instead of just a raw value, like:360deg
And the former effectively gets replaced with the latter, sourcing the value from where you defined it in a `@property --gradient-angle {...}` block.Plus there's the `inherits: false;` bit. I'm not sure what to make of that. What it does is clear enough but I don't understand why. CSS selectors already let you control inheritance. Now you can control it from a second place? I don't follow...
Also, why do I have to define the type in the @property block? I don't have to define types anywhere else in CSS. The browser can see where the @property is used, why can't it infer the type from that?
-- dpedu Reply - The big win for me has been that this feature let's you animate css variables. A place I used it a while back was a little experiment where I tweaked youtube's design to look "neon" -- eg all the lines and stuff were bright red and glowed. I designed it so the hue of the primary colour was controlled by a single css variable. I then thought why not make this extra insane and animate the hue slowly through the spectrum so that the colour of the page is changing slowly in the background! Apparently you can't animate a css variable without @property. So it's not just letting you use a css variable instead of a raw value, it's letting you animate the css variable -- and, in turn, all the places that css variable is referenced! So with one simple `@keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } }`, I animate everything -- all the primary colours, all the box shadows, etc.
`inherits: false` lets you control how the property is inherited. For example, in normal css, the property `color: red` is inherited. If you set it on a div, all elements in the div will have `color:red` unless they specifically override it. But, say the property `display: flex` does not behave this way. If I set it on the div, only the div becomes display flex. This is exposing the ability to control how your custom property is inherited -- like `color` (`inherits: true`) or like `display` (`inherits: false`).
I believe the type is there so that it can at static time know what to animate. Since a css variable can be anything, unlike a css property. E.g. `from { color: red } to {color: blue}` it knows the types because of the properties. With css variables, it needs to be told what the types are.
Added fun fact: the type syntax is actually the same syntax you'll see on like mdn! https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... . So it's like exposing the internals of CSS as an API any developer can use :)
-- cdrini Reply - Thank you. Why the article doesn't describe what @property does or how to use it is mind-boggling. It's completely obfuscated by the overly complex example.
-- claar Reply - I find the animations make everything look like an 00's display ad. In a bad way.
Really hope this aesthetic doesn't catch on.
-- stackghost Reply - Same. I thought it was neat (though a bit ridiculous) that the codepen examples are doable just with CSS, but if I saw the first call to action button on a website, I'd think it was tacky and cringey.
These sorts of things scream marketing and manipulation. Let me read your site and decide what I want to do. Don't try to distract me by annoyingly drawing my attention to the thing that will make you money.
-- kelnos Reply - These are things people are already doing in native app code, so we've got to have some web equivalents or everyone's going to be doing everything in walled gardens.
-- micromacrofoot Reply - I agree, God forbid a native do something better than a web app. Let's make web dev even more complicated, I was just saying how simple it is currently
-- 38 Reply - PFM... Pure f*cking magic is definitely how I feel about some of the things that can be done with CSS animations. Unfortunately, it seems so specifically tuned to CSS and CSS alone that it's hard to learn and conceptualize than doing things via JS programmatically. I just don't think in those terms. I have enough trouble with all the options for css flex usage.
-- tracker1 Reply - It really is a whole alien domain to itself. The syntax being so foreign to most developers doesn't help. But it's so powerful, incredibly powerful, and in most browsers, extremely efficient.
The extremely vast majority of web app developers don't need 99% of what CSS can offer. But it's neat to know it's there.
-- TheGlav Reply whole alien domain
so foreign to most developers
doesn't help.
it's so powerful, incredibly powerful,
most browsers, extremely efficient.
That is because CSS is a different Chomsky Grammar than HTML and EMCA - intentionally not Turing complete, nor-self referential - why the "has(" puedo property was so problematic.That also relates to sibling comments about the awkwardness of the pairing to Javscript, which is of a higher grammar, and Turing Complete*.
It also relates to the "awesomeness" of the "fire-and-forget" nature of CSS - unless very specifically hooked, it can be hardware-accelerated nearly care-free because it isn't per frame to the DOM, which Javascript is (meaning HTML, it's own Chomsky Grammar!)
It is what it is, the epitome of an optimized amalgamation of technical debt we call the modern web specification.
-- Jerrrrrrry Reply- > That is because CSS is a different Chomsky Grammar than HTML and EMCA - intentionally not Turing complete
CSS has been Turing complete for many years.
You can simulate Turing machines with pure HTML+CSS, e.g. https://github.com/yrd/tm2css
"Rule 110" which implies Turing-completeness has also been implemented in CSS, e.g. http://eli.fox-epste.in/rule110/
-- idoubtit Reply - CSS has been very, very, very close.
I would had had, had - "has" not been had, expected sooner, but atlas.
But the aforementioned ":has":
:
The :has() pseudo-class cannot be nested within another :has(). This is because many pseudo-elements exist conditionally based on the styling of their ancestors and allowing these to be queried by :has() can introduce cyclic querying.Pseudo-elements are also not valid selectors within :has() and pseudo-elements are not valid anchors for :has().
Note the two limits, "cyclic querying" and self-referential parameters.The former is required for a basic computational model, the latter for one that supports recursive-ness and thus some optimizations .
"Rule 110"
This is just lambada calculus and has no tape movement - requires checkin boxes, still, and thinking about whether or not to halt - which actually kinda is its own asterisk (not the usual 'infinite tape' kind). Turing Machines would halt on some input; your calculator goes until the actual computer, you, halts, or stops actually checking(computing) the state for a HALT/desired state.You'd think someone woulda parasol'd the checkboxes and at least attempted to use :onHover with grid to require minimal mouse movement to trigger input instead.
Or, a bounding box input state driven hack - like when your cursor is "in between" elements, changing every frame.
pure HTML+CSS, e.g. https://github.com/yrd/tm2css
seems cool, actually. SASS repeats CSS exhaustively through HTML-encoded steps until a valid one is painted - that valid one being the HALT/output. You do have to specify the number of steps, though. You would have to know whether or not it halts, the answer, and how many steps it took to compute to functionally (heavy-lifting in this context) use it - or else it would have to reference itself....which would make it a higher grammar.But it can't:
https://www.w3.org/TR/css-variables/#cyclesThis can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other....If there is a cycle in the dependency graph, all the custom properties in the cycle are invalid at computed-value time.
Very close. But you must beg the question (ie. know the answer) in both step count and thus the answer, else you'd have an infinite HTML page. Which is fine in math (HTML is a Type 2, can be infinite, no self-reference, no self-children, nor orphans), but not really much of a simulation/emulation though - if it can only produce valid machines at (essentially) compile time.
-- Jerrrrrrry Reply - > That is because CSS is a different Chomsky Grammar than HTML and EMCA - intentionally not Turing complete, nor-self referential - why the "has(" puedo property was so problematic.
It will be a nitpicky comment, and I’m sure you mean it this way, but it wasn’t clear to me: a language’s syntax being in one type of grammar class is irrelevant to its execution semantics corresponding to a recognizing automaton. So you can have a language with a regular syntax that is Turing complete just fine.
In fact, most languages’ syntaxes are context-free (sometimes with some escape hatches), but are semantically Turing-complete.
-- kaba0 Reply - You could just call it syntax, you know.
-- samatman Reply - Everyone reading this speaks multiple computer languages, and knows what a "syntax" is.
The disambiguation between levels (grammars) of syntax is what the above poster was both lamenting and heralding - possibly unaware of it's technical and mathematical necessity.
https://en.wikipedia.org/wiki/Ambiguous_grammar#Trivial_lang...
-- Jerrrrrrry Reply - It's a declarative paradigm like that of SQL. From a purely imperative perspective, either does take some time with the spec and some experimentation to grasp as a paradigm, but it's a way of thinking worth the study for more than just being able to use SQL and CSS. (Which are not without worth in their own right!)
-- throwanem Reply - JS is always, always my last resort. The amount of JS I've stripped out of code in the last few years as CSS features have arrived in most browsers. I love getting a page to "JavaScript Zero".
If they could just decide on the name[1] for the CSS "masonry" feature so we could finally have that without scripting, I'd be very happy.
[1] https://github.com/w3c/csswg-drafts/issues/9733
-- qingcharles Reply - In this particular case property is part of the CSS Houdini APIs which allows you to manipulate CSS from JavaScript in a much more powerful way than before. https://developer.mozilla.org/en-US/docs/Web/API/Houdini_API...
-- the_mitsuhiko Reply - This is why I hired a designer who knows how to code HTML + CSS (but not much else). I can throw some un-styled elements on a page that are hooked up to the business logic, and the designer can style them however they want. We can iterate on polishing the UI later if needed.
-- leptons Reply - This is the way. I still love to work like this.
-- efields Reply
-- Reply
-- Reply- I'm so glad I work backend...
-- pelagicAustral Reply - Just remember that because you can doesn't mean you should. When super bright blue LEDs came out every damn piece of hardware had them just to show their product is new but it didn't add any value to the user.
-- brikym Reply - What? Blue LEDs were much cooler! I even modified hardware to swap out green/red for blue (c1997) cause they were so awesome. I have to put a small V-drop cause they were so bright.
-- djbusby Reply - While the demo is interesting from a technical standpoint, please don't make buttons animate like this. It seems like everyone is adding nasty purple gradient borders to everything and now they want to animate it. Just because you can do this doesn't mean you should! I'm getting tired of writing custom CSS to remove distracting styles like this from websites.
-- dimal Reply
-- Reply- Please do whatever you feel like doing. If you like the aesthetic and it fits the overall design, why not? Don’t let some HN commenter tell you what you can’t do.
-- leblancfg Reply - What if I need to draw customer’s attention to something? These things do have use cases just like real world neon signs.
-- robofanatic Reply - Comparing these animated buttons to distracting light pollution is pretty apt.
-- idle_zealot Reply - Drive around some of Vegas and say that all the old incandescent lights and neon are just pollution. Some of it, designed just for eyeballs and profit, actually ends up being beautiful.
-- hyperhopper Reply - Hire a designer and select an attention-getting color? Use a unique shape which is different than the regular visual flow on the page?
The internet is a cesspool of ad-plastered pulsating garbage. Please don’t litter more on the garbage pile.
-- stroupwaffle Reply - There are plenty of better ways to draw a user’s attention to something. Any half decent designer should be able to do it without this kind of noise. And there are people like me that will close the tab before interacting with the page, so you’ll lose some people with this approach.
-- dimal Reply - It depends on the concrete case and why drawing their attention is important, but flashy animation is never the answer, unless it's to indicate an imminent life-threatening danger, or unless your app is a game.
-- layer8 Reply - Some people don't like neon signs. As a business owner, you're free to ignore them.
-- jonny_eh Reply - Use a 'new' gif that is animated like in the 2000's =D
-- micahdeath Reply - It feels like "blink" all over again, although much prettier. I'll probably feel differently about that last part really soon.
-- codazoda Reply - What developers _should_ be doing is disabling such animations if `prefer-reduced-motion` is set in your browser. This way, both people who have trouble seeing stuff when there's too many complex color animations as well as people who "just don't want to deal with all that mess" can specify what they want to see, and the code can change based on their preferences.
Unfortunately, I believe for "custom jobs" like this you'd need to explicitly state that you don't want it to occur because it won't happen by default, unlike some other stuff that's more standard in the browser.
-- tomphoolery Reply - It's Flash all over again.
-- klaussilveira Reply - Everyone making so much a menace about the 90's coming back. Please let it happen man! it can't be too much worse than this!
-- tutuca Reply - The problem with Flash -- as I remember it -- wasn't the animation so much as how the Flash embed 1) required a plugin, 2) didn't interact as one would expect of a web page (e.g. right click), 3) was slow to load, 4) and didn't play nicely with the surrounding DOM.
I don't think this is the case here. For a CTA button (literally "Call to Action"), I think it's perfectly acceptable to add an animation to it.
-- CharlieDigital Reply - Fancy CSS effects are slow to run, they use lots of CPU time just like Flash animations used to.
When I switch from this HN tab to the article page, Firefox's CPU usage goes from 2% to 26%.
-- alxmdev Reply - At some point, it will be nice to have an "Information Experience Palette" that is in your locked .env.pii.llm personal AI firewall, gateway. All of your digital DNA is held, managed, protected, and preferred by you, in your own, Sound Voice.
So ultimately, you apply the view to the page and the page conforms to your ingestion preference.
I should carry my own 'css' and be able to just pluck any URL and let me speak to my filter on how to display it.
And it will provide a new way to interact with my browsing history - allowing me to recall how that thing from HN from 3 months ago can tie into this thing, and augment my understanding when I can view them next to eachother... and I can categorize them into tags of the same ilk and have a mental rolodex that lets me re-view my browsing history in the UX lens of my choosing.
/edible.
-- samstave Reply - My take is the opposite. Please do it, let's stop everybody conform to the same aesthetics, the same button, the same effect.
-- meiraleal Reply
-- Reply
-- Reply
-- Reply- The author has an enthusiasm for a new piece of CSS that I haven't seen in a solid decade. I appreciate it a lot. In my 20s I would have tinkered with the possibilities of this thing for hours/days. Trying to get stuff to work in CSS brought me joy. Now it's kind of easy, thanks to flexbox, grid, and the fact that most websites and apps follow standard design principles. We've "solved" web UI, for the most part.
-- efields Reply - What are these standard design principals?
-- theteapot Reply - I guess a better way to say what I meant is "common design language." Things that become components in some component library.
They aren't written down, set in stone, spec'd in any way, but for example:
* the idea of a hero image with a headline and a sub headline followed by a call to action is common on many SaaS product websites.
* news websites all look very coherent, so they've adopted some sort of typographical rhythm just like they would in a print publication
* the multitude of component libraries means advanced UI can be programmed with some readymade parts, diminishing the need to write custom CSS for something like an image carousel (for a trivial example)
-- efields Reply - What are these standard design principals?
Copy what the next-bigger tech company is doing, and call it "best practices."
-- reaperducer Reply - What we solved? Layout? Still need to go back a re read some shady aspects of flex and grid. Sticky positioning is one of the most useful features ever; yet if for any any reason doesn’t work it’s very hard or almost impossible to debug and understand why(does any parent up the tree have any overflow?), and good luck finding any good documentation explaining corner cases. Without dev tools and a lot of wasted clicks it’s impossible to debug css from source code alone, you have to inspect that element at runtime. Most native inputs still have very limited styling capabilities(please don’t tell me it’s a good thing), we waited years for native modals and popovers. Last time I checked can’t still animate from display none to block with height. I can go on for days, my point is how did we become so accustomed to all the problems css have and lost any bit of criticism?
-- mirkodrummer Reply - We can now transition to height auto: https://css-tricks.com/transitioning-to-auto-height/
-- sntran Reply - The prior submissions from this domain never got traction but smooth them are also pretty interesting and educational:
https://news.ycombinator.com/from?site=ryanmulligan.dev
-- metadat Reply - The average Tailwind user can't comprehend this.
-- baxuz Reply - Dont fret, there will be a 192 character long tailwind classname specifically for this.
-- orangepanda Reply - As an avg tailwindcss user, and lover, I concur.
-- kumarvvr Reply - I’ve been doing web stuff since 2003. But tailwind is nice and has its benefits.
That said, I’m always shocked when I’m interviewing a front-end candidate and they don’t know CSS. Too many rookies out there that haven’t used anything outside of styled components and tailwind.
-- teaearlgraycold Reply - styled-components is css, don't lump it together with tailwind
-- nsonha Reply - Here's a @property-based complex animation that I made recently https://indutny.github.io/on-call-rotation/#sindresorhus,jam...
-- indutny Reply - Is it wrong my first thought of this is that it's too complex for me, but I'll tell ChatGPT what I want and it can generate the effect I want with the @property stuff I don't understand.
This must be the mentality of new CS students.
-- bottlepalm Reply - This seems like a bad path to go down. Even if ChatGPT were a perfect developer, being able to understand code would be important because communicating specs is hard
-- nfw2 Reply - CSS - a language invented to make styling webpages more accessible than regular code!
-- jchook Reply - I saw the demo CSS and remembered why I stay away from frontend development. So much for so little
-- issafram Reply - as somebody who spent many years writing "regular" css, this is magic
i wonder if we start to see the "css engineer" job posts sooner or later
-- Destiner Reply - It me. I write CSS. I also write javascript, html, vue code, react…
We just haven't needed a lot of pure CSS in the modern era. A lot is abstracted away in frameworks where you can simply set variables to customize the look and feel.
All websites also kind of look the same now, which isn't the worst thing, but it definitely means less need to mess with CSS.
-- efields Reply - We just call that "front end engineering"
-- bastawhiz Reply
-- Reply- At this point we really need a CSS blocker because it's going to be used to plaster ads and annoyances all over websites that used to require javascript and were easily solved by blocking JS by default. CSS is becoming so complex that it'll be as much of a security risk as JS.
Preferably a blocker that allows a sane subset of CSS so that normal formatting isn't impacted.
-- autoexec Reply - How do we unit test such code in CSS?
-- bromuro Reply - You don't unit test CSS.
You E2E test it, and you visual regression test it.
-- spartanatreyu Reply - At some point it seems like folks working on CSS have a “we need to be paid so let’s add more features”.
Seems pretty gibberish. Theres already CSS vars and a bazillion less/sass/css-in-js preprocessors.
Who really needs this? Why make the spec so complex?
-- nojvek Reply - It is a crapload of CSS for a single button, that's for sure. But today we learned some new things. Thanks for the article.
-- system2 Reply
-- Reply- As an aside, modern CSS would be useful in a non-web configuration language role too, but almost nobody seriously considers it --- instead preferring the usual ad-hoc mix of JSON, YAML, and TOML.
-- quotemstr Reply - Just so everyone understands what this is... they've added typed variables to CSS that can be passed down to children, so CSS is just converging even more to SCSS and friends. The button is flashy, but not really relevant.
TLDR: you didn't actually need @property to do any of this magic.
-- fny Reply - You need @property for the interpolations between values for the animations
-- lilyball Reply - Isn't that what @keyframes is for?
-- windows2020 Reply - @keyframes specifies what the values should be at specific moments in a timeline, but not what values they can be between those moments.
Certain types are continuous between two values which allow them to be smoothly interpolated in an animation. For example, an animation from 10px to 20px would be 15px in the middle.
Certain types are discrete, so they cannot be smoothly interpolated. For example: flex to grid. There's no half flex half grid value. An animation would just hard switch to the other value.
Variables can be assigned continuous typed values, discrete typed values, or values that can be continuous or discrete.
If you're animating over a value where you don't know if the animation is continuous or discrete, you have to treat it as discrete to avoid nonsense values.
This is why @property at-rule exists. It allows you to specify "this variable" is of a continuous type, and it can not be overridden by a discrete type in the future, which among other things, allows a variable to be animated smoothly when it otherwise couldn't be without the chance of encountering a nonsense value.
-- spartanatreyu Reply - Neat! Okay, wake me up when we have native CSS mixins.
-- namuol Reply - [flagged]
-- anon115 Reply