Syntax - Tasty Web Development Treats

695: 5 New CSS Features You Should Know

Nov 20, 2023

24:30

Snipd AI

Podcast discusses 5 new CSS features including :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

The nth child micro syntax in CSS provides more control in selecting specific children based on numbers, keywords, and selectors, making it useful for targeting specific elements with certain classes or attributes.

CSS motion path is a new property that allows elements to move along an SVG path, enabling the creation of dynamic and engaging animations without relying on JavaScript, although it is not widely supported yet.

Deep dives

The nth child micro syntax

The podcast discusses the nth child micro syntax in CSS. It allows for more control in selecting specific children based on numbers, using keywords and selectors. This feature is useful for targeting specific elements with certain classes or attributes. The micro syntax is supported in all browsers, except for Safari which has had it for many years.

Introduction

2min

Exploring the nth-child Pseudo Selector and Its Limitations

6min

Exploring CSS motion path and moving elements along SVG paths

2min

Exploring the Potential of the New Linear Function in CSS Animation

2min

CSS Scroll Snap: Creating Scrollable Carousels and Galleries

13min

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.

Show Notes