996: 10 New CSS and HTML APIs

The hosts introduce the episode, highlighting the influx of new and upcoming features in CSS, HTML, and browser capabilities. They express excitement about developments like the CSS masonry API, HTML in Canvas, container queries with naming, CSS random, and enhanced styling options for search highlights. The discussion sets the tone for exploring how these features can innovate web development.

This section delves into the CSS Grid Lines API, also known as CSS grid lanes, which enables creating Pinterest-style masonry layouts purely with CSS. The hosts explain how it improves upon previous methods like CSS columns and grid fit, offering a flexible, simple way to structure content that fills in dynamically, opening possibilities for more creative designs.

The conversation explores an experimental API allowing HTML elements to be rendered inside canvas elements. This innovation solves accessibility issues and enables complex visual effects, such as pixel manipulation, blurring, and custom interactive elements inside canvas. The hosts discuss demos like magnifiers, frost effects, and interactive form effects, emphasizing the power of rendering live HTML within canvas for next-gen UI design.

A new container query feature is discussed, allowing developers to scope CSS rules by container names rather than media-like queries. This supports more native, flexible styling within component boundaries, reducing reliance on class-based scoping. The hosts highlight support in browsers like Chrome 148/149 and Firefox 149, and reflect on the increasing sophistication of CSS capabilities.

The episode covers several other updates, including CSS random() for dynamic value generation, styling search-highlight text with ::search-text, improved sticky positioning in both axes, and fixes for multi-column layouts. They also review border shape enhancements that allow more creative borders using CSS, and discuss the importance of MDN demos and better visual examples to inspire usage.

The hosts talk about recent changes like Safari removing the haptic feedback workaround, the need for better demo showcases, and upcoming features like element-scoped view transitions for smooth, scoped animations. They emphasize that many of these improvements, while limited at release, promise powerful tools for building modern, accessible, and visually compelling interfaces.