The Temporal API allows you to work with dates, times, time zones, and durations. It is more powerful than the Date API.
#2
The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.
The flex-wrap: balance CSS declaration distributes items in a multi-line flex container such that each line has about the same number of items.
The focusgroup global HTML attribute combines descendant elements into a single tab stop, with arrow-key navigation between them, for toolbars, tabs, menus, radio groups, and other composite controls. It's an alternative to the sequential navigation of tabindex.
The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule.
The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.
#7
The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.
The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.
The border-shape CSS property sets the geometry of the border box, changing the shape of any applicable border, border image, focus outline, or shadow.
The Document.parseHTML() static method and the setHTML() method of Element and ShadowRoot objects parse and insert HTML into the DOM in a way that can prevent cross-site scripting attacks. The Sanitizer API can customize the sanitization process.
The if() CSS function is an inline conditional value that returns a value based on a set of conditions.
The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.
The <template for="…"> HTML element replaces the content at a named range or insertion point, marked by the processing instructions <?start name="…"> and <?end> or <?marker name="…">. You can use this to stream or "patch" partial updates into the document out of order.
Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
Interest invokers, registered by the interestfor HTML attribute, trigger events and actions on a target element when a user shows interest in the element, through behaviors such as hover, focus, or long-press. Pseudo-elements apply styles to sources and targets of interest.
#17
The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.
The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
The closedby HTML attribute for <dialog> sets which user actions close a dialog. For example, closedby="any" allows the dialog to be closed by clicking outside of it.
The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.
The popover="hint" global HTML attribute creates a popover that is subordinate to popovers with a popover="auto" attribute. You can use this to create tooltips that don't dismiss auto popovers.
#22
The Notification() constructor shows a message to the user, typically using the notification system of the host operating system.
The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.