Recording intelligenceAI-generated brief · check the source for context

8 New CSS, JS and HTML Features You Should Know

18:37 recording · EN · 2 speakers

Watch the original

Brief overview

Eight new CSS, HTML and JavaScript APIs are shipping across browsers, and Firefox is finally catching up.

  1. Firefox is the last gate on most of theseRelative color alpha, progress, attr and sibling index all wait on Gecko, and Wes tracks readiness through the intent posts on the Google groups.
  2. Runtime beats build time for color mathSass and Stylus could already make a color semi-opaque, but Wes wants it done in the browser at runtime, not compiled ahead.
  3. Declarative camera and microphone elements convince nobodyBoth hosts end up sceptical: you still need JavaScript for the stream and the events, so the value only appears if it pairs with something like the Invokers API.
Executive Summary AI
  • Syntax Today opens with the hosts running through eight new CSS, HTML and JavaScript APIs that Wes built demos for, several of which neither host knew were coming.
  • The first is the CSS relative color alpha shorthand: pass any color plus a forward slash and a percentage to make it semi-transparent at runtime rather than at Sass build time, and it has been in Chrome since version 151 (July 27th, 2026), ships in Safari 27, and is in the Firefox nightly build.
  • Next is the CSS progress function, which tells you where a value sits between a start and an end value even when the units differ (two EMs against eight pixels and 100%, or 20 pixels against 400% width), returning a unitless number you still coerce with calc; it is everywhere except Firefox, where Gecko is intent to ship.
  • On the JavaScript side, promise.all keyed lets you await an object whose properties are promises instead of an array, so results come back keyed and destructurable rather than ordered by index.
  • The remaining CSS additions are the modernised attr function usable on any property as CSS props, sibling index and sibling count for evenly spacing unknown numbers of items, max content sizing shrink to fit for parents wrapping fit-content children, and text box trim and text box edge, which Wes used as text box trim cap alphabetic on the Mad CSS site and which has been in Chrome since February,
Key Quote
“Welcome to Syntax Today. We've got eight amazing new CSS, HTML, and JavaScript APIs that you need to know about.”
— Host
Key Quote
“Well, Sass has done it build time.”
— Wes
Key Quote
“It's been in Chrome since version 151.”
— Wes