A rather geeky/technical weblog, est. 2001, by Bramus
:nth-child(An+B [of S]?) polyfill thanks to CSS :has() and :not()
:nth-child(An+B [of S]?) is not available in all browsers, but thanks to :has we can polyfill it (to a certain extent)
:has()
Leveraging :has() to detect islands of elements that have the same class, and select the first and last one from those islands.
:has()
Leverage CSS :has() and :nth-child() to style a parent based on the number of children it has.
🚨 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”
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 { …
In CSS, Style Queries which allow querying computed values of a container. Let’s take a look at what that means …
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 →
Remy Sharp: There are two JavaScripts. One for the server – where you can go wild. One for the client – that should be thoughtful and careful. Yes, a thousand times YES! Two JavaScripts →