Indeed! It's so nice to see that all of this can be done natively in CSS. 🙂 Thanks so much for the box-sizing tip, Daniel! It does work. 🙂

Thank you so much! I'm thrilled to hear you think so! 🙂

Thanks! I'm glad you think so, Paul! 🙂

Thank you so much; I'm incredibly happy to hear this, Tony! It means a lot! 🙏 Is there any chance you could share where you've seen the other explanation? I'd like to see what I did differently for future videos. You don't have to share it publicly if you're not comfortable with it. 🙂

@@CSSWeekly Hi Zoran, I think what I meant was that your demo (all your demos actually!) focus in on the topic by keeping it simple & focussing in on the actual topic in a nice isolated example to make your point. Personally I find it clearer this way. I've implemented some of your topics to great effect on some of the sites I'm working through on a course I'm taking to enhance the sites I'm writing! Some of the other examples from other really good youtube creators/teachers have taught the topic inside a more complex example where there's more going on than just the core topic. Sometimes I find it less clear when its dressed up in a more complex example. I don't need it super dumbed-down, I'm getting the hang of it, but unlike a pure programming language I can get my head around fine, as it's where I came from, I sometimes find HTML & CSS a little baffling at times. I'm in my 50's, did some college back in the day, got my 1st programming job back in 1989 using cobol & old school 4GL procedural languages, & had a 16 year career working in various small and medium sized software houses, moving into OOP & SQL in languages like vb & delphi, before moving off in a different direction. Over the last couple of years I started casually re-engaging with software dev in a hobbyist capacity, out of boredom in my spare time & recently I've been doing more & more HTML, CSS & JS and it's pulling me back in and I'm loving it! On a separate topic, I wonder if you could create a CSS nesting video. At the moment I'm working through a great Udemy HTML CSS & JS course, but the course is a couple of years old & not updated to reflect the newer CSS methods you & others deal with. They're still using the classic way of writing CSS , for example, classic padding & margin & not block-level, & header {}, then header nav {}, then header nav ul {}, then header nav ul li {}, then header nav ul li a {}" . I've watched a few videos on nesting but from quite a while back when browser support wasn't as widespread as it is now. I apologise if you have one already, I did look but didn't notice one. I know I'd love seeing a CSSWEEKLY video on this topic, clearly explaining it all. Keep it up mate! 👍

Thank you so much for all your insight and compliments, Tony! It really means a lot! 🙏 Oh, I was working with Cobol at my first programming job, too! It was mainly maintenance on an existing sytem, around 2005. I moved on to Web Development after that. 🙂 You'll be happy to hear I have a nesting video planned and ready to record. So, hopefully, it will be on the channel in the next two weeks. 🙂

Sit amet, consectetur. 🙂

Yes, hopefully it will! Thanks, Ahmad! 🙂

The more css properties you have, the more problems you receive. To solve those new problems new css properties are introduced.

Yes, this might be the case with new features regardless if we're talking about CSS or something entirely different. 🙂 And I think you might like my quick tip precisely on the subject of solving all CSS problems in one fell swoop: kzfaq.infonXpsbTiAGwc

@@CSSWeekly Oh, that tip, how can I forget about it 😁🤦‍♂

Thank you, Huynh, for watching and commenting! 🙏

@@CSSWeekly keep going :d

Sure thing, I will! 🙏

Thanks so much for your insight and thoughtful reply, Sean! I really appreciate it! 🙏 Yes, I will do a few follow-up videos, and the first one, which is nearly done, is on animating the HTML details element. Popover is certainly something I intend to cover soon. 🙂 You're right about using "all" with transitions. Thanks for pointing it out! 🙏

Thanks so much! 🙏

Indeed, Nasim. It's much easier and nicer to do this with CSS. Thanks for watching and for your comment! 🙏

I'm thrilled you think so, Fitsum! 🙂 But the important question is: did it work? 😊

Thanks for your question, Luka. 🙏 The CSS Grid approach with fraction units is the only pure CSS solution I'm aware of that works in all major browsers today, so that's exactly what I'd recommend. 🙂

That's a fantastic question! 🙏 I don't think it's possible. The transition on "display" happens instantly; it just "flips" at the correct time-before the animation starts or after it finishes. You can animate changes in CSS Grid, but I haven't explored this yet, so I can't tell to what extent. Animating track sizes is possible, but I'm not sure if that's the case when switching between different grid layouts-at least not with a simple transition or animation. 🤷‍♂️

@@CSSWeekly sounds to me like it's time to have a play 👍 great video thanks...

You're very welcome! 🙂

Thanks so much for clarifying; I wasn't aware of this. 🙏

@@CSSWeekly regardless the possibility of transitioning on `display` is very exciting, due to the fact that `visibility` preserves layout geometry of that element, so for non-overlaying elements its not ideal.

Indeed it is! 🙂

I've heard that KZfaq does this, but I haven't seen it in action yet. 🤩 It's pretty cool. As the video has the transcript, they only need to trigger the animation at the timestamp when the "subscribe" word is mentioned. And I really want to play around with this and try to recreate it-maybe even do a video showcasing how it works. 🙂 But the most important question is: did it work? 🙂

Oh, I'm so thrilled to hear this, Cleo! Something similar happened to me more than once. 🙂 I appreciate your comment and am happy to hear where and how you found the video. 🙏

@@CSSWeekly I have to thank YOU for sharing your knowledge! 🙏 Looking forward to see more content from you 😊

Thanks so much, Cleo! 🙂

Thanks for your question, Felquis! It's "Experimental Web Platform features" flag. You can find it in if you open "chrome://flags" 🙂

Indeed. 🙂 One of the main challenges with CSS is backward compatibility. You can't just change or update an existing feature, as you might break half of the internet. So we get calc-size() even though most devs would say that calc() should just work like this. 🤷‍♂️

@@CSSWeekly i reckon they should Make something like “css2” and let people option in by adding some tag to their CSS file or something. And then they should make it just work, no weird hacks 😂 Like how hard it is to make 100% height on a div actually take 100% height of the screen without having to change body! Or how many years we will be adding “css reset” on websites. The current situation is a joke 😅

This suggestion sounds reasonable, Henrique. But I'm not sure it's feasible, as we don't really have clear versions of CSS since CSS3; there are just several different specs in different stages. 🤷‍♂️ It might be an even bigger mess if you needed to specify which version of the 'height' property you want to use. 🙂

@@CSSWeekly bring .swf back! 🍭

Oh, that'd be swell! 🙂 I used to create websites (or web experiences) in Flash / ActionScript 3.0 - it is only with jQuery that I realized we'd be able to do this natively on the web. But I never even imagined that it would be possible without JavaScript. 🤯

Yes, this would be ideal. According to the spec, calc-size() was added "for both practical and backward-compatibility reasons." 🙂

What exactly do you mean by weird, Shawn? 🤔 Yes, Kevin's solution (I assume you're talking about CSS Grid with fr units) is the only pure CSS solution that currently works cross-browser, so it's certainly a better option right now. 🙂

Indeed, Andrey! 🙂 Browsers are moving a lot faster these days, so hopefully, this will be in the baseline soon. 🙂

Thank you, Shah, and welcome to CSS Weekly! 👋 I hope you and your family are safe, that you'll always be safe, and that we, as humanity, find the strength and will to do away with violence and war once and for all. ❤️

Yes, ideally, it would just work with 'height: auto;' 🙂 Thanks for watching and commenting, John! 🙏

They're actively working on it, hooray.

Thanks for sharing; I didn't know that! 🙂

Yes, unfortunately. I wouldn't be surprised if they announce that they're switching to Chromium, to be honest. 🥺

​@@CSSWeeklyBoth Opera and Edge did that. It seems that it's only Firefox left.

Safari probably will never switch to the blink engine from webkit.

I'm not sure I understand what you mean. 🙂

@@CSSWeekly It's a bit distracting -- the moire effect that's visible on the shirt you're wearing ;)

Oh, ok, I understand. Thanks so much for pointing it out. 🙏 I guess it's time to get a better camera. Or at least a better shirt. 🙂

Oh, thanks for the kind words and your advice, Robert. 🙏 I didn't realize it was that bad, but the worst part is that I already have two new videos in the final stages of edit that feature the obscene pronunciation. 😔 I'll try to improve for the next recordings, and I hope you can bear with my "calc" until then. 🙂

@@CSSWeekly Thank you for your kind response and thank you also for receiving my comment in the constructive manner that I intended. I just subscribed to make sure I don't miss your future videos. Cheers and all the best to you.

I'm thrilled to hear this, Robert! 🙏 I'm aware that I need to improve in many areas, so I take all suggestions and critiques as gifts. I'm always looking for ways to improve, and when someone points it out directly, they make my job easier. 🙂

Cock size was unexpected for me too I’m sorry hahaha great video btw

Oh no! That's what it sounds like? 🙊😔