Lmfao, well, to be fair I used to be able to teach every single possible style attribute and value in a month and have them all memorized. Now I can't do half of css without gpt or the docs because everything has a specific name and specific limits (like vh not accounting for mobile browser address bars, or justify content vs justify item). This is harder than it's ever been, but we've never had so much broadband internet, search and LLM tools to help navigate it on the fly. We dev used to be way way easier though, we could build websites in notepad without a linter or IDE. No joke I did it for like 6 years in notepad.
It 's an excellent tutorial and very helpful video. Finaly we can use display none and add some transitions! You are the best with as well Web dev simplified for JS. I learned a lot from both of you!
Thanks for the explainer on discrete animations, and the “allow-discrete” transition-behavior. I saw another video mention that property but I didn’t understand because it didn’t explain what that is or how it works. Thanks for yet another excellent video!
I know your goal is to make people fall in love with CSS, so I wanted to let you know that you've managed to make at least one person, me, fall in love with it! I adore watching your videos and I actually fell in love with finding out new things I can do with CSS! Thank you!
Love the content, Kevin! Wanted to let you know there’s an ad break right in the middle of the plug you make for your course. Probably not good for click-thru’s. Your content is amazing and needs to reach as many people as possible. 😊
great video! Thanks for taking the time in explaining the little details, those were really usefull 🙏. I was looking for this kind of explanation because I knew this was new, but after some tries I was not being able to animate the display property 😆, now I can 😎.
Really well constructed way to explain through this concept. I’d say that it’s one of the trickiest concepts I’ve had to deal with and you’ve revealed some quirks about this process that reveal why some things weren’t working in the past. Thank you :-)
Good news! As of testing today, it is working in all major browsers! It is working in Safari v17.6, Firefox v129.0.1, and Opera v65.0.3467.78 (It was already working in Chrome and Edge) Can I Use doesn't have Firefox 129 or Safari 17.6 listed yet though, but confirmed working! And it will be working for iOS when iOS 18 launches, which is most likely being released next month-ish
Thanks a lot Kevin! Now that you mentioned it btw, what about a video on the gotchas between css nesting and sass? I remember you did one in the early days, but the spec became a little more permissive since then
The keyframes method which is basically the only one working cross-browser, requires backdrop set to none. 1. That removes the focus that is required for the animation but defeats the whole accessibility purpose. Also then 2. you need to set your event to window if you want the modal to disappear when you click the backdrop. 3. Of course the easy customization of the backdrop color. I liked the video cause I am big fan of Kevin but unfortunately as exciting as it looks, we need better support on this. It's a nice feature.
Perfect timing, we recently converted to dialogue for all our modals, this will be a nice upgrade 🙂 I was asked by our lead dev to convert our off-canvas to a dialogue as well, I however think this is not the appropriate use case and may cause some usability issues? AlsoI noticed your link in the desc. isn't formatted correctly - the query string isn't part of the link anymore.
Interesting. Though I'm not sold on the logic behind "transitioning" the display property. It's more like controlling the timing of when that discrete property applies, there's no in-between state. Personally, in this example, I'd probably just use `opacity: 0` to make the popup invisible and `pointer-events: none` to ensure it can't be interacted with when it's invisible. But that @starting-style looks like it could have lots of uses! Thanks for sharing.
For the record, it is faster to learn javascript and do anything you can imagine vs learning css and spending a lifetime learning new, old, cheat-cut rules that javascript solved decades ago. I love this channel, I use css every day, but javascript took a couple years to learn while I'm always trying to catch up to css to do things I could already do in js. The reason why it's important to keep up with css is gpu acceleration, react, and it's just plain fun. But seriously, for people who avoid javascript because it's hard to learn or complicated, if you can learn css you'll be a beast at javascript. Being able to do both makes you an expert with no limits but imagination.
One thing you can do if you want this effect to work in all browsers without using .js would be to not use display none at all, but just keep the opacity animation for animating back and forth, but then also add ponter-events: none to the hidden state so that it doesn't block any mouse events going over it.
Does something like this mean we will be able to create multi-level menus with just CSS and HTML without relying on JavaScript? Love your videos Kevin and I am learning a lot about modern CSS. Currently working it into my designs and finding it solves a lot of issues I have had in the past.
wait, why does translate animate despite not being mentioned in transition-property? and what, you can define transition-properties without a comma in between? :o
If I was trying to implement this into a typical navbar then, where clicking the hamburger icon shows or hides the links in the navbar, would this still work this way? Instead of opening with one element and having to click another element to hide it again. Appreciate the videos always!
Finally! Also great background news with how it works. I have a question about multiple dialogs. Do you know if it is possible to only use one ::backdrop with a color instead of all. I want the functionality to open two dialogs at the same time, but because the ::backdrop is stacking, the website beneath is getting more and more darker. Just curious if you know what I mean and if you have a creative solution to this :).
Oh this is new? I’m just getting into really learning web development (I come from RF test automation) and used this in my first little project. Assumed it was just the normal way to do this.
20:20 Maybe not worth it for just one property and a simple 'dialog[open]' selector, BUT it should still be possible to use nesting for the @starting-style if you segregate the pseudo-element reference using the combine '&' operator for both cases. That way, you can independently maintain the selector for the parent context, like this: dialog[open] { &::backdrop { opacity: .75; } @starting-style { &::backdrop { opacity: 1; } } }
This is exactly what I needed, but it isn't animating when I close() a dialog on Safari (v 17.5), not even in the example on the "transition-behavior" website on MDN.
My thinking is that this was pushed until dialog spec was done (it was a proposal since at least as early as 2011). Simply because dialog _relies_ on display property for its visible state, rather than opacity/visibility , which would prevent interaction with underlying elements.
How to do an Expanding animation for DISPLAY like the same as opacity? Like the `Display: none` element will show like a Stage curtain falls when it is given `Display: block` and vice versa
So, the translate animated, but it was not one of the transision-properties... or was I missing smomething? Off to try this out now, hope FF and Safari hurry up with this :D
I used to use delay of N seconds and a 0 second animation on the display property to get around this. I guess this method is somewhat more straightforward but the starting-style syntax looks a bit awkward. I’m sure I’ll get over it.
Seems like it wont work in a bunch of Browsers like Safari or Firefox when I take a look at caniuse and "allow-discrete" or "@starting-style". So we can finaly transition between display none and display block but we have to wait a long time until we can use it on production systems.
How can I apply that to the DETAILS tag once what is hidden automatically is everything that isn't SUMMARY? I mean, there is no css definition to them (at least from what I inspect in devTools)
When I do transition on visibility, from visibility: visible to visibility:hidden, the transition duration acts as delay, the state change happens after the duration time, but on the other hand, transitioning from visibility:hidden to visibility:visible happens immediately. How comes 😅
Finally, it took only 20 years 😂😂
Hhahahahhha Riiiiight!!!!
28 years, to be exact 😁
For people targeting Firefox, it’ll take another year, apparently
And if you were running the show, you would’ve had it done in two years? Give me a break, dude.
since display property had no numeric value it was supposed not to translate
Wow, I never thought this day would come
It's pretty incredible how almost every difficulty I find in CSS gets addressed by your videos handedly. Awesome stuff
It really is amazing how difficult CSS manages to be considering it's goals.
Wow, finally~!!! The days of width/heigh/margin/paddingt: 0px; opacity:0; pointer-event:none; finally comes to an end
Also tabIndex="-1" and overflow: hidden
@@nitsanbh Yes, this one too.
Today is a good day! I felt it in my bones when I woke up this morning!
Jebus, Web Dev has gotten so easy these days!
SO glad we've got all these Frameworks that overcomplicate matters again
Lmfao, well, to be fair I used to be able to teach every single possible style attribute and value in a month and have them all memorized. Now I can't do half of css without gpt or the docs because everything has a specific name and specific limits (like vh not accounting for mobile browser address bars, or justify content vs justify item).
This is harder than it's ever been, but we've never had so much broadband internet, search and LLM tools to help navigate it on the fly.
We dev used to be way way easier though, we could build websites in notepad without a linter or IDE. No joke I did it for like 6 years in notepad.
@@paxdriveras someone starting coding / programming I agree, of course the more I do it gets easier but it should be more simplified imo
The amount of animation that are going to be made in the next 2 hours by me is going to be ungodly
😅😅
But we still cant transition to height auto...
There's an upcoming CSS value which will allow that -. height: calc-size(auto);, for example. Under development in Chrome, I believe.
unfortunately :(
but we can do a css only solution with grid :)
height: calc(auto) works
Actually we can now
Looking forward to playing with this tomorrow
Very glad I watched to the end. That last bit of information will be very useful.
It 's an excellent tutorial and very helpful video. Finaly we can use display none and add some transitions! You are the best with as well Web dev simplified for JS. I learned a lot from both of you!
My first video was on 223k, now looks how much it grows. Because of you life is becoming easier and easier thank you.
That took sooooo much time and research to find out you couldn't animate display...
And now it finally works 🎉
THIS IS THE BIGGEST NEWS IN CSS EVER!!! 😲 I'm still shaking! can't believe this is real! thank you so much 💗🙏
Thanks for the explainer on discrete animations, and the “allow-discrete” transition-behavior.
I saw another video mention that property but I didn’t understand because it didn’t explain what that is or how it works. Thanks for yet another excellent video!
This is amazing! I've been waiting for years for this feature to come, can't wait for browser support to be good enough for me to start using it!
I know your goal is to make people fall in love with CSS, so I wanted to let you know that you've managed to make at least one person, me, fall in love with it! I adore watching your videos and I actually fell in love with finding out new things I can do with CSS! Thank you!
The way Kevin explains complex concepts ❤❤❤
I've been waiting for this for YEARS lol so happy about this!
yaaaaaay now this and page transition , anchor position , container query we will be happy
Love the content, Kevin! Wanted to let you know there’s an ad break right in the middle of the plug you make for your course. Probably not good for click-thru’s. Your content is amazing and needs to reach as many people as possible. 😊
great video! Thanks for taking the time in explaining the little details, those were really usefull 🙏. I was looking for this kind of explanation because I knew this was new, but after some tries I was not being able to animate the display property 😆, now I can 😎.
Really well constructed way to explain through this concept. I’d say that it’s one of the trickiest concepts I’ve had to deal with and you’ve revealed some quirks about this process that reveal why some things weren’t working in the past. Thank you :-)
Good news! As of testing today, it is working in all major browsers! It is working in Safari v17.6, Firefox v129.0.1, and Opera v65.0.3467.78 (It was already working in Chrome and Edge)
Can I Use doesn't have Firefox 129 or Safari 17.6 listed yet though, but confirmed working!
And it will be working for iOS when iOS 18 launches, which is most likely being released next month-ish
Crazy timing. I legit just found this two days ago for changing content visibility.
Watching the Can I Use part all of a sudden reminded me of having to have a work around for border radius lol.
Finally!!!! Thanks for the heads up.
As always, great video! That's why you are one of my sources of info when I need to update coding knowledge.
I instantly know some of my sites that could use this and where it would make things 100% easier! 👍
Allways great Videos you make! Happy to have you💙
Are you sure `transition-property: opacity display;` is working? Values shoud be comma separated
Thank you so much. I needed to do this today! I really appreciate you taking the time to cover the details and the caveats.
this looks clean af to use, thx a lot Kevin ! Can't wait for it be better supported
Thanks a lot Kevin! Now that you mentioned it btw, what about a video on the gotchas between css nesting and sass? I remember you did one in the early days, but the spec became a little more permissive since then
The keyframes method which is basically the only one working cross-browser, requires backdrop set to none. 1. That removes the focus that is required for the animation but defeats the whole accessibility purpose. Also then 2. you need to set your event to window if you want the modal to disappear when you click the backdrop. 3. Of course the easy customization of the backdrop color. I liked the video cause I am big fan of Kevin but unfortunately as exciting as it looks, we need better support on this. It's a nice feature.
Great explanation, and very helpful as always. Thank you!
Thanks!
Thank you!
Finally Maahn 🎉🎉 🕺
I can't tell how much I need it. Must needed to animate modal.
Perfect timing, we recently converted to dialogue for all our modals, this will be a nice upgrade 🙂
I was asked by our lead dev to convert our off-canvas to a dialogue as well, I however think this is not the appropriate use case and may cause some usability issues?
AlsoI noticed your link in the desc. isn't formatted correctly - the query string isn't part of the link anymore.
Thank you css daddy 😭
Total game changer
You just made my day, thx!! Finally
Interesting. Though I'm not sold on the logic behind "transitioning" the display property. It's more like controlling the timing of when that discrete property applies, there's no in-between state. Personally, in this example, I'd probably just use `opacity: 0` to make the popup invisible and `pointer-events: none` to ensure it can't be interacted with when it's invisible. But that @starting-style looks like it could have lots of uses! Thanks for sharing.
Now I know how framer motion works. Seems like I can get a lot more control doing in this way though.
At 13:10, can somebody tell me why translate is animating even though we are only specifying transition-property display and opacity?
Edit: it looks like transition-property takes a comma separated list, and has an initial value of 'all'
@@tim-pn2fq I was wondering the same. Thanks for digging this up. :)
You can use pointer-events:none on overlaying invisible modal and transition from there
For the record, it is faster to learn javascript and do anything you can imagine vs learning css and spending a lifetime learning new, old, cheat-cut rules that javascript solved decades ago.
I love this channel, I use css every day, but javascript took a couple years to learn while I'm always trying to catch up to css to do things I could already do in js.
The reason why it's important to keep up with css is gpu acceleration, react, and it's just plain fun. But seriously, for people who avoid javascript because it's hard to learn or complicated, if you can learn css you'll be a beast at javascript. Being able to do both makes you an expert with no limits but imagination.
One thing you can do if you want this effect to work in all browsers without using .js would be to not use display none at all, but just keep the opacity animation for animating back and forth, but then also add ponter-events: none to the hidden state so that it doesn't block any mouse events going over it.
So glad to see this, But I am wondering how can I use in a faq using details & summary, Thank you so much Kevin.
What a time to be alive ✨
thanks, this information is very useful
Does something like this mean we will be able to create multi-level menus with just CSS and HTML without relying on JavaScript? Love your videos Kevin and I am learning a lot about modern CSS. Currently working it into my designs and finding it solves a lot of issues I have had in the past.
Finally that's really useful
Wow that is so powerfull and will make things alot easier
Holy hell, thank you so much for this
Nice they starting to add stuff like this but I wouldn't implement it yet for compatibility stuff.
Love your Content, Thank you.
Whoooa, bought in framer motion to achieve this for a big project before.
wait, why does translate animate despite not being mentioned in transition-property? and what, you can define transition-properties without a comma in between? :o
If I was trying to implement this into a typical navbar then, where clicking the hamburger icon shows or hides the links in the navbar, would this still work this way? Instead of opening with one element and having to click another element to hide it again. Appreciate the videos always!
Finally! Also great background news with how it works. I have a question about multiple dialogs. Do you know if it is possible to only use one ::backdrop with a color instead of all. I want the functionality to open two dialogs at the same time, but because the ::backdrop is stacking, the website beneath is getting more and more darker. Just curious if you know what I mean and if you have a creative solution to this :).
Oh this is new?
I’m just getting into really learning web development (I come from RF test automation) and used this in my first little project. Assumed it was just the normal way to do this.
20:20 Maybe not worth it for just one property and a simple 'dialog[open]' selector, BUT it should still be possible to use nesting for the @starting-style if you segregate the pseudo-element reference using the combine '&' operator for both cases. That way, you can independently maintain the selector for the parent context, like this:
dialog[open] {
&::backdrop {
opacity: .75;
}
@starting-style {
&::backdrop {
opacity: 1;
}
}
}
Claude Opus just did this for me to create luminous slide up price cards last week
Thanks for this introduction! Although my old head is already pretty full with all the commands and rules... not only for CSS 🤭
Oh gosh! Thanks, finally!
This is exactly what I needed, but it isn't animating when I close() a dialog on Safari (v 17.5), not even in the example on the "transition-behavior" website on MDN.
My thinking is that this was pushed until dialog spec was done (it was a proposal since at least as early as 2011). Simply because dialog _relies_ on display property for its visible state, rather than opacity/visibility , which would prevent interaction with underlying elements.
Getting ready for a bunch of fade in sites now
Can you make a roadmap of your videos/playlist to learn CSS?
How to do an Expanding animation for DISPLAY like the same as opacity?
Like the `Display: none` element will show like a Stage curtain falls when it is given `Display: block` and vice versa
@16:36 was showing as not working because the properties in `transition-property` need to be comma-separated
So, the translate animated, but it was not one of the transision-properties... or was I missing smomething? Off to try this out now, hope FF and Safari hurry up with this :D
Please, how to combine this technique with your solution for accordions made using grid-layouts and transitioning from 0fr to 1fr?
Thank you so much css devs, really needed this so bad. Had to use settimout and it was killing me everytime I wrote it
Yeah, and I don't want to use JavaScript in my website if I don't want to and my website does not use it at all! Only HTML and CSS! :D
@@graysonpeddie that's plane wierd. Static websites are a thing of the past
@@heyyounotyouyou3761nothing wrong with static websites 😊
I used to use delay of N seconds and a 0 second animation on the display property to get around this. I guess this method is somewhat more straightforward but the starting-style syntax looks a bit awkward. I’m sure I’ll get over it.
Nice to have a simple version of from…to like in the animation key frame syntax though with “starting-style”!
Will it work in this case?
dialog {
...
&[open] {
...
&::backdrop { ... }
@starting-style { /* dialog starting styles */ }
@starting-style &::backdrop { /* dialog backdrop styles */ }
}
&::backdrop { ... }
}
I hate having to wait for new features like this hahaha
starting-style... Hopefully Firefox will support that in the future. Firefox seems already behind compared to Chromium-based browsers...
I've never clicked on a thumbnail so fast
Miracles do happen 😮
Cool stuff. When will these be supported by most modern web browsers?
I guess most would only require Chrome and Safari?
Great video as always! Curious as to why the translate: 0 -25vh; animates without being specified as a transition-property?
Nowadays I'm only opening firefox to check if the primary content is visible - don't expect them to be up to date with any css features
Seems like it wont work in a bunch of Browsers like Safari or Firefox when I take a look at caniuse and "allow-discrete" or "@starting-style". So we can finaly transition between display none and display block but we have to wait a long time until we can use it on production systems.
Really wish legacy code bases could use this and modal/pop-up from the newer HTML stuff.
Dialog with transition, good. but you forgot to show us button onclick method by the way 🙂
tried to find this on his codepen, couldn't find it!
Key frames are also global so be careful what you call them to prevent accidental overrides.
Why didn’t “translate” have to be added in your “transition-property” list but still got animated? Are there more properties that always transition?
tnx a lot
You're an absolute guru, Kevin 🫂
I hesitate to even ask, but a CodePen demonstration of this for *_posterity_* would be incredible
How can I apply that to the DETAILS tag once what is hidden automatically is everything that isn't SUMMARY? I mean, there is no css definition to them (at least from what I inspect in devTools)
When I do transition on visibility, from visibility: visible to visibility:hidden, the transition duration acts as delay, the state change happens after the duration time, but on the other hand, transitioning from visibility:hidden to visibility:visible happens immediately. How comes 😅
How come the `translate` property was transitioning without the `transition-property` list having it in there?
Hello, thanks for the tutorial but i can get it to work on mobile (safari and chrome) Any advice? Thanks!
discrete animations flip at the 50% mark? I've been using some (mostly on `position`) and they didn't flip until 100%...
About flippin' time!
So wouldn't you have been able to add a nested &::backdrop within the previously set @starting-style?
So we could make a truly css only accordeon or animated tab group now?
How would you implement this on a multi row header to hide certain rows? I cant figure it out.