[HN Gopher] CSS @property and the new style
___________________________________________________________________
CSS @property and the new style
Author : surprisetalk
Score : 236 points
Date : 2024-09-04 18:13 UTC (4 hours ago)
(HTM) web link (ryanmulligan.dev)
(TXT) w3m dump (ryanmulligan.dev)
| apsurd wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| I think it's like this: Hakon/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.
| prisenco wrote:
| 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 wrote:
| > 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 wrote:
| 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 wrote:
| _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 wrote:
| 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.)
| tracker1 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| throwanem wrote:
| 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!)
| the_mitsuhiko wrote:
| 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...
| leptons wrote:
| 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.
| efields wrote:
| This is the way. I still love to work like this.
| ikesau wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| the_mitsuhiko wrote:
| 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/
| Destiner wrote:
| 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 wrote:
| 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 wrote:
| We just call that "front end engineering"
| anon115 wrote:
| these comments look bot generated tbh
| stackghost wrote:
| 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 wrote:
| 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 wrote:
| 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
| kelnos wrote:
| 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.
| efields wrote:
| 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 wrote:
| What are these standard design principals?
| efields wrote:
| 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 wrote:
| _What are these standard design principals?_
|
| Copy what the next-bigger tech company is doing, and call it
| "best practices."
| oleganza wrote:
| 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 wrote:
| New Tailwind classes "look-good-mobile md:look-good" /s
| efields wrote:
| 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 wrote:
| 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 wrote:
| You need @property for the interpolations between values for
| the animations
| kelnos wrote:
| 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 wrote:
| 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 wrote:
| 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
| dpedu wrote:
| 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 wrote:
| 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 wrote:
| 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 :)
| dimal wrote:
| 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.
| klaussilveira wrote:
| It's Flash all over again.
| CharlieDigital wrote:
| 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.
| alxmdev wrote:
| 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%.
| tutuca wrote:
| 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!
| meiraleal wrote:
| My take is the opposite. Please do it, let's stop everybody
| conform to the same aesthetics, the same button, the same
| effect.
| robofanatic wrote:
| What if I need to draw customer's attention to something? These
| things do have use cases just like real world neon signs.
| micahdeath wrote:
| Use a 'new' gif that is animated like in the 2000's =D
| idle_zealot wrote:
| Comparing these animated buttons to distracting light
| pollution is pretty apt.
| stroupwaffle wrote:
| 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.
| leblancfg wrote:
| 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.
| codazoda wrote:
| It feels like "blink" all over again, although much prettier.
| I'll probably feel differently about that last part really
| soon.
| baxuz wrote:
| The average Tailwind user can't comprehend this.
| orangepanda wrote:
| Dont fret, there will be a 192 character long tailwind
| classname specifically for this.
| teaearlgraycold wrote:
| 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.
| szkosma wrote:
| What the hell, CSS has types now?
| nraf wrote:
| 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...
| brikym wrote:
| 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.
| metadat wrote:
| 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
| e2etestingwolf wrote:
| This is an interesting article. I love it!
| system2 wrote:
| 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.
___________________________________________________________________
(page generated 2024-09-04 23:00 UTC)