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

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

In this episode of Syntax, Wes Bos and Scott Tolinski walk through eight new or newly shipping web platform features across CSS, JavaScript, and HTML. The discussion is centered on practical developer use cases, browser support, and how these features reduce the need for custom JavaScript or utility libraries in everyday UI work.

Key Features Covered

1. CSS Relative Color Alpha

• Lets you take an existing color and adjust its alpha/transparency directly in CSS.
• Syntax is simple: pass a color and add a slash plus opacity value.
• Useful for making colors semi-transparent at runtime without needing Sass/Stylus build-time processing.
• Browser support is now broadly available or very close across major browsers.

2. CSS progress() Function

• Calculates where a value falls between a start and end range.
• Works with mixed units and returns a unitless result.
• Helpful for layout/math cases that previously required complex calc() expressions.
• Especially useful when you need to know “how far along” a value is between two points.

3. JavaScript Promise.allKeyed

• A more ergonomic version of Promise.all for objects instead of arrays.
• Lets you await multiple async operations concurrently while preserving meaningful keys.
• Makes destructuring resolved values cleaner and code easier to read.
• Seen as a quality-of-life improvement that removes the need for helper libraries.

4. HTML Camera and Microphone Elements

• New declarative elements for requesting access to a user’s camera and microphone.
• Intended to replace or simplify imperative getUserMedia() workflows.
• The hosts were mixed on how much value this adds, since you still need JavaScript to handle streams and events.
• May become more compelling when combined with other declarative HTML APIs.

5. CSS attr() Function Expansion

• attr() is no longer limited to content-only use cases.
• You can now use attribute values in broader styling contexts like width, height, background, and more.
• This opens the door to treating HTML attributes more like CSS “props.”
• Particularly useful for component APIs and modifier-style attributes.

6. CSS sibling-index() and sibling-count()

• Provide the index of the current sibling and the total number of siblings.
• Great for layouts where item placement depends on list length, such as:
  • circular navigation
  • radial menus
  • evenly distributed elements
• Removes the need for JavaScript-generated CSS variables or exhaustive :nth-child() rules.

7. CSS Shrink-to-Fit Container Sizing

• Helps a parent container size itself to fit its content more cleanly.
• Useful in awkward layout situations where nested elements don’t naturally shrink the way you want.
• Not an everyday feature for everyone, but very handy when it applies.

8. CSS text-box-trim and text-box-edge

• Gives more control over typography spacing by trimming the extra space around text.
• Solves common vertical alignment issues caused by font metrics like ascenders and descenders.
• Particularly useful for buttons, badges, and compact UI elements where visual centering matters.
• The hosts highlighted it as one of the most immediately useful features for polished UI work.

Main Takeaways

• Modern CSS is evolving fast, and many long-standing layout and typography pain points are getting native solutions.
• Several of these features reduce reliance on:
  • custom JavaScript
  • build-time CSS preprocessors
  • utility workarounds
• The episode emphasizes the value of progressive enhancement: many of these features can already be used safely where supported, with graceful fallback elsewhere.
• Browser support is improving quickly, especially as features move from prototype/intent stages into shipping releases.

Browser Support Notes

• A recurring theme was that several of these features are now:
  • already shipping in Chromium-based browsers
  • available in Safari or Safari Technology Preview
  • entering Firefox via intent-to-ship or intent-to-prototype stages
• This makes them increasingly practical for real-world use, rather than just experimental demos.

Notable Commentary

• The hosts repeatedly expressed surprise at how much has landed in CSS/HTML/JS while attention has been focused on AI.
• They framed many of these features as developer-experience upgrades that make common patterns simpler and cleaner.
• Some features, like the camera/microphone elements, were met with skepticism, while others, like text-box-trim, were seen as immediately valuable.

Final Note

Wes mentioned he would share the demo page for listeners who want to see the examples live and experiment with the new APIs.