Kevin I just wanted to say thank you for your amazing content. I hated CSS back when I did some web development courses at university a decade ago and after finding your channel 2 years ago you have made me fall in love with it and help me decide to try and work towards a career as a Front End Developer. Love from Australia 🤟
That can be anything that we learnt from University or collage will be hated and when some youtuber explains same topic rather than form education perspective will be loved. Read twice if u don't get it.
There is so much to learn from Kevin's videos. Accessibility is explained in full depth, which is often omitted in tutorials. My favorite svg styling, sizing, and adding it as a sprite (been looking for how to do that properly). How and why we could use private CSS variables, JavaScript functionality. It is incredible how much we can learn from only one video. Thank you for the effort you put into your videos, Kevin!
I can't listen english very well but your hand gesture is much enough to understand I am following your videos since 6 months ago you made me confident on building css projects Love you from Ethiopia 🇪🇹
Another great tutorial Kevin! - Interesting CSS variable with underscore take; I like it. - Great use case for flex-basis. - first time hearing about isolation: isolate and contain: content!
Thanks for this neat tutorial, Kevin! I really love it. I hope you make more contents, especially on topics about images and web development. I always find it hard making an image properly responsive especially when a client gives you ridiculous and inconsistent image resolutions.
Huge improvement to turn a functional concept into something that can actually be used. It's worth keeping in mind that while you're free to use content published on CodePen‡ many of the designs are first draft with minor tweaks, and do not adhere to the standards you would expect from a website. We boil down the thing we want to show off into the simplest form with only what is necessary, and important aspects such as accessibility are overlooked. When I make a pen I use it as a learning experience both for myself (many pens are an exploration of just a couple CSS properties and how they work together) and others, and I produce work that you can't just copy and paste. I've recived a lot of messages from people asking me how to paste many of my works, with many specifying this accordion into their website and they missed the point. This video is a beacon for how to use and improve a pen, really happy that you chose mine to use as inspiration. -Zed Dash ‡designs may be protected (avoid anything that is marked as a logo), you are free to use the code itself. You generally can modify the design into its own thing and it's fine. The license for pens can be found at the bottom of the details page. Be aware that some pens use designs from Dribbble shots, these should be linked in the pen's description in which case you cannot keep the same design. Don't think that people won't notice, designers are very aware of the designs others make and we're quick to message the designer about someone using their design.
I remember that I always visited this channel when I am learning HTML/CSS, then after I moved to Javascript I never came back in this channel but today I cameback to CSS/HTML and I am excited to watch your videos again. I hope you will upload JS related video.
To remove the outline on the panel when the button is clicked I did the following: .accordion-panel:focus-within:has(.accordion-trigger:focus-visible) { outline: 3px ridge var(--_panel-color); outline-offset: 4px; } I then used the `.accordion-panel:has([aria-expanded='true'])` selector to add a box-shadow to the expanded panel (using the panel color variable).
Kevin, first of all a big thank you for walking through this task step by step! With that, it is very easy to comprehend how this is done. One little note, on 45:05, you could also have used `querySelector('button[aria-expanded="true"])` to just get the one you want to toggle to `false`. This works similar for the contents, as well.
Oh, for sure! I did it in a bit more of a lazy way in having one less thing to query (though I did have to make a loop, so 🤷). I don't think you'd really see a performance issue one way or the other, but if it was something that had like 50 panels, it'd probably be best to only select the one you actually want... but then I'd question the design decision of having a 50-panel accordion 😅
27:56 It's from my own experience, too, also from the top of *my* head (so it could not be the first use of it),, but I've first seen prefixing private members with underscores way back when learning python in around 2005/2006, being a good practice there, mainly because it didn't actually have strict private members, so it would indicate to whoever extending the class that it was a private member.
#25:30 replacing elements like svg, (and Netscape's layer), object, embed, all share that same intrinsic default size. It's from the olden days of html3 and html4 if one does not provide the width/height attributes. Someone in the 90ies at W3C just decided those were great defaults. Also screens where much smaller then, so 300x150 could possibly fill half the window. Later additions just "inherited" these already standardized default sizes. I believe video w/o the attributes also defaults to this.
Keep going friend, your videos are inspiring us for sure,and as always we learn something..thank you for sharing your knowledge and creativity with us ❤!
I have to see this video after a year and half 'cause ur videos are futuristic. I just saw the video that a ball is bouncing on a cube and the overall things are rotating. I think u posted that video a year ago and at that time I'm learning how to line up things in a single line. And now I'm interested to learn how 3d css work. Yeah i realised that i don't know much in 2d😅 after seeing this video. Anyways great job;
Great job Kevin! I really hate css but you make me hate css just a little less, very little. Anyway I would suggest add white-space: nowrap to the accordion title because if you have the title with multiple words it will wrap when it is collapsed. Either way as always loved your content.
It was while trying to recreate this, that I realised the setting in windows 11 to turn of the horrific animations on windows enables the prefers-reduced-motion in chrome....
Wouldn't this also be a perfect use case for details/summary? You get the "open" attribute for free (less JS required for this combo) and the relationship between title, interaction element and content is implicit too. You also have default keyboard control to open/close. Still need to track the state which one's currently open. It would have a different role then. I need to check the WGAC guides if they have notes on that somewhere.
Kevin that was so interesting to watch! Recently i've worked on the similar slider at work and was wondering if is there any solution without hardcoding height for the panels, cause its jumping a little bit, i made it with min-height and it worked fine, but nonetheless, awesome tutorial!
This is a really great CSS control. I love the border - could you use the hover attribute to allow it to appear when the mouse was moving over the element, I wonder?
Great video again Kevin, greetins from Venezuela, if you could make a video on how to make an full screen overlay menu, it would be great, also a video about AnimeJS would be amazing, but again thank you for all your content
46:19 Great video! Though wouldn’t setting all to false cause an issue if you click the same panel twice. Will it attempt to close then open right back?
It all happens so fast that it won't do that, but you could also return of they click on the currently open one... This is a bit of a lazy approach, but as long as you don't have a ton of them I don't think you'd ever run into an issue
Amazing job, i would really like to learn more about aria elements but they look kinda confusing, will you ever do something more specific about them? Keep on with your work!
Using different colors for focus rings is not good for accessibility. The focus ring should stand out amongst the rest of the content in a consistent way so that it's immediately clear to the user where they are in terms of navigation and interaction. Especially for people with eye deficiencies (color blindness, and blindness in general) I suggest always having as much contrast as possible, and in most cases I don't even bother customising it because the user is likely familiar with focus style of their browser or OS. This is also why there are values like "-webkit-focus-ring-color" which is dependent on OS settings.
At 56:00, why not, instead of padding * 4, do panel-padding + button-size + panel-gap ? That would make it so the spacing on each end of the paragraph is exactly the same
I used that same a11y page a few months ago to build an accordion and once I was finished , on the example page I THEN saw the warning not to use this code in production 😂
Hey Kevin first i wanted to thank you for your inspiring content. I love this accordion so much - but - maybe i missed the point or you mentioned it that the accordion doesnt work with firefox. Is there a chance to make it work there too? Thanks a lot Astrid
why not use some radio/checkbox that uncheck the previous before checking the newer, instead of the added javascript. I believed it would work. It would not ?
I made an accordion within a xul dialog for my Add-on SmartTemplates, but I will soon have to convert the whole thing to html, it's going to be a nightmare because it also has multiple tabs, expanded dialog, multiple decks (one for each mail identity) of tabs, and also uses flex model, just a really really complicated compact tool. Not looking forward to this...
Hello Kevin, I wanted to thank you for your content. Also, I want to suggest a video idea/challenge for you. The idea is to create a simple website but not hit save until you finish it and make sure that everything is set, then live server it to see the result. Might be a difficult one, but you got it :D.
It would be fun for entertainment purposes, and a certain following would find speed-developing tips useful in the trenches - regardless of the technical debt. But in the real-world balance is the key - between innovation and stability.
Hi Kevin, really enjoyed the video, it was a great watch and I followed along for the ride. At the very end you add add the contain: content to the accordion, but unless I'm missing something, the focus rings are now no longer fully visible. Is there a way around that?
There's 2 easy ways of doing it. One is lazy and the other is precise: - Lazy: just add padding on "accordion". You can use the panel-padding variable; - Precise: create 2 variables for outline and outline-offset and use calc to add them together. In the example of the video each of them have 3px. If you sum them up, you'll get 6px. Both of them works well. The precise one just makes sure that if you ever change any of the outline values, it won't break the layout.
I just got to the .accordian-panel:has([aria-expanded="true"]) { flex-basis section, and the box does not expand in Firefox, but it does in Chrome. Seems like something is not supported.
@@dealloc I was able to style 2 parts, the p and the img without HAS. But it appears styling accordian-panel size, where you go back a level is not possible with CSS. It's unfortunate that unsupported stuff is used. I don't have the "skills" to fix this. But I will keep it for future reference. At least 12 months after full support in a live site.
@@garrycross You can get around it by using a polyfill like PostCSS's css-has-pseudo. Of course it requires an extra build step to get there, but if 100% Firefox support is really required for this type of thing, you have to do what you must.
@@dealloc Thanks for that, mate... the 'has' selector was not working for me in either Firefox or Chrome. Changed this, and it made all the difference. I specifically installed Firefox on my Mac just because Kevin recommended it over other browsers, but this was a bit of a show-stopper. If any other settings need to be changed, then the 'has' selector is a bit ahead of its time. Might go with the Javascript approach. Need to nut that one out, though. 😕
Yeah, but it's really not accessible. The details tag, while it seems like it could be useful for so many things, tends to actually be pretty limited in what we should actually use it for... This is a nice breakdown of the issues in using it for different use cases - adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
@@KevinPowell I'm not sure if I did it right, but I tried this and it seemed to ignore that it was "focus-visible" and just did it on regular focus too
You may be able to get the same interaction working with radio buttons, but you can't update the aria attributes without JavaScript, so you would be excluding all screen reader users.
aria-controls is no shining light. It's got terrible support and so don't rely on it. Old school articles like Heydon Pickering's "aria-controls are poop" are still relevant today.
Totally, that's why I didn't use them here :) - I say you can use them because for something like this, I think the image is a bit more decorative than anything else, but it's easy enough to have as a regular image, so I figured it would be best :)
Würde mich freuen, wenn du auch Worte zu Hunter Biden verlieren würdest und der Rolle von Joe Biden zur Vertuschung der Eskapaden von Hunter und der (damals) bevorstehenden Wahl.
Your channel inspired me to start my own front end development channel, thanks for your amazing content kevin ♥
Many of us
Kevin I just wanted to say thank you for your amazing content. I hated CSS back when I did some web development courses at university a decade ago and after finding your channel 2 years ago you have made me fall in love with it and help me decide to try and work towards a career as a Front End Developer. Love from Australia 🤟
That's awesome to hear!
That can be anything that we learnt from University or collage will be hated and when some youtuber explains same topic rather than form education perspective will be loved.
Read twice if u don't get it.
Your dedication to a11y is unique and inspiring in this community, Kevin! Thanks a lot for that
There is so much to learn from Kevin's videos. Accessibility is explained in full depth, which is often omitted in tutorials. My favorite svg styling, sizing, and adding it as a sprite (been looking for how to do that properly). How and why we could use private CSS variables, JavaScript functionality. It is incredible how much we can learn from only one video. Thank you for the effort you put into your videos, Kevin!
I absolutely love and cherished this tutorial. I've learnt a lot practising these techniques.
I can't listen english very well but your hand gesture is much enough to understand
I am following your videos since 6 months ago you made me confident on building css projects
Love you from Ethiopia 🇪🇹
The universe handed me this at the perfect time. I was looking up how to accordions responsive JUST this morning. Thank you so much !
That isolation property is very interesting, I’ve watched your vids on z index and would love more about stacking context and that isolation property!
Up until now, I hated acccordions for precisely the reasons you mentioned in the beginning. Thanks for changing my mind! This is beautiful!
A HUGE THANK YOU from Brasil!!!
For this and all other videos from your channel!
Another great tutorial Kevin!
- Interesting CSS variable with underscore take; I like it.
- Great use case for flex-basis.
- first time hearing about isolation: isolate and contain: content!
Thanks for this neat tutorial, Kevin! I really love it. I hope you make more contents, especially on topics about images and web development. I always find it hard making an image properly responsive especially when a client gives you ridiculous and inconsistent image resolutions.
Really loved this video. Well thought out and the result is pretty good looking/functioning. More of these please.
Isolation: isolate ohh Kevin this was a mystery to me and you enlightened me today.
Definitely one of my favourite videos and thank you for sharing the final code. Really enjoyed to follow the class with html, css in js doc in front.
Hard to follow without code. Excellent stuff, regardless, Kevin
Kevin, you're an absolute genius! Thanks for explaining so well.
1h20 of video, great accordion, great content, I mean I just love you at this point Kevin.
Huge improvement to turn a functional concept into something that can actually be used. It's worth keeping in mind that while you're free to use content published on CodePen‡ many of the designs are first draft with minor tweaks, and do not adhere to the standards you would expect from a website. We boil down the thing we want to show off into the simplest form with only what is necessary, and important aspects such as accessibility are overlooked. When I make a pen I use it as a learning experience both for myself (many pens are an exploration of just a couple CSS properties and how they work together) and others, and I produce work that you can't just copy and paste.
I've recived a lot of messages from people asking me how to paste many of my works, with many specifying this accordion into their website and they missed the point. This video is a beacon for how to use and improve a pen, really happy that you chose mine to use as inspiration.
-Zed Dash
‡designs may be protected (avoid anything that is marked as a logo), you are free to use the code itself. You generally can modify the design into its own thing and it's fine. The license for pens can be found at the bottom of the details page. Be aware that some pens use designs from Dribbble shots, these should be linked in the pen's description in which case you cannot keep the same design. Don't think that people won't notice, designers are very aware of the designs others make and we're quick to message the designer about someone using their design.
I remember that I always visited this channel when I am learning HTML/CSS, then after I moved to Javascript I never came back in this channel but today I cameback to CSS/HTML and I am excited to watch your videos again.
I hope you will upload JS related video.
To remove the outline on the panel when the button is clicked I did the following:
.accordion-panel:focus-within:has(.accordion-trigger:focus-visible) {
outline: 3px ridge var(--_panel-color);
outline-offset: 4px;
}
I then used the `.accordion-panel:has([aria-expanded='true'])` selector to add a box-shadow to the expanded panel (using the panel color variable).
Kevin, first of all a big thank you for walking through this task step by step! With that, it is very easy to comprehend how this is done.
One little note, on 45:05, you could also have used `querySelector('button[aria-expanded="true"])` to just get the one you want to toggle to `false`. This works similar for the contents, as well.
Oh, for sure! I did it in a bit more of a lazy way in having one less thing to query (though I did have to make a loop, so 🤷). I don't think you'd really see a performance issue one way or the other, but if it was something that had like 50 panels, it'd probably be best to only select the one you actually want... but then I'd question the design decision of having a 50-panel accordion 😅
Just followed this through. So thorough and well described. Thank you!!
27:56 It's from my own experience, too, also from the top of *my* head (so it could not be the first use of it),, but I've first seen prefixing private members with underscores way back when learning python in around 2005/2006, being a good practice there, mainly because it didn't actually have strict private members, so it would indicate to whoever extending the class that it was a private member.
#25:30 replacing elements like svg, (and Netscape's layer), object, embed, all share that same intrinsic default size. It's from the olden days of html3 and html4 if one does not provide the width/height attributes. Someone in the 90ies at W3C just decided those were great defaults. Also screens where much smaller then, so 300x150 could possibly fill half the window.
Later additions just "inherited" these already standardized default sizes. I believe video w/o the attributes also defaults to this.
you are one of the two most valuable kevins on the web. this was damn funny!
Pretty disappointed you didn't tackle the animate to auto-height problem that everyone always has with these things
So true, I remember having this problems in the past :/
Kevin thank you so much! It’s amazing!
Keep going friend, your videos are inspiring us for sure,and as always we learn something..thank you for sharing your knowledge and creativity with us ❤!
Thanks for this fantastic video! Actually for your whole work here on youtube.
Fantastic tutorial!
Tks god, this is exactly what I'm looking for after struggling to do it in react
Every forEach loop raises the big O by a power of 1. I believe the same for every querySelectorAll.
I have to see this video after a year and half 'cause ur videos are futuristic.
I just saw the video that a ball is bouncing on a cube and the overall things are rotating. I think u posted that video a year ago and at that time I'm learning how to line up things in a single line.
And now I'm interested to learn how 3d css work. Yeah i realised that i don't know much in 2d😅 after seeing this video.
Anyways great job;
Came for the accordion, returned with SVG icons technique :D
Great job Kevin! I really hate css but you make me hate css just a little less, very little. Anyway I would suggest add white-space: nowrap to the accordion title because if you have the title with multiple words it will wrap when it is collapsed. Either way as always loved your content.
It was while trying to recreate this, that I realised the setting in windows 11 to turn of the horrific animations on windows enables the prefers-reduced-motion in chrome....
Wouldn't this also be a perfect use case for details/summary? You get the "open" attribute for free (less JS required for this combo) and the relationship between title, interaction element and content is implicit too. You also have default keyboard control to open/close. Still need to track the state which one's currently open.
It would have a different role then.
I need to check the WGAC guides if they have notes on that somewhere.
Amazing! 👌
Kevin that was so interesting to watch! Recently i've worked on the similar slider at work and was wondering if is there any solution without hardcoding height for the panels, cause its jumping a little bit, i made it with min-height and it worked fine, but nonetheless, awesome tutorial!
love this video
Can you do the material design 3 carousel scrolling??? They have some constraints that makes it very challenging.
This is a really great CSS control. I love the border - could you use the hover attribute to allow it to appear when the mouse was moving over the element, I wonder?
perfect.
thanks for vid
Thanks kevin
Great video again Kevin, greetins from Venezuela, if you could make a video on how to make an full screen overlay menu, it would be great, also a video about AnimeJS would be amazing, but again thank you for all your content
Kevin ---__pading... my brain WOOOO THX MAster
Amazing content 💪
46:19 Great video! Though wouldn’t setting all to false cause an issue if you click the same panel twice. Will it attempt to close then open right back?
Yeah I wanted to ask about this because you could close a accordion if open it.
It all happens so fast that it won't do that, but you could also return of they click on the currently open one... This is a bit of a lazy approach, but as long as you don't have a ton of them I don't think you'd ever run into an issue
@@KevinPowell Thanks for clarifying 🙏
You’re right it’s negligible. I later noticed in the video you clicked an open panel w no issues.
I wish you could do some videos about JS for beginners or some articles/course on you website, Kevin :(
Amazing content, I learned a lot, thank you Kevin
You are the real god of CSS. ♥️
Love it! I have a wee question, and the start you mention using the framework of choice. Have you looked at Astro?
Amazing job, i would really like to learn more about aria elements but they look kinda confusing, will you ever do something more specific about them?
Keep on with your work!
Using different colors for focus rings is not good for accessibility. The focus ring should stand out amongst the rest of the content in a consistent way so that it's immediately clear to the user where they are in terms of navigation and interaction. Especially for people with eye deficiencies (color blindness, and blindness in general)
I suggest always having as much contrast as possible, and in most cases I don't even bother customising it because the user is likely familiar with focus style of their browser or OS. This is also why there are values like "-webkit-focus-ring-color" which is dependent on OS settings.
At 56:00, why not, instead of padding * 4, do panel-padding + button-size + panel-gap ? That would make it so the spacing on each end of the paragraph is exactly the same
Would totally work!
I used that same a11y page a few months ago to build an accordion and once I was finished , on the example page I THEN saw the warning not to use this code in production 😂
Great content as always. Do you normally share code for any of your projects that you demo on UA-cam?
Not always, but bigger things I do, not sure why I didn't on this one. Just added the github repo: github.com/kevin-powell/accordion
@@KevinPowell thanks so much
Hey Kevin
first i wanted to thank you for your inspiring content.
I love this accordion so much - but - maybe i missed the point or you mentioned it that the accordion doesnt work with firefox.
Is there a chance to make it work there too?
Thanks a lot
Astrid
why not use some radio/checkbox that uncheck the previous before checking the newer, instead of the added javascript. I believed it would work. It would not ?
I made an accordion within a xul dialog for my Add-on SmartTemplates, but I will soon have to convert the whole thing to html, it's going to be a nightmare because it also has multiple tabs, expanded dialog, multiple decks (one for each mail identity) of tabs, and also uses flex model, just a really really complicated compact tool. Not looking forward to this...
Hello Kevin, I wanted to thank you for your content. Also, I want to suggest a video idea/challenge for you.
The idea is to create a simple website but not hit save until you finish it and make sure that everything is set, then live server it to see the result. Might be a difficult one, but you got it :D.
Could be fun, though probably disastrous 🤣
It would be fun for entertainment purposes, and a certain following would find speed-developing tips useful in the trenches - regardless of the technical debt. But in the real-world balance is the key - between innovation and stability.
Thanks!
Thank you!
Kevin you said you could use grid for the image and shouldn't it be --_trigger-gap instead of --_panel-gap.
Please sir Kevin can you make a video on how to use Vite for file management for beginners?
Would it be appropriate in this case to make the .accordion-panel itself a button?
At 55:20 could you just change the margin left to a margin-inline ?
One small side note the outline is cutoff because of the "contain: contents" :)
Yeah, bit of padding on the entire thing should fix that 🙂
Yes or put the outline offset inside 😊
Hi Kevin, really enjoyed the video, it was a great watch and I followed along for the ride. At the very end you add add the contain: content to the accordion, but unless I'm missing something, the focus rings are now no longer fully visible. Is there a way around that?
Oh, I might have missed that! Some padding on the entire element should fix that.
There's 2 easy ways of doing it. One is lazy and the other is precise:
- Lazy: just add padding on "accordion". You can use the panel-padding variable;
- Precise: create 2 variables for outline and outline-offset and use calc to add them together. In the example of the video each of them have 3px. If you sum them up, you'll get 6px.
Both of them works well. The precise one just makes sure that if you ever change any of the outline values, it won't break the layout.
Great video! Hope you upload cool JS videos as well :))
Hi Kevin, just found with the "contain: content;" the focus outline got cut off. do you know the answer for that?
Kevin, please do more JS tutorials
Will this example be available only for patreons?
Good, but can it play a good polka?
I just got to the .accordian-panel:has([aria-expanded="true"]) { flex-basis section, and the box does not expand in Firefox, but it does in Chrome. Seems like something is not supported.
The `has` selector is not supported in Firefox unless you set the `layout.css.has-selector.enabled` flag is set in about:config
@@dealloc I was able to style 2 parts, the p and the img without HAS. But it appears styling accordian-panel size, where you go back a level is not possible with CSS. It's unfortunate that unsupported stuff is used. I don't have the "skills" to fix this. But I will keep it for future reference. At least 12 months after full support in a live site.
@@garrycross You can get around it by using a polyfill like PostCSS's css-has-pseudo. Of course it requires an extra build step to get there, but if 100% Firefox support is really required for this type of thing, you have to do what you must.
@@dealloc Thanks for that, mate... the 'has' selector was not working for me in either Firefox or Chrome. Changed this, and it made all the difference. I specifically installed Firefox on my Mac just because Kevin recommended it over other browsers, but this was a bit of a show-stopper. If any other settings need to be changed, then the 'has' selector is a bit ahead of its time. Might go with the Javascript approach. Need to nut that one out, though. 😕
@@robinhahn6987 If it didn't work in Chrome you should update your browser asap (not just for :has) but also for security updates.
This can be done with the details tag only, much simpler. I made a CodePen but can't post links here...
Yeah, but it's really not accessible. The details tag, while it seems like it could be useful for so many things, tends to actually be pretty limited in what we should actually use it for... This is a nice breakdown of the issues in using it for different use cases - adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
Yo I also recreated this codepen project for practising my CSS skills
This console.log Js part is giving me trouble. Chrome isn't showing anything, not even an error. just no feedback
is there a codepen with the finished example?
1:15:28 this is where I wish :focus-visible-within existed
Thinking about this more, can :has solve this? :has(:focus-visible)
oh, that would work! Good one :)
@@KevinPowell I'm not sure if I did it right, but I tried this and it seemed to ignore that it was "focus-visible" and just did it on regular focus too
Kevin, can't you use radio buttons and the selected selector so you can make this without js? I'm not sure if you can style radio buttons, though.
You may be able to get the same interaction working with radio buttons, but you can't update the aria attributes without JavaScript, so you would be excluding all screen reader users.
favicon in svg??
Not supportes in Safari sadly. I just use it for my demos starter repo
why use "-" and not "_"?
No real reason, tbh
Prettier is to opinionated for my taste. Beautify does everything I want without being arrogant.
aria-controls is no shining light. It's got terrible support and so don't rely on it. Old school articles like Heydon Pickering's "aria-controls are poop" are still relevant today.
Be careful when using background images. They are not accessible and assistive technology will not read them
Totally, that's why I didn't use them here :) - I say you can use them because for something like this, I think the image is a bit more decorative than anything else, but it's easy enough to have as a regular image, so I figured it would be best :)
Early.
Graceful degradation of an accordion
Würde mich freuen, wenn du auch Worte zu Hunter Biden verlieren würdest und der Rolle von Joe Biden zur Vertuschung der Eskapaden von Hunter und der (damals) bevorstehenden Wahl.
I've learnt more from this one video than my entire Software Engineering degree. 🥲
OMG, how did I not know about `e.target.closest`????