Syntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats

1033: 8 New CSS, JS and HTML Features You Should Know

August 26, 2026

AI Summary

5 min read

8 New CSS, JS and HTML Features You Should Know

Wes Bos and Scott Tolinski run through eight recently shipped or soon-to-ship web platform features, many of which they discovered only while preparing the episode. "I think with a lot of these, we've been so obsessed with AI for the last six months," Wes says. "There's been so much that's been added to CSS, HTML, JavaScript that I've been looking through all this stuff. I'm like, wow, that's awesome."

Relative Color Alpha and the Progress Function

The first feature is a short-form syntax for making any color semi-transparent in CSS. Instead of writing out full relative color syntax, you can now do background: rgb(from var(--color) r g b / 50%) — or more simply, background: rgb(from var(--color) alpha 50%). "This was in Sass, this was in stylus," Wes notes, but those tools work at build time. The browser-native version works at runtime, which matters for dynamic theming. Browser support is surprisingly good: Chrome since version 151, Safari 27, and Firefox in nightly builds.

Continue reading the full summary in the app — free to try.

Read Full Summary →

Free • No credit card required

Listen to Audio Summary Open in App

What you'll learn

  • 1 (00:00) **Introduction & CSS Alpha in Relative Colors** - Wes and Scott introduce eight new web features, starting with a simplified way to add transparency to any color in CSS.
  • 2 (02:50) **CSS progress() Function** - A new mathematical function that maps a value between a start and end range, even across different units.
  • 3 (05:10) **Promise.allSettled with Keys (Promise.allKeyed)** - A native JavaScript API that lets you await an object of promises and destructure the results directly.
  • 4 (07:09) **Declarative Camera & Microphone HTML Elements** - Proposed new `<camera>` and `<microphone>` elements for declarative media access, though still in prototyping.
  • 5 (09:26) **CSS attr() Function Expanded** - The ancient `attr()` function now works with any CSS property (not just `content`), letting you use HTML attributes as dynamic CSS values.
  • 6 (11:27) **CSS sibling-index() and sibling-count() Functions** - Native CSS functions to get the index and total count of sibling elements, enabling dynamic layout without JavaScript.
  • 7 (13:58) **Shrink-to-Fit Container** - A new CSS property that makes a parent element shrink-wrap to the size of its `fit-content` child, solving a common layout pain.

+ Full timestamped outline available in the app

Show Notes

Scott and Wes run through eight new CSS, JS, and HTML features landing in browsers; including the relative alpha() color function, the progress() function for calculating values between units, Promise.allKeyed(), and native camera and microphone elements. They also get into an upgraded attr(), shrink-to-fit containers, and text-box-trim for finally killing that annoying extra space above your text.

Show Notes

  • 00:00 Welcome to Syntax!
  • 00:22 CSS Alpha() Relative Color Function
  • 02:25 Brought to you by Sentry.io
  • 02:48 CSS CSS Progress() Function: Calculate Values Between Units
  • 05:09 Promise.allKeyed(): Object-Based Promise Resolution
  • 06:55 Camera and Microphone HTML Elements
  • 09:24 Advanced CSS Attr() Function: Props for CSS
  • 11:25 CSS Sibling-Index() and Sibling-Count() Functions
  • 13:56 CSS Shrink-to-Fit Container
  • 15:36 CSS Text-Box-Trim and Text-Box-Edge

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Syntax - Tasty Web Development Treats

More from this podcast

Syntax - Tasty Web Development Treats →