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
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()
Scroll-Linked Animations with ScrollTimeline and ViewTimeline
🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. The contents of this video are mostly correct, yet some minor things have changed. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article and examples that use the latest version of the syntax. In the latest episode of HTTP 203 I share …
Continue reading “Scroll-Linked Animations with ScrollTimeline and ViewTimeline”
CSS Type Grinding: Casting Tokens (sm|md|etc
) into Useful Values (aka Style Queries without Style Queries thanks to @property)
My favorite use case for Style Queries is the ability to change a bunch of styles based on the value of a so called “higher-order variable”. You use that variable as a switch to change a bunch of properties. @container style(–theme: dark) { .card { background: royalblue; border-color: navy; color: white; } .card button { …
Container Queries: Style Queries
Automatically ignore files and folders in Dropbox with dropboxignore
If you’re using Dropbox and would like to store Git repos in your Dropbox folder, this tool is useful: This CLI shell script aims to take advantage of glob patterns and existing .gitignore files in order to exclude specific folders and files from dropbox sync. Never sync node_modules or vendor to Dropbox again! dropboxignore →
Two JavaScripts
100 Days Of More Or Less Modern CSS
The great Manuel Matuzović: It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite …