Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
Detect “islands of elements” with the same class, thanks to CSS :has()
Category Archives: Original Content
Detect “islands of elements” with the same class, thanks to CSS
CSS Architecture (2022.12.01 @ Web Directions Summit)
FIX: The provider “cPanel (powered by Sectigo)” cannot currently accept incoming requests. The system will try again later.
Style a parent element based on its number of children using CSS :has()
Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.
Container Queries: Style Queries
In CSS, Style Queries which allow querying computed values of a container. Let’s take a look at what that means …
Upgrading colors to HD on the web
Let’s take a look at how we can progressively enhance the color experience on the web, accessing color spaces such as display-p3.
CSS in 2022 (and beyond) (2022.09.09 @ Fronteers Conf)
Convert a Keynote presentation to a set of hi-res images
To create presentations I like to use Keynote, mainly thanks to its animation feature. I admit that it took me some time to get accustomed to it – and that not all is perfect – but I think I’ve become efficient at using it over time. The transitions and animations – such as seen in …
Continue reading “Convert a Keynote presentation to a set of hi-res images”
JavaScript: Restart all CSS Animations of an Element
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) => { $el.getAnimations().forEach((anim) => { anim.cancel(); anim.play(); …
Continue reading “JavaScript: Restart all CSS Animations of an Element”
The Future of CSS: Variable Units, powered by Custom Properties
Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS