Slides of the talk I gave at “Web Directions 2022” + Trip Report
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.
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
In CSS, Style Queries which allow querying computed values of a container. Let’s take a look at what that means …
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
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 →
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 …
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.