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

Key takeaways

CSS now supports dynamic alpha transparency with the relative color alpha() function, making it easier to create transparent colors directly in CSS.
The new CSS progress() function enables interpolating between lengths with different units, facilitating more flexible design calculations.
JavaScript's Promise.allKeyed() improves handling multiple promises by returning an object with key-value pairs, simplifying asynchronous code.
HTML is considering new elements for declarative access to camera and microphone devices, although their practical usefulness remains to be fully assessed.
The attr() function in CSS is being enhanced to fetch attribute values directly for properties like width or background, simplifying styling based on HTML attributes.
CSS sibling-index() and sibling-count() functions allow styling based on an element's position and total sibling count, enabling more sophisticated layouts.
Additional layout and typography improvements with shrink-to-fit containers and text-box-trim address common design challenges, now supported across major browsers.

Summary

Introduction to New CSS, HTML, and JavaScript APIs

The hosts introduce a series of eight exciting new APIs and features across CSS, HTML, and JavaScript that are making their way into browsers. Wes has prepared demos to showcase these features, highlighting their usefulness and recent support across major browsers. The discussion sets the tone for an in-depth review of each API, emphasizing their potential impact on web development.

CSS Relative Color alpha() Function and Support

The first feature discussed is the CSS relative color alpha() function, which allows developers to adjust the transparency of a color dynamically. This function simplifies making colors semi-transparent directly in CSS, with support now available in Chrome, Firefox (nightly build), and Safari Technology Preview. The feature replaces more complex workarounds like Sass at build time, offering a browser-native, front-end solution.

CSS progress() Function for Calculating Intermediate Values

Next, the CSS progress() function is explained as a tool to interpolate between two values with different units (e.g., pixels and percentages). It provides a way to find the relative position between two lengths, useful in animations or responsive design, with broad support except for Firefox. This enables more dynamic calculations directly in CSS, streamlining development workflows.

JavaScript Promise.allKeyed() for Enhanced Promise Handling

The podcast covers Promise.allKeyed(), a new JavaScript API that allows objects of promises to be resolved simultaneously. Unlike Promise.all, which only works with arrays, Promise.allKeyed() maintains key-value pairs, making code more readable and manageable when fetching multiple resources concurrently. The feature is aimed at improving developer experience and code clarity.

Declarative HTML Elements for Camera and Microphone Access

Proposal for new HTML elements that enable declarative access to camera and microphone devices. Scott and Wes discuss their potential to simplify media permissions and workflows by reducing JavaScript boilerplate. However, skepticism remains about their practical utility without JavaScript integration, given that media streams still require event handling and programmatic controls.

Enhanced attr() Function for CSS Properties

An upgraded version of the CSS attr() function is introduced, allowing developers to use HTML attribute values directly within CSS for properties beyond content, such as width or background. This brings a more declarative approach to styling based on attribute data, with support coming soon in Firefox after a long development cycle.

CSS sibling-index() and sibling-count() Functions for List Management

The CSS sibling-index() and sibling-count() functions are discussed as tools to determine an element's position within a group and count siblings. These functions facilitate complex layouts, such as evenly spacing items around a circle or dynamically styling list items based on their index, simplifying what was previously only possible with JavaScript.

CSS shrink-to-fit Container Property and Text-Box-trim Enhancements

Two layout and typographic enhancements are examined: the CSS shrink-to-fit container, which adjusts a container's size to its content, and text-box-trim, which removes extra space above and below text for more precise vertical alignment. These features address common design frustrations, with support now reaching browsers like Chrome and Safari, and Firefox support forthcoming.

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!

Wes’s Demo Site

00:22 CSS Alpha() Relative Color Function

Google Groups

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

Randy: X Instagram YouTube Threads