Yes, it is! Thanks for confirming it, Tommy! 🙂 I should probably do a better job of noting Windows alternatives. I just assume that people know by now that CMD is usually CTRL on Windows. 😕

Same for me, I tried it in the lastest Chrome Canary. I couldn't find CSSCalcSizeFunction in the flags list

Thanks for the heads-up, Levan! 🙏 I just checked it in the latest Chrome Canary 128.0.6578.0, and it no longer works. It seems that the implementation changed, and the "#details-content" Shadow DOM element is no longer exposed as pseudo-element ::details-content - I'm not sure if that's intentional or temporary, so this solution doesn't work right now. 🥺 I'll have to dig into it and see if there's a way to avoid this. 🤔

The calc-size() function should work if the Experimental Web Platform Features flag is enabled. The details content element is no longer exposed as a pseudo-element (::details-content), which is why this solution no longer works. 😔 Here's a demo that utilizes calc-size() - it works for me in the latest Canary: codepen.io/ZoranJambor/pen/GRaNZNV

Thanks, Jouni! 🙏 I don't think it changed. Those pseudo-elements are not visible as other pseudo-elements in DevTools (at least yet), so you can only get a sense of what's available by going through shadow DOM. This is how it looks for me in Chrome 126: cln.sh/RPM97CQZ - the hint that this is stylable as pseudo-element is attribute `pseudo="details-content"` Yes, you're correct. This is only working in Chrome right now, not Firefox and Safari, which don't have the same implementation. Sorry, I should have done a better job of explaining this in the video. 😔

Thanks so much! 🙏 I think that the product icons theme Fluent Icons, and file icons theme is Material Theme Icons Palenight. If you're interested, I go over my favorite file icons in this video: kzfaq.info/get/bejne/lbh_fJmlnMmsgXk.html And over my favorite product icons here: kzfaq.info/get/bejne/l7Jzrayfy7bVn2w.html

@@CSSWeekly Thank you sooo much, it was Fluent Icons - Keep up the unique works ; really nice to see !!

Thanks so much; I most certainly will! 🙂

Thanks so much for your insight, Thomas! 🙏 I wanted to showcase the easiest solution here to inspire others, but it does have the drawback you mentioned. The alternative would probably be something one should implement in production-it's cool that you mentioned the 'timeupdate' event here. 👏

Of course, Alex! I've taken this out of any context so I can show a potential negative in a funny way. 🙂

@@CSSWeekly I understand :) as long as one approach or the other works for the project that all that matters. Pure CSS architecture doesn't scale well with enterprise projects. So Tailwind is one of the escape hatches

Indeed! 💯 Every tool has its use case and its audience. But problems always arise when you try to force the wrong tool for the wrong job.

Thanks so much for sharing this, Chris! 🙏 Class-variance-authority seems like an interesting and useful approach-something I should dig into myself soon. 🙂

@@CSSWeekly it’s great! You can also use it for any kind of conditional rendering for string values. It’s “just” a function that based on some given pros or a combination of those it returns a string.

Sounds good! Thanks for sharing all your insught! 🙏

Thanks for your question, Jelil. 🙏 It depends. Generally speaking, the bigger the font, the smaller the line height you need. I would use 1.1 for a title/headline, but for paragraphs, something like 1.4 or 1.5 is usually better and more readable.

@@CSSWeekly thanks a lot. 🙏 Knowledge of these little concepts go a long way to improve our design and development skills.

You're very welcome! Indeed they do! 🙂

Thanks so much, Jelil, and welcome to the CSS Weekly family! 🙂 I'm using Screenflow to record and edit my videos, so this effect is achieved by adding a Callout action and then Zoom Up along with starting and ending transitions. I got quite a few comments that it's distracting and unnecessary, so I use it a lot less these days. 🙂

@@CSSWeekly that's okay. If the majority of your audience want you to present in a certain way, you just go by it, so far as it doesn't make your work more difficult.

Thanks! I really appreciate and take into consideration any feedback I get. 🙏

Oh, that's an interesting approach, Jens! Thanks for sharing it! 🙏 Do you have any rules for what you're using Tailwind? Like Tailwind for layout-styling in CSS?

@@CSSWeekly In general I use it most for layout yes but not for complex stuff like advanced grid layouts. It's also help to use components. That keeps things DRY and prevents repetition. I tried to not use Tailwind recently and went with Open Props. I like the approach for the most part but not using utility classes really held me back. I have also used BEM and Scss a lot. The main problem with BEM is that it get complex really quickly in a nested DOM structure. Good in theory, not as smooth in real life. I still like Scss for their mixins and other stuff. Tailwind + Scss would be a perfect match for me but they don't work together.

That's really interesting! Thanks for sharing it, Jens! I like BEM quite a lot and use it often. What do you mean by saying it gets complex in a nested DOM structure? Are you nesting elements deeply, like block__element__element? I still haven't tried Open Props, but I plan to do it soon. 🙂

@@CSSWeekly With complex BEM I mean that it can be a bit hard to follow in large components when there are BEM structures inside BEM structures. Like an advanced grid with many things. In the grid BEM components. I like to keep it more flat. Utility classes are very flat. Then I never need to fight complexity.

Oh, I see. Connecting those can get tricky. 🙁 A lot of people coming to BEM get the idea that CSS should follow HTML structure, and then they end up with selectors like BLOCK__ELEMENT1__ELEMENT2 (instead of BLOCK__ELEMENT2), which becomes unreadable quite fast. 🤷‍♂️

There have been more suggestions on naming versions. 🙂 My take is here: x.com/cssweekly/status/1727247796020158618 😜

Yes! :)

Thanks, my friend! 🙏 Yes, I think you can achieve this if you don't use native subtitles functionality but implement your own-you could hide them from the user but have them available behind the scenes. That's something you probably need to do if you want to style them specifically, as CSS :cue pseudo-element is quite limited.

Thanks for your question! You can inject HTML into any page with JavaScript, so yes, you can add buttons. 🙏 What kind of buttons are you looking to add?

@@CSSWeekly I would like to add the "watch later" and "history" buttons to the compact mode. I tried to copy the code from other buttons (download, etc.) and replace the name and link. But it didn't work out, because I can't write code😕

Oh, this doesn't seem like a trivial task at all. 😕 Tweaking how things look is easy, but adding buttons that hook into an existing app's functionality (like KZfaq in your example) probably requires that you understand how the app works. Your approach was on point. My guess on why it didn't work would be that KZfaq handles clicks on these buttons in JavaScript with event listeners, so on the copied button, one of its classes is used to handle click events, in which case your default link address functionality is ignored. You could potentially work around it by removing the classes from the button to see if any of these are used to handle click events. But it's difficult to say this for sure, as I don't know what it is exactly that they do. 😔

@@CSSWeekly Thank you for your attention to my question. At that moment, I was extremely interested to find out what additional features Arc Boost provides and how they can be used effectively.

You're more than welcome! 🙂

Thanks so much for this, Jayden! 🙏 I wasn't aware that resourceLangId could be used for this-it really is a nice improvement! 🤩 Again, thanks so much for taking the time to share your insight on this and share a better solution! 🙂

Thank you, Ahmad! I’m glad you found it interesting. 🙂

Thank you, I appreciate it! 🙏 That’s an excellent idea! I’ll look into it, as it definitely seems to be something people might like. 🙂

I am also very much interested in this effect!

❤️

Thanks so much for the compliment, and a fantastic question, Petr! 🙏 To be honest, I have no idea how this affects pagespeed metrics. As this is an intentional UI improvement (that you could potentially opt out of using prefers-reduced-motion), I guess it shouldn't affect those metrics negatively. But I can't really be certain without digging into it. Do you have any insight into how a CSS animation on page load affects pagespeed metrics, perhaps?

@@CSSWeekly I don't... but I asked my page-speed specialist friend. If I have any news, I let you know.

That's very cool. Thanks so much! 🙂

Indeed, the Material Theme is fantastic! 🙂

Glad you think so, Carlota! 🙂

Thanks so much, Fred! 🙏 This is "Monaspace Neon" - I go over my favorite coding fonts in this video, in case you're interested: kzfaq.info/get/bejne/l6ukZ8-fsL-RZas.html&t 🙂

Thank *you* for watching and commenting! 🙏

Oh wow, I didn't realize it's that bad. 😔 Thanks for your feedback and the suggestion, Davidov! 🙏

Thanks so much for sharing your insight! 🙏 I agree; in the real world, particularly with clients, it would be difficult to "sell" a key interaction like this as progressive enhancement, so I'd probably reach for a cross-browser solution, too, even if it requires JavaScript. 🙂 Thanks for the suggestion about noting browser support earlier in the video. It makes perfect sense. 🙏

That's a fantastic choice! 🙌

@@CSSWeekly True!🙌🏻

Also, there's a repo on GitHub on how to make any font to have ligatures. Could you please make a tutorial on that?

I didn't know this is possible without digging into font files and creating new glyph. 😳 Do you have a link to the repo?

Ah I was thinking the same during the video, but didn't know there was already a proposal. Looking forward to that! Meanwhile, we can use Sass loops, which work quite well.

Oh, I haven't heard about sibling-index() - I'm already looking forward to playing with it. 🙂 Thanks so much for watching, and sharing this, Adam! 🙏

Thank *you* for watching and commenting! 🙂

You're very welcome! 🙂

That's a fantastic question! 🙏 As far as I know, there is currently no way to use a counter in CSS as a part of a selector. I wanted to make it work like this for this demo, but I don't think it's possible right now. 😔

And if it ever becomes possible, I'll certainly create a guide on how it works. 🙂

You can use a Sass loop. for $i from 0 to 4 { .your-selector:nth-child(#{$i}) { ... } }

What do you have in mind? Why do you want to retrieve the counter value? Can't you just use :nth-child()?

Currently, you can't use the :nth-child() index in the property value. In my example, if I could use the index of :nth-child() in calc(200ms * INDEX), I wouldn't have to set --i in HTML to increase the delay for every item. I hope this makes sense. 🙂

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

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? 🙂

Thank you, Tim, for watching! Yes, it should work the same. 🙂 And if you want to make the email clickable, I have a follow-up video on how to set it up here: kzfaq.info/get/bejne/jc6nqaZyx7iuhnk.html

I'm glad to hear it was helpful! 🙂 Wow, this sounds interesting and like it shouldn't happen in the first place. Have you figured it out, or do you have a demo where this can be seen? 🙂

@@CSSWeekly have not figured it out, I do have a demo but my comment will be deleted if I link it. Can I share w you on discord or Twitter or something ? Idk what I've done wrong

Of course. I'm @cssweekly on Twitter; DMs are open. 🙂

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

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

I haven't heard an argument about this before, Florent. I would say I disagree, but I might be missing something. 🤷‍♂️ What kind of effect exactly?

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

Yes, indeed, it will! I love the new features that are coming to HTML & CSS. 🙂 We're moving in the right direction, even though it might be hard to keep up with everything new. 🙂

That is such a wonderful compliment, Talat! Thank you so much; it means a lot! 🙏

Yes, it's unfortunate that Firefox is lagging. 😔 I haven't thought of that, but it does work exactly the same. Thanks for your insight, Ahmad! 🙏

I agree wholeheartedly, Jens! 🙂 But more and more things like this are possible with new CSS features, which are certainly steps in the right direction. 🙂