996: 10 New CSS and HTML APIs

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 Welcome to Syntax!

•
00:57 Grid Lines API for masonry-style layouts

• Introducing CSS Grid Lanes (webkit.org/blog/17660/introducing-css-grid-lanes)

• CSS Grid Lanes browser support (caniuse.com/css-grid-lanes)

•
03:25 HTML in canvas and next-gen UI effects

• @jaffathecake (x.com/jaffathecake/status/2039632975831191858)

• @mattrothenberg (x.com/mattrothenberg/status/2040416074710102300)

•
11:30 Name-only container queries for scoped styles

• Name-Only Containers: The Scoping We Needed (frontendmasters.com/blog/name-only-containers-…)

•
14:37 Brought to you by Sentry.io (sentry.io/syntax)

•
15:34 Safari removes haptic feedback workaround

•
17:38 CSS random for dynamic values

• Rolling the Dice with CSS random() (webkit.org/blog/17285/rolling-the-dice-with-cs…)

•
18:49 Styling find-in-page with developer.mozilla.org/en-US/docs/Web/CSS/Refer…

•
21:44 Sticky positioning now works in both axes

• @una (x.com/Una/status/2041215307440652396)

•
22:43 Multi-column CSS finally gets usable fixes

• Looking at New CSS Multi-Column Layout Wrapping Features (css-tricks.com/css-multi-column-layout-wrappin…)

•
24:41 Border shape improvements and new design options

• @una (x.com/Una/status/2019502817216503824?s=20)

• MadCSS.com (madcss.com)

•
27:09 Why MDN demos need to be better

•
28:24 Element-scoped view transitions for cleaner animations

• @bram.us (bsky.app/profile/bram.us/post/3mf4x7sxyc226)

Hit us up on Socials!

Syntax: X (twitter.com/syntaxfm) Instagram (instagram.com/syntax_fm) Tiktok (tiktok.com/@syntaxfm) LinkedIn (linkedin.com/company/96077407/admin/feed/posts) Threads (threads.net/@syntax_fm)

Wes: X (twitter.com/wesbos) Instagram (instagram.com/wesbos) Tiktok (tiktok.com/@wesbos) LinkedIn (linkedin.com/in/wesbos) Threads (threads.net/@wesbos)

Scott: X (twitter.com/stolinski) Instagram (instagram.com/stolinski) Tiktok (tiktok.com/@stolinski) LinkedIn (linkedin.com/in/stolinski) Threads (threads.net/@stolinski)

Randy: X (twitter.com/randyrektor) Instagram (instagram.com/randyrektor) YouTube (youtube.com/@randyrektor) Threads (threads.net/@randyrektor)