10 ms·

CSS @property and the new style

534 points by surprisetalk 2y ago

apsurd 2y ago
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 =)
- efields 2y ago
  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.
  - micromacrofoot 2y ago
    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.
  - lysace 2y ago
    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.
  - emseetech 2y ago
    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.
- mschuster91 2y ago
  > 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.
  - brailsafe 2y ago
    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.
- reaperducer 2y ago
  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.
- chaosharmonic 2y ago
  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.)
- kristiandupont 2y ago
  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.
  - zarzavat 2y ago
    Which features do you feel are unnecessary? I mostly have the opposite reaction to new CSS features “What took them so long?” CSS is so much better than it used to be. Many people will remember positioning things with float and display: table-cell. Every time I use modern CSS I’m like a kid in a candy store.
tracker1 2y ago
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.
- TheGlav 2y ago
  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.
  - Jerrrrrrry 2y ago
    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.
    - samatman 2y ago
      You could just call it syntax, you know.
      - Jerrrrrrry 2y ago
        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_language https://en.wikipedia.org/wiki/Ambiguous_grammar#Trivial_lang...
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/
Destiner 2y ago
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
- efields 2y ago
  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.
- bastawhiz 2y ago
  We just call that "front end engineering"
deleted 2y ago
[deleted]
anon115 2y ago
[flagged]
stackghost 2y ago
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.
- micromacrofoot 2y ago
  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.
  - 38 2y ago
    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
    - micromacrofoot 2y ago
      how you personally feel about it is irrelevant, I would personally prefer the web to stay simple too but this isn't realistic — the places most people spend their time online are in native apps, if the web doesn't at least pretend to keep pace this will only get worse
      - 38 2y ago
        The web doesn't need to be anything more than a document delivery program. You thinking it needs to be an app delivery system is a deep error in judgement
        micromacrofoot 2y ago
        the web right now is more than a document delivery program... the genie is out of the bottle this is like saying usenet is all the social media we need... it might be aspirational, and it might be right, but it's not reality
efields 2y ago
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.
- theteapot 2y ago
  What are these standard design principals?
  - efields 2y ago
    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)
  - reaperducer 2y ago
    What are these standard design principals? Copy what the next-bigger tech company is doing, and call it "best practices."
- hollowturtle 2y ago
  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?
deleted 2y ago
[deleted]
oleganza 2y ago
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.
- bschmidt1 2y ago
  New Tailwind classes "look-good-mobile md:look-good" /s
- efields 2y ago
  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.
fny 2y ago
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.
- lilyball 2y ago
  You need @property for the interpolations between values for the animations
  - windows2020 2y ago
    Isn't that what @keyframes is for?
    - spartanatreyu 2y ago
      @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.
deleted 2y ago
[deleted]
kelnos 2y ago
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.
- ckocagil 2y ago
  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.
  - ativzzz 2y ago
    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
    - Arisaka1 2y ago
      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.
    - ARCarr 2y ago
      Good news! You can with the Web Animations API.
      - 2y ago
dpedu 2y ago
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?
- claar 2y ago
  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.
- cdrini 2y ago
  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#formal_syntax 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 :)
dimal 2y ago
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.
- robofanatic 2y ago
  What if I need to draw customer’s attention to something? These things do have use cases just like real world neon signs.
  - micahdeath 2y ago
    Use a 'new' gif that is animated like in the 2000's =D
  - idle_zealot 2y ago
    Comparing these animated buttons to distracting light pollution is pretty apt.
    - hyperhopper 2y ago
      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.
  - stroupwaffle 2y ago
    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.
  - jonny_eh 2y ago
    Some people don't like neon signs. As a business owner, you're free to ignore them.
baxuz 2y ago
The average Tailwind user can't comprehend this.
- orangepanda 2y ago
  Dont fret, there will be a 192 character long tailwind classname specifically for this.
- teaearlgraycold 2y ago
  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.
  - nsonha 2y ago
    styled-components is css, don't lump it together with tailwind
    - teaearlgraycold 2y ago
      A candidate interviewed and did not know what a CSS selector was. This was due to their exclusive experience with styled components.
      - nsonha 2y ago
        that sounds like a made up story
- kumarvvr 2y ago
  As an avg tailwindcss user, and lover, I concur.
szkosma 2y ago
What the hell, CSS has types now?
- spartanatreyu 2y ago
  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.
nraf 2y ago
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 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-with-at-property/ https://moderncss.dev/providing-type-definitions-for-css-wit...
brikym 2y ago
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.
- djbusby 2y ago
  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.
metadat 2y ago
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 https://news.ycombinator.com/from?site=ryanmulligan.dev
deleted 2y ago
[deleted]
system2 2y ago
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.
deleted 2y ago
[deleted]
deleted 2y ago
[deleted]
treflop 2y ago
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 https://developer.chrome.com/docs/css-ui/houdini
- colordrops 2y ago
  Unclear to me wether you are using the term "unhinged" in a positive or negative way
  - treflop 2y ago
    Lol i mean in a good way. I like a little unhinged sometimes
- kcrwfrd_ 2y ago
  Lol that’s how css3pie (http://css3pie.com/ http://css3pie.com/) worked, right?
  - treflop 2y ago
    Yeah. It causally allowed you to extend the CSS engine in a simplistic way, like what Houdini allows you to do. Houdini is likely way more performant though and substantially way more fleshed out.
jchook 2y ago
CSS - a language invented to make styling webpages more accessible than regular code!
bottlepalm 2y ago
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.
- nfw2 2y ago
  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
nojvek 2y ago
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?
bromuro 2y ago
How do we unit test such code in CSS?
- spartanatreyu 2y ago
  You don't unit test CSS. You E2E test it, and you visual regression test it.
issafram 2y ago
I saw the demo CSS and remembered why I stay away from frontend development. So much for so little
Brajeshwar 2y ago
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-powers/ https://css-tricks.com/exploring-property-and-its-animating-... You will particularly like the Airport number/timer flip display type example.
autoexec 2y ago
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.
quotemstr 2y ago
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.
pelagicAustral 2y ago
I'm so glad I work backend...
namuol 2y ago
Neat! Okay, wake me up when we have native CSS mixins.
indutny 2y ago
Here's a @property-based complex animation that I made recently https://indutny.github.io/on-call-rotation/#sindresorhus,jamiebuilds,reconbot,janl,Gargron,ry,indutny,saghul,Qix-;1259782 https://indutny.github.io/on-call-rotation/#sindresorhus,jam...
lifthrasiir 2y ago
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...
blacklion 2y ago
It remind me times when I participate in development of VRML Engine. VRML can include JavaScript, but it has timers & interpolations of almost anything (coordinates, texture coordinates, any properties of transformation like angle or axe of rotation, scale, etc) without using scripts. And even can process input events without scripts! It is possible to create simple 3D game without any "real programming" in VRML.
djoldman 2y ago
From https://www.w3.org/Style/CSS/ https://www.w3.org/Style/CSS/ > Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. I think somewhere "simple" got lost unfortunately.
FragmentShader 2y ago
Is there any software that can generate CSS visually by combining nodes in a graph, akin to shader graphs in game engines? (https://unity-connect-prd.storage.googleapis.com/20200902/learn/images/01aea200-0139-4f96-a445-e5001bef8312_image10.png https://unity-connect-prd.storage.googleapis.com/20200902/le...). It'd be so useful for stuff like this.
josefrichter 2y ago
This seems like we will need some wrapper libraries around this. It's super cool, but also super complex, and I am not sure you want all this complexity in your codebase.
BLACK_hHOLE2729 2y ago
[flagged]
neycoda 2y ago
CSS is turning into Flash.

534 points by surprisetalk 2y ago

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 =)

efields 2y ago
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.
- micromacrofoot 2y ago
  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.
- lysace 2y ago
  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.
- emseetech 2y ago
  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.
mschuster91 2y ago
> 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.
- brailsafe 2y ago
  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.
reaperducer 2y ago
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.
chaosharmonic 2y ago
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.)
kristiandupont 2y ago
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.
- zarzavat 2y ago
  Which features do you feel are unnecessary? I mostly have the opposite reaction to new CSS features “What took them so long?” CSS is so much better than it used to be. Many people will remember positioning things with float and display: table-cell. Every time I use modern CSS I’m like a kid in a candy store.

tracker1 2y ago

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.

TheGlav 2y ago
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.
- Jerrrrrrry 2y ago
  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.
  - samatman 2y ago
    You could just call it syntax, you know.
    - Jerrrrrrry 2y ago
      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_language https://en.wikipedia.org/wiki/Ambiguous_grammar#Trivial_lang...

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/

Destiner 2y ago

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

efields 2y ago
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.
bastawhiz 2y ago
We just call that "front end engineering"

deleted 2y ago

[deleted]

anon115 2y ago

[flagged]

stackghost 2y ago

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.

micromacrofoot 2y ago
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.
- 38 2y ago
  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
  - micromacrofoot 2y ago
    how you personally feel about it is irrelevant, I would personally prefer the web to stay simple too but this isn't realistic — the places most people spend their time online are in native apps, if the web doesn't at least pretend to keep pace this will only get worse
    - 38 2y ago
      The web doesn't need to be anything more than a document delivery program. You thinking it needs to be an app delivery system is a deep error in judgement
      - micromacrofoot 2y ago
        the web right now is more than a document delivery program... the genie is out of the bottle this is like saying usenet is all the social media we need... it might be aspirational, and it might be right, but it's not reality

efields 2y ago

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.

theteapot 2y ago
What are these standard design principals?
- efields 2y ago
  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)
- reaperducer 2y ago
  What are these standard design principals? Copy what the next-bigger tech company is doing, and call it "best practices."
hollowturtle 2y ago
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?

deleted 2y ago

[deleted]

oleganza 2y ago

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.

bschmidt1 2y ago
New Tailwind classes "look-good-mobile md:look-good" /s
efields 2y ago
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.

fny 2y ago

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.

lilyball 2y ago
You need @property for the interpolations between values for the animations
- windows2020 2y ago
  Isn't that what @keyframes is for?
  - spartanatreyu 2y ago
    @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.

deleted 2y ago

[deleted]

kelnos 2y ago

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.

ckocagil 2y ago
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.
- ativzzz 2y ago
  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
  - Arisaka1 2y ago
    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.
  - ARCarr 2y ago
    Good news! You can with the Web Animations API.
    - 2y ago

dpedu 2y ago

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?

claar 2y ago
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.
cdrini 2y ago
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#formal_syntax 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 :)

dimal 2y ago

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.

robofanatic 2y ago
What if I need to draw customer’s attention to something? These things do have use cases just like real world neon signs.
- micahdeath 2y ago
  Use a 'new' gif that is animated like in the 2000's =D
- idle_zealot 2y ago
  Comparing these animated buttons to distracting light pollution is pretty apt.
  - hyperhopper 2y ago
    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.
- stroupwaffle 2y ago
  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.
- jonny_eh 2y ago
  Some people don't like neon signs. As a business owner, you're free to ignore them.

baxuz 2y ago

The average Tailwind user can't comprehend this.

orangepanda 2y ago
Dont fret, there will be a 192 character long tailwind classname specifically for this.
teaearlgraycold 2y ago
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.
- nsonha 2y ago
  styled-components is css, don't lump it together with tailwind
  - teaearlgraycold 2y ago
    A candidate interviewed and did not know what a CSS selector was. This was due to their exclusive experience with styled components.
    - nsonha 2y ago
      that sounds like a made up story
kumarvvr 2y ago
As an avg tailwindcss user, and lover, I concur.

szkosma 2y ago

What the hell, CSS has types now?

spartanatreyu 2y ago
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.

nraf 2y ago

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 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-with-at-property/ https://moderncss.dev/providing-type-definitions-for-css-wit...

brikym 2y ago

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.

djbusby 2y ago
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.

metadat 2y ago

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 https://news.ycombinator.com/from?site=ryanmulligan.dev

deleted 2y ago

[deleted]

system2 2y ago

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.

deleted 2y ago

[deleted]

deleted 2y ago

[deleted]

treflop 2y ago

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 https://developer.chrome.com/docs/css-ui/houdini

colordrops 2y ago
Unclear to me wether you are using the term "unhinged" in a positive or negative way
- treflop 2y ago
  Lol i mean in a good way. I like a little unhinged sometimes
kcrwfrd_ 2y ago
Lol that’s how css3pie (http://css3pie.com/ http://css3pie.com/) worked, right?
- treflop 2y ago
  Yeah. It causally allowed you to extend the CSS engine in a simplistic way, like what Houdini allows you to do. Houdini is likely way more performant though and substantially way more fleshed out.

jchook 2y ago

CSS - a language invented to make styling webpages more accessible than regular code!

bottlepalm 2y ago

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.

nfw2 2y ago
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

nojvek 2y ago

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?

bromuro 2y ago

How do we unit test such code in CSS?

spartanatreyu 2y ago
You don't unit test CSS. You E2E test it, and you visual regression test it.

issafram 2y ago

I saw the demo CSS and remembered why I stay away from frontend development. So much for so little

Brajeshwar 2y ago

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-powers/ https://css-tricks.com/exploring-property-and-its-animating-... You will particularly like the Airport number/timer flip display type example.

autoexec 2y ago

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.

quotemstr 2y ago

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.

pelagicAustral 2y ago

I'm so glad I work backend...

namuol 2y ago

Neat! Okay, wake me up when we have native CSS mixins.

indutny 2y ago

Here's a @property-based complex animation that I made recently https://indutny.github.io/on-call-rotation/#sindresorhus,jamiebuilds,reconbot,janl,Gargron,ry,indutny,saghul,Qix-;1259782 https://indutny.github.io/on-call-rotation/#sindresorhus,jam...

lifthrasiir 2y ago

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

blacklion 2y ago

It remind me times when I participate in development of VRML Engine. VRML can include JavaScript, but it has timers & interpolations of almost anything (coordinates, texture coordinates, any properties of transformation like angle or axe of rotation, scale, etc) without using scripts. And even can process input events without scripts! It is possible to create simple 3D game without any "real programming" in VRML.

djoldman 2y ago

From https://www.w3.org/Style/CSS/ https://www.w3.org/Style/CSS/ > Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. I think somewhere "simple" got lost unfortunately.

FragmentShader 2y ago

Is there any software that can generate CSS visually by combining nodes in a graph, akin to shader graphs in game engines? (https://unity-connect-prd.storage.googleapis.com/20200902/learn/images/01aea200-0139-4f96-a445-e5001bef8312_image10.png https://unity-connect-prd.storage.googleapis.com/20200902/le...). It'd be so useful for stuff like this.

josefrichter 2y ago

This seems like we will need some wrapper libraries around this. It's super cool, but also super complex, and I am not sure you want all this complexity in your codebase.

BLACK_hHOLE2729 2y ago

[flagged]

neycoda 2y ago

CSS is turning into Flash.