Skip to main content

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

#WebDev

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)

4 people reshared this

Laimis
Laimis  
•
pure CSS "people" are magicians
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/

#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
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
Accessible card component with the pseudo-content trick: https://www.damianwajer.com/blog/accessible-card-component/

#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
⇧