That was a really well made tutorial. Clear explanation, on point tips. Thanks for that and keep up the great work. I'll gladly subscribe, share this and check all your past videos ❤
@@OptimisticWeb It was my pleasure, honestly. I've mentioned the video and your channel in one of my live streams and everyone loved it. I really hope your channel receives the attention it deserves. Greetings from Brazil ❤️
Thank you! I’m glad you’re enjoying the videos. Clear explanations are what I aim for. Flexbox and Grid are great topics, and I’d love to dive deeper into them. But these topics require a lot of time, which I’m a bit short of right now. I’ll keep them in mind for the future!
I used a similar solution for years but now... There are troubles with accessibily. Screen readers does not like form fields used for something different and JS Is unfortunately needed to change values of aria-attributes
Completely agree! Using semantic HTML with ARIA attributes is definitely the best approach. However, we can still achieve accessibility by using roles and ARIA attributes, along with something like sr-only classes to hide input elements. Then, we can use focus pseudo-classes on the tabs and add outline styles when the input is checked. Appreciate your feedback!
@@OptimisticWeb nice and agree. I suggest you to always provide accessibile examples using aria roles ti promote these kind of solutions to everyone. Actually It Is AN "half example" or at least an "outdated example". If you Always provide accessible code, that now can't be avoided, you'll remain a reference for years
Thanks for the suggestion! I totally understand the importance of accessibility, and try to include it whenever possible. But sometimes, I have to omit a thing or two to keep the video short and focused - especially since many viewers still don’t watch the entire video. :) I’ll do my best to cover more in future content. Thanks again!
Excellent tutorial for creating tabs as a reusable widget. I like to create things which can be used in different projects. I would take care of the active count and add like 5 more, as you might never will have more than 8 tabs. This part is not dynamic as the tab-count. What will be the easiest non JS solution to make the tab content fade in, when corresponding tab is active. Display property just can be changed with the new alow-discrete or? Hmmm....
Thank you! Yes, we should be able to animate between the display none to block with the help of allow-discrete. If, for any reason, that doesn't work everywhere, we can slide-in/slide-out content blocks or find some other effects, for example, the incoming block can slide in from the left side while the outgoing one can slide out to the right.
@@OptimisticWeb yes, there are some options. Thanks for your reply. Thanks for the great video again and keep them coming, they are stunning. I know it's a lot of work and every fine detail in your video is on point.
Thanks for watching! As I mentioned in my previous comments, we can use roles, ARIA attributes, and something like sr-only classes to hide input elements. Then, we can use focus pseudo-classes on the tabs and add outline styles when the input is checked, etc. Obviously, it isn't the best approach, but exploring other ways to solve a problem helps in understanding different concepts.
There shouldn’t be any difference between offline and online environments for this. I’d recommend comparing your code with the demo link to spot any issues. Sometimes, it’s easy to overlook small mistakes that can make a big difference.
Thanks for the input. We can still maintain accessibility by replacing display none with another method, like using sr-only classes to hide input elements. Then, we can utilize focus-within on the tabs and add outline styles when the input is checked. Of course, using semantic HTML along with aria attributes would be a better approach, but that’s a topic for another video.
Yeah but it’s more of the W3C failing hard yet again when they make the specs. They really don’t think them through considering how long it takes them to implement anything
Haha, sometimes less is more! But it’s about exploring different approaches and learning new things. Plus, those 3 lines of JS will still need some CSS to create a nice-looking UI. 😂 Thanks for the comment!
Hard coding the fact that there are 3 tabs everywhere is a cheat to make this "HTML and CSS" only. Several cool tips in here, but saying you can make amazing tabs like this with no JS is somewhat disingenuous. You can make a tab strip of exactly however many tabs you hard code sure, but you can't make a generic tab strip.
Thanks for the feedback! There’s actually a way to overcome the fixed number of tabs in CSS using anchor points, but it’s a recently released feature that isn’t widely supported yet. That’s why I skipped it for now. I might revisit this with a new solution once major browsers start supporting it.
Thanks!
Thank you so much for the Super Thanks! 🎉 Your support means a lot, it really motivates me to keep creating more content. You're awesome!
Wow! animated tabs without JS, css has really come a long way
Indeed, CSS has really evolved! It’s amazing what you can do with just a few lines of code. Glad you enjoyed the video.
That was a really well made tutorial. Clear explanation, on point tips. Thanks for that and keep up the great work. I'll gladly subscribe, share this and check all your past videos ❤
Thank you so much for the kind words! I’m glad that you found the video helpful. I really appreciate you subscribing and sharing.
@@OptimisticWeb It was my pleasure, honestly. I've mentioned the video and your channel in one of my live streams and everyone loved it.
I really hope your channel receives the attention it deserves. Greetings from Brazil ❤️
Thank you so much! I’m truly grateful for your support.
That was a great video,Bro.A sub for you.Learned many things.
Thank you and welcome aboard!
very helpful video for me as a begginer
Thanks for watching! Glad it was helpful.
like and subscribed immediately! soo great stuff, thanks man
Awesome, thank you!
Thank OW, I like your videos. They're well explained, very practical & usable in the real-world of web dev 👍
Thank you! I’m happy to hear you find the videos practical and useful. That’s exactly what I aim for. Your support means a lot!
Wow! Fantastic This amazing 😍😍😍😍🌹🌹
Thank you!
bro I really enjoy your videos they provide such clear explanations. Could you make some in-depth videos on Flexbox and Grid?
Thank you! I’m glad you’re enjoying the videos. Clear explanations are what I aim for. Flexbox and Grid are great topics, and I’d love to dive deeper into them. But these topics require a lot of time, which I’m a bit short of right now. I’ll keep them in mind for the future!
@srinathsagar4736 A couple of videos on CSS grid layouts are coming. The first one will land tomorrow. Don't forget to check that out.
Add htmx 2.0 to make the innerHTML conetent dynamic.
Sure, but it’s not within the scope of this video. 😊
Very nice. Thank you
Thank you! Glad you liked it.
I used a similar solution for years but now... There are troubles with accessibily.
Screen readers does not like form fields used for something different and JS Is unfortunately needed to change values of aria-attributes
Completely agree! Using semantic HTML with ARIA attributes is definitely the best approach. However, we can still achieve accessibility by using roles and ARIA attributes, along with something like sr-only classes to hide input elements. Then, we can use focus pseudo-classes on the tabs and add outline styles when the input is checked. Appreciate your feedback!
@@OptimisticWeb nice and agree. I suggest you to always provide accessibile examples using aria roles ti promote these kind of solutions to everyone.
Actually It Is AN "half example" or at least an "outdated example".
If you Always provide accessible code, that now can't be avoided, you'll remain a reference for years
Thanks for the suggestion! I totally understand the importance of accessibility, and try to include it whenever possible. But sometimes, I have to omit a thing or two to keep the video short and focused - especially since many viewers still don’t watch the entire video. :) I’ll do my best to cover more in future content. Thanks again!
Tabs ARIA requires JS
Good Work❤❤❤❤
Thank you!
Awesome 😮
Thank you!
Excellent tutorial for creating tabs as a reusable widget. I like to create things which can be used in different projects. I would take care of the active count and add like 5 more, as you might never will have more than 8 tabs. This part is not dynamic as the tab-count. What will be the easiest non JS solution to make the tab content fade in, when corresponding tab is active. Display property just can be changed with the new alow-discrete or? Hmmm....
Thank you! Yes, we should be able to animate between the display none to block with the help of allow-discrete. If, for any reason, that doesn't work everywhere, we can slide-in/slide-out content blocks or find some other effects, for example, the incoming block can slide in from the left side while the outgoing one can slide out to the right.
@@OptimisticWeb yes, there are some options. Thanks for your reply. Thanks for the great video again and keep them coming, they are stunning. I know it's a lot of work and every fine detail in your video is on point.
😮😮😮 amazing
Thank you!
Mmm, how about accessibility? The radio button not have a focus state.
Thanks for watching! As I mentioned in my previous comments, we can use roles, ARIA attributes, and something like sr-only classes to hide input elements. Then, we can use focus pseudo-classes on the tabs and add outline styles when the input is checked, etc. Obviously, it isn't the best approach, but exploring other ways to solve a problem helps in understanding different concepts.
I have tried this using Visual Studio but I don't get the same output, any ideas as to why as it shows up correctly on the online test that I created.
There shouldn’t be any difference between offline and online environments for this. I’d recommend comparing your code with the demo link to spot any issues. Sometimes, it’s easy to overlook small mistakes that can make a big difference.
How about accessibility?
Fails because it needs js for aria selected true or false.
Thanks for asking! I’ve shared some thoughts on accessibility in my reply above.
This fails hard when it comes to accessibility. Aria selected true or false for examples needs js.
Thanks for the input. We can still maintain accessibility by replacing display none with another method, like using sr-only classes to hide input elements. Then, we can utilize focus-within on the tabs and add outline styles when the input is checked. Of course, using semantic HTML along with aria attributes would be a better approach, but that’s a topic for another video.
Yeah but it’s more of the W3C failing hard yet again when they make the specs.
They really don’t think them through considering how long it takes them to implement anything
Still needs js for accessibility
Yes, fully accessible code will require JS, but as I mentioned in my other comments, we can still make the code accessible. Thanks for watching!
@@OptimisticWeb that's not still accessible without js
That’s right, not 100% accessible.
@@OptimisticWeb it's a binary, not a percentage
I learn the Isolation property exists
Awesome!
Approximately 100 lines of css code if you js apply only 3 line of code😂
Haha, sometimes less is more! But it’s about exploring different approaches and learning new things. Plus, those 3 lines of JS will still need some CSS to create a nice-looking UI. 😂 Thanks for the comment!
Hard coding the fact that there are 3 tabs everywhere is a cheat to make this "HTML and CSS" only.
Several cool tips in here, but saying you can make amazing tabs like this with no JS is somewhat disingenuous. You can make a tab strip of exactly however many tabs you hard code sure, but you can't make a generic tab strip.
Thanks for the feedback! There’s actually a way to overcome the fixed number of tabs in CSS using anchor points, but it’s a recently released feature that isn’t widely supported yet. That’s why I skipped it for now. I might revisit this with a new solution once major browsers start supporting it.
wow..
i hit the 500 like button 🥰🥰
Awesome, that’s a milestone right there - thanks for making it happen!
CSS JS
Haha, love the emoji combo!