996 (#2193)

Author: avclark

shows/996 - 10 New CSS and HTML APIs.md

@@ -0,0 +1,46 @@
+---
+number: 996
+title: "10 New CSS and HTML APIs"
+date: 1776250800000
+url: https://traffic.megaphone.fm/FSI1494189385.mp3
+youtube_url: https://www.youtube.com/watch?v=unqPqGeJMck
+---
+
+Wes and Scott talk about the latest CSS and browser features, including the Grid Lines API for masonry layouts, HTML in Canvas, name-only container queries, CSS random, search-text styling, and more.
+
+### Show Notes
+
+* **[00:00](#t=00:00)** Welcome to Syntax!
+* **[00:57](#t=00:57)** Grid Lines API for masonry-style layouts
+  * [Introducing CSS Grid Lanes](https://webkit.org/blog/17660/introducing-css-grid-lanes/)
+  * [CSS Grid Lanes browser support](https://caniuse.com/css-grid-lanes)
+* **[03:25](#t=03:25)** HTML in canvas and next-gen UI effects
+  * [@jaffathecake](https://x.com/jaffathecake/status/2039632975831191858)
+  * [@mattrothenberg](https://x.com/mattrothenberg/status/2040416074710102300)
+* **[11:30](#t=11:30)** Name-only container queries for scoped styles
+  * [Name-Only Containers: The Scoping We Needed](https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/)
+* **[14:37](#t=14:37)** Brought to you by [Sentry.io](https://sentry.io/syntax/)
+* **[15:34](#t=15:34)** Safari removes haptic feedback workaround
+* **[17:38](#t=17:38)** CSS random for dynamic values
+  * [Rolling the Dice with CSS random()](https://webkit.org/blog/17285/rolling-the-dice-with-css-random/)
+* **[18:49](#t=18:49)** Styling find-in-page with [::search-text](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::search-text)
+* **[21:44](#t=21:44)** Sticky positioning now works in both axes
+  * [@una](https://x.com/Una/status/2041215307440652396)
+* **[22:43](#t=22:43)** Multi-column CSS finally gets usable fixes
+  * [Looking at New CSS Multi-Column Layout Wrapping Features](https://css-tricks.com/css-multi-column-layout-wrapping-features/)
+* **[24:41](#t=24:41)** Border shape improvements and new design options
+  * [@una](https://x.com/Una/status/2019502817216503824?s=20)
+  * [MadCSS.com](https://madcss.com/)
+* **[27:09](#t=27:09)** Why MDN demos need to be better
+* **[28:24](#t=28:24)** Element-scoped view transitions for cleaner animations
+  * [@bram.us](https://bsky.app/profile/bram.us/post/3mf4x7sxyc226)
+
+### Hit us up on Socials!
+
+Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)
+
+Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)
+
+Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)
+
+Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)