Derek P. Collins reshared this.
A pure CSS carousel without any JavaScript. The magic of #CSS and #HTML 🪄✨
Demo: https://codepen.io/jwjertzoch/pen/JjyGeRy
https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
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)
like this
reshared this
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"); https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
#CSS #JavaScript #TIL
Custom form controls (select, checkbox, radio) with #HTML and #CSS (without JavaScript): https://www.damianwajer.com/blog/custom-styled-form-controls/
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
I highly recommend Emmet, a plugin for many popular code editors that significantly boosts productivity when working with #HTML and #CSS. If you're not familiar with it, give it a try: https://emmet.io
#WebDev
#WebDev
Accessible card component with the pseudo-content trick: https://www.damianwajer.com/blog/accessible-card-component/
#WebDev #HTML #CSS #Accessibility
#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.
https://developer.mozilla.org/en-US/docs/Web/CSS/:where
#TIL #CSS
Laimis
in reply to Damian Wajer • • •Damian Wajer likes this.