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

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

996: 10 New CSS and HTML APIs

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews