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 …

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 { …

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 →

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 …

Escaping the sRGB Prison

At the most recent CSS Day, Chris Lilley gave a talk titled “Escaping the sRGB Prison”. Imagine that I told you that you are only allowed to use two-thirds of the colors that your screen can display. All the brightest and most vivid shades are not allowed. Unacceptable, right?! Welcome to Web design for the …

Show CSS browser support data with css-browser-support

If you want to include Browser Support tables on your site, you can use this package by Stephanie Eckles Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages. Per feature that ask it, you get back an object with the browsers and the data: { …