In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web. <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor <a href="http://Sanity.io">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=00:06">00:06</a> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://syntax.fm/show/525/2022-css-trends-and-usage-web-almanac">Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=01:22">01:22</a> Smart home updates</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=04:05">04:05</a> Box sizing: border box</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=06:57">06:57</a> CSS Columns</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=09:20">09:20</a> Aspect Ratio</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://caniuse.com/mdn-css_properties_rotate">Can I Use CSS Properties Rotate</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=09:53">09:53</a> Transitions and animations</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=13:36">13:36</a> Transition time</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=17:05">17:05</a> Steps as a timing function</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=19:01">19:01</a> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=19:43">19:43</a> Blend modes</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=23:57">23:57</a> Responsive web design</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=26:31">26:31</a> Prefers Color Scheme</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=27:48">27:48</a> Popular breakpoints</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=30:57">30:57</a> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=32:06">32:06</a> Feature queries and @ supports</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=34:59">34:59</a> Logical and physical properties</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=37:59">37:59</a> css-in-js</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b">Sam Magura - Why We’re Breaking Up with CSS-in-JS</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://bradfrost.com/blog/link/why-were-breaking-up-with-css-in-js/"> Brad Frost - Why We’re Breaking Up with CSS in JS</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=42:28">42:28</a> Sass</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=43:20">43:20</a> Print styles</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=45:38">45:38</a> Sponsor: Sanity</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=46:38">46:38</a> Longhand properities</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="#t=48:21">48:21</a> Non-existant properties</li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="#t=52:06">52:06</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Scott: <a href="https://amzn.to/3zwGhj6">Front Bumper Drillless Plate Holder</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Wes: <a href="https://amzn.to/3h0xvmT">1U Server Rack</a></li> </ul> <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Scott: <a href="https://leveluptutorials.com/">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

CSS Trends Almanac for 2022 Part 2

Syntax - Tasty Web Development Treats