A pure CSS carousel without any JavaScript. The magic of #CSS and #HTML 🪄✨

Demo: codepen.io/jwjertzoch/pen/JjyG…

#WebDev

levelup.gitconnected.com/how-t…

How to Make a Fully Accessible CSS-Only Carousel - Level Up Coding

First of all, what is a carousel? Carousels show a collection of elements one after the other. Also known as “slideshows” and “sliders”. Often these are used to accommodate a larger amount of content…

^{Jennifer Wjertzoch (Level Up Coding)}

The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against.
A situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved Element

element.querySelectorAll(":scope > .child"); 

#CSS #JavaScript #TIL

Custom form controls (select, checkbox, radio) with #HTML and #CSS (without JavaScript): damianwajer.com/blog/custom-st…

#WebDev

CSS-only custom-styled select, checkbox, radio example (without JavaScript) - Damian Wajer

Whenever possible, I try to use native HTML elements to take full advantage of the built-in accessibility and usability benefits that come with them. Such benefits are sometimes…

^{Damian Wajer}

Accessible card component with the pseudo-content trick: damianwajer.com/blog/accessibl…

#WebDev #HTML #CSS #Accessibility

The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

developer.mozilla.org/en-US/do…

#TIL #CSS