695: 5 New CSS Features You Should Know

<p class="has-line-data" data-line-start="0" data-line-end="1">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.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:25">00:25</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:10">01:10</a></strong> :nth-child(4 of .neat)</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://caniuse.com/css-nth-child-of">selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=06:43">06:43</a></strong> CSS Motion Path</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=10:38">10:38</a></strong> Scroll Snap</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://css-tricks.com/practical-css-scroll-snapping/">Practical CSS Scroll Snapping</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=14:36">14:36</a></strong> Scroll Driven Animations</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://scroll-driven-animations.style/">Scroll-driven Animations</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://syntax.fm/show/619/supper-club-bramus-van-damme-on-css">Supper Club × Bramus Van Damme on CSS</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=16:58">16:58</a></strong> Margin Trim</li> </ul> <h3 class="code-line" data-line-start="16" data-line-end="17"> <a id="Hit_us_up_on_Socials_16"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="18" data-line-end=