Keep an eye on Baseline status from webstatus.dev.
The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.
The toReversed(), toSorted(), toSpliced(), and with() methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as sort() or reverse() that change arrays in place.
The Object.groupBy() and Map.groupBy() static methods group values of arrays and iterables based on a function that returns a key for each value.
The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
The Intl.RelativeTimeFormat API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.
The difference(), intersection(), isDisjointFrom(), isSubsetOf(), isSupersetOf(), symmetricDifference(), and union() methods of the JavaScript Set object performs operations between two sets.
The Temporal API allows you to work with dates, times, time zones, and durations. It is more powerful than the Date API.
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.
Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
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 <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.
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.
The command and commandfor attributes for the <button> HTML element dispatch an action to an element when the button is invoked (by click or keystroke), as a declarative alternative to addEventListener() calls or onclick attribute handlers.
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.
The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.
The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.
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.
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 backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
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 @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.
The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.
The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.
The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.
The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
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.
Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
The hanging-punctuation CSS property puts punctuation characters outside of the box to align the text with the rest of the document.
The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
The if() CSS function is an inline conditional value that returns a value based on a set of conditions.
The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.
The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.
The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space.
The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.
The :modal pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <dialog> element used with showModal().
CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.
The :not() functional pseudo-class matches elements that do not match the selectors in its argument.
The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. OkLCh is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS oklab() and oklch() functions.
The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.
The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.
The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.
The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).
The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.
The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.
A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.
The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
The at-rule() function, when used with @supports, checks if a CSS at-rule is supported. For example @supports at-rule(@starting-style) checks if the @starting-style at-rule is supported.
The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.
The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
View transitions allow you to create animated visual transitions between different states of a document.