8 New CSS, JS and HTML Features You Should Know

Today, we're diving into eight new and noteworthy CSS, HTML, and JavaScript APIs that you need to know about. These features, showcased through demos, offer exciting new capabilities for web development. First up is a significant enhancement to CSS relative color: the ability to add alpha transparency directly. Previously, achieving semi-transparency required pre-processing or external tools like Sass. Now, you can simply append a forward slash followed by a percentage to any color value (hex, HSL, etc.) within your CSS. For instance, `background: color('red') / 50%;` will create a semi-transparent red. This feature is surprisingly well-supported across modern browsers, with Chrome already on version 151 and Firefox nightly builds indicating imminent availability. Safari 27 will also include it, meaning this functionality is rapidly becoming a standard. This is a runtime feature, unlike Sass which operates at build time, offering dynamic control directly in the browser. Next, we explore the CSS `progress()` function. This function is designed to calculate where a given value falls within a range defined by a start and end point. The beauty of `progress()` lies in its ability to handle disparate units, allowing you to, for example, determine the progress between `2em` and `100%` width. It returns a unitless value, which can then be further processed with `calc()` to apply specific units like percentages or pixels. This is incredibly useful for animations and dynamic styling where precise interpolation is needed, without the complexity of manual calculations in JavaScript. While not directly related to the HTML progress element, it serves a similar purpose of indicating progress, albeit in a more abstract and versatile way. Support is broad, with Firefox being the notable exception currently. Moving to JavaScript, we have `Promise.allSettled`'s sibling, `Promise.allKeyed`. For years, developers have relied on libraries to handle concurrent promise resolution while maintaining key association. Now, this functionality is native. Instead of an array, `Promise.allKeyed` accepts an object where property values can be promises. When awaited, it resolves to an object with the same keys but with their corresponding promises resolved. This simplifies asynchronous operations, such as fetching multiple data sources (users, posts, podcasts) concurrently, by eliminating the need for manual index-based lookups and making the code more readable and maintainable. In HTML, the introduction of `camera` and `microphone` elements is being discussed. While these elements are in the prototyping stage, their declarative nature aims to simplify access to device media. Traditionally, this required `navigator.mediaDevices.getUserMedia` and JavaScript manipulation. The new elements propose a more direct way to request access, though the practical benefit without significant JavaScript interaction remains a point of discussion. The potential lies in integration with future APIs like `invoker` to create basic interactive experiences without extensive coding. The CSS `attr()` function is also seeing a significant update. While `attr()` has existed for a long time, its use was primarily limited to the `content` property. The modern implementation allows `attr()` to be used with a much wider range of CSS properties, including `background`, `width`, and `height`. This effectively transforms HTML attributes into CSS props, enabling dynamic styling directly from attribute values. For example, setting a `data-size="large"` attribute on a `div` can now directly influence its CSS properties. The potential for using values like `input` element values, which update dynamically, is particularly exciting, especially when combined with the `progress()` function. Two new CSS functions, `siblingIndex()` and `siblingCount()`, are set to revolutionize list and sibling-based styling. Previously, determining an element's index within its siblings or the total number of siblings required JavaScript or cumbersome repetitive CSS selectors. These functions provide direct access to this information, making it trivial to apply styles based on position or quantity. This is invaluable for creating responsive layouts, circular arrangements, and any scenario where the number or order of sibling elements dictates their appearance. Support is now widespread, with Firefox having recently shipped these features, making them universally available. The `shrink-to-fit` container sizing, or more accurately, `max-content-sizing`, addresses a niche but sometimes frustrating layout problem. It allows a parent element to be sized according to the intrinsic size of its content, even when that content would normally be constrained by its parent. This is particularly useful when dealing with elements that have `fit-content` width and need their parent to adapt accordingly, avoiding the need for less desirable layout techniques like floats. Finally, `textbox-trim` and `textbox-edge` offer fine-grained control over text rendering, particularly for vertical alignment. Text boxes often have extra space above and below the actual glyphs due to ascenders and descenders, even if those specific characters aren't present. These new properties allow developers to trim this extraneous space, leading to more precise vertical centering and consistent padding. This is a welcome addition for anyone who has struggled with font rendering inconsistencies, especially in button and text element styling. While not yet universally supported in Firefox, it's available in other browsers and offers a path for progressive enhancement.