The themes for the introductory exercise

:has() 🔥🔥

• Manuel Matuzović: :has() intro (100 Days of CSS)
• Jen Simmons: :has() longer read (webkit.org)
• Stephanie Eckles: :has() advanced (Smashing)
• Jhey Tompkins: :has() use cases (developer.chrome.com)
• Manuel Matuzović: :has() specificity (100 Days of CSS)

States and interaction

• States: :focus, :focus-within, :checked, :placeholder-shown, :valid, :invalid, :user-valid, :user-invalid, :in-range, :out-of-range, :required, :optional and :empty (MDN)
• Chris Coyier: An example (CSS tricks)
• Joost FaberAnother example (CodePen)

Architectural stuff 🌶️

• The spec: :not() (MDN)
• Manuel Matuzović: :is() and :where() (100 Days of CSS)
• Bramus van Damme: More control over :nth-child() with of syntax (developer.chrome.com)

• Adam Argyle: CSS nesting (developer.chrome.com)
• Kyle Cook CSS Cascade Layers intro (Web Dev Simplified)
• Miriam Suzanne: A Complete Guide to CSS Cascade Layers (CSS tricks)

Container queries have landed 🔥

• Michelle Barker: Getting started with CSS container queries (MDN)
• Chris Coyier: Container Units Should Be Pretty Handy (CSS tricks)
• Stephanie Eckles: Container Query Units and Fluid Typography (moderncss.dev)
• Manuel Matuzović: Using the em unit in container queries (100 Days of CSS)

Style queries are pretty cool as well 🌶️

Chrome and Safari

• Manuel Matuzović: Intro container style queries (100 Days of CSS)
• Una Kravets: Getting Started with Style Queries (Chrome for developers)
• Ahmad Shadeed: All About CSS Style Queries (ishadeed.com)

'Normal' media queries

• The spec: prefers-color-scheme and prefers-reduced-motion (MDN)
• Charles Reynolds-Talbot: The Dark (Mode) Web Rises (charlesrt.uk)
• Kilian Valkhof: The complete guide to CSS media queries (Polypane Blog)
• Manuel Matuzović: I totally forgot about print style sheets (matuzo.at)

Writing modes and logical properties

• The spec: writing-mode intro (MDN)
• Jen Simmons: Writing Modes (jensimmons.com)
• Ahmad Shadeed: Digging Into CSS Logical Properties (ishadeed.com)
• Adrian Roselli: CSS Logical Properties (adrianroselli.com)

Filters

• Chris Coyier: CSS filters basics (CSS tricks)
• Una Kravets: Chaining CSS filters (CSS tricks)
• Manuel Matuzović: Backdrop-filter (100 Days of CSS)
• Sara Soueidan: SVG filters 101 (Codrops)
• Lucas Bebber: Gooey blobs with SVG filter (CSS tricks)

Blend-modes

• Chris Coyier: Blend-mode basics (CSS tricks)
• Robin Rendle: Chaining blend-modes (CSS tricks)
• Miriam Suzanne CSS Tie-Dye Gradient Backgrounds with blend-modes (miriamsuzanne.com)

Masks

• Manuel Matuzović: Mask properties intro (100 Days of CSS)
• Michelle Barker: CSS Halftone Patterns (CSS in Real Life)
• Ana Tudor: Mask compositing: the crash course (CSS tricks)

Modern brighter colors

• Manuel Matuzović: Space-separated color notations (100 Days of CSS)
• Nikita Vasilyev: Brighter Colors with Display-P3 (webkit.org)
• Geoff Graham: Falling in Love with OKLCH - brighter colors (Smashing)
• Adam Argyle: High Definition CSS Color Guide (developer.chrome.com)

Color functions

• Adam Argyle: color-mix() (developer.chrome.com)
• Manuel Matuzović: relative color syntax - Chrome/Safari (100 Days of CSS).
• Chris Coyier: Exploring color-contrast() - Safari TP 🚩 (CSS tricks)).

Miscellaneous color snacks

• paint order → outline achter de fill
• accent-color → highlight-color of form controls
• color-scheme → default dark en light mode
• font-palette → multi-color fonts (further explanation)

Scroll-based animations 🔥

Chrome and Firefox 🚩

• Adam Argyle: An intro to scroll() and view() (Codrops)
• Bramus van Damme: 10-part video course (Codrops)
• Bramus van Damme: A bunch of demos and tools (scroll-driven-animations.style)
• Geoff Graham: Unleash the Power of Scroll-Driven Animations (CSS tricks)

Demo's

• Jhey Tomkins: Wavy content (CodePen)
• Jhey Tomkins: Stroke text (CodePen)
• Jhey Tomkins: You can scroll (CodePen)
• Jhey Tomkins: Let's scroll (CodePen)
• Jhey Tomkins: Gooey island (CodePen)
• Sanne: drie dee (CodePen)
• Sanne: Bloemetje (CodePen)
• Temani Afif: Single-element wavy range slider (CodePen)

Other animatie thingies

• Bramus van Damme: Scrollbar styling (Chrome for Developers)
• Dan Wilson: Get Moving with CSS Motion Path (danielcwilson.com)
• Bramus van Damme: CSS Animated Grid Layouts (web.dev)
• Bramus van Damme: the linear() easing function (Chrome for Developers)
• Bramus van Damme: Combine animations with animation-composition (Chrome for Developers)
• Jhey Tomkins: Animated Gradient Text (web.dev)
• Temani Afif: We can finally animate CSS gradient (dev.to)

Anchor-positioning 🔥

Note: anchor-position works for all elements :)

• Una Kravets: Introducing anchor positioning (Chrome for developers)
• Una Kravets: anchor-tool.com (Una)
• Adam Argyle: Over-Easy Anchor + Popover Mini Web Machine (Youtube - 10 min - beetje hoog in de energie)

Popover 🔥

• Una Kravets: Introducing the popover API (developer.chrome.com)
• The spec: popover and backdrop (MDN)
• Una Kravets: Smooth entry and exit animations (a.o. for popovers) (developer.chrome.com)
• Sanne: an anchor example and another anchor example (CodePen)

Details and Summary 🔥

• Bramus van Damme: Exclusive Accordion (Chrome for Developers)
• Kevin Powell: Animate Details (Youtube - 12 min)
• Bramus van Damme: Stylable Details (Chrome for Developers)
• Bramus van Damme: Animate to height: auto; (Chrome for Developers)

Alleen Chrome Canary met Experimental Web Platform features 🚩 aan

• Brecht de Ruyte: Creating a carousel purely out of CSS (utilitybend)
• Adam Argyle: CSS scroll-state() (Chrome for developers)
• Adam Argyle: CSS Carousel Gallery (Adam)