category
CSS Layout
Anchor positioning, container queries, scroll-state, view transitions, reading-flow, focusgroup, carousels.
46 of 46 demos built, across 19 releases.
Chrome 154 (1)
-
CSS scroll-marker-group modes
The scroll-marker-group property is enhaced to support modes: 1) 'links' - The generated ::scroll-marker-group operates in "links" mode, functioning like a navigation list. This is the default mode if omitted. 2) 'tabs' ...
Chrome 152 (1)
-
CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions
Support for CSSPseudoElement - which is currently only defined for ::after, ::before, and ::marker - is now being extended to include several new pseudo-elements: ::backdrop: useful for closing a dialog when the backdro...
Chrome 150 (4)
-
Comma-separated Container Queries
Support multiple queries per @container rule. The @container rule applies if at least one of the queries matches. This makes it possible to have fallback queries for features which are not supported in all browsers, for...
-
flex-wrap:balance
flex-wrap:balance allows developers to distribute content between flex-lines so that it appears more balanced (similar to text-wrap:balance).
-
Focusgroup
Gives authors the ability to declaratively give composite widgets arrow key navigation, a guaranteed tab stop, and last-focused memory, replacing hand-coded roving tabindex scripts. Example: <div focusgroup="toolbar wrap...
-
overscroll-behavior: chain
overscroll-behavior currently has 3 values: none, auto, and contain. These values affect 2 independent effects: scroll propagation and local border effect (e.g. overscroll stretch). none: no propagation, no local effect...
Chrome 149 (3)
-
Comma-separated Container Queries
Support multiple queries per @container rule. The @container rule applies if at least one of the queries matches. This makes it possible to have fallback queries for features which are not supported in all browsers, for...
-
flex-wrap:balance
flex-wrap:balance allows developers to distribute content between flex-lines so that it appears more balanced (similar to text-wrap:balance).
-
Overscroll Gestures
This feature adds a set of primitives to allow elements to anchor to overscroll areas of other elements. It further allows these elements to be revealed with swipe gestures, similar to scrollers.
Chrome 148 (1)
-
CSS Name-only Container Queries
A CSS query container can be queried based on its container-name only, and the container does not need any container-type set: <style> #container { container-name: --foo; } @container --foo { input { background-colo...
Chrome 147 (1)
-
CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions
Support for CSSPseudoElement - which is currently only defined for ::after, ::before, and ::marker - is now being extended to include several new pseudo-elements: ::backdrop: useful for closing a dialog when the backdro...
Chrome 146 (2)
-
Focusgroup
Gives authors the ability to declaratively give composite widgets arrow key navigation, a guaranteed tab stop, and last-focused memory, replacing hand-coded roving tabindex scripts. Example: <div focusgroup="toolbar wrap...
-
Scroll Triggered Animations
This feature adds scroll-position-based control of animations, e.g. playing, pausing, and resetting an animation. A common pattern on pages across the web is to kick off an animation when a scroll position is reached. D...
Chrome 145 (2)
-
CSS Name-only Container Queries
A CSS query container can be queried based on its container-name only, and the container does not need any container-type set: <style> #container { container-name: --foo; } @container --foo { input { background-colo...
-
Overscroll effect on non-root scrollers
Shows elastic overscroll effects on non-root scroll containers. When a nested scrollable element reaches its scroll boundary, the overscroll affordance applies to that element instead of only the root scroller. This redu...
Chrome 144 (7)
-
@scroll-state scrolled support
Allows authors to style descendants of containers based on the most recent scrolling direction. Example: .scrolling-up { translate: 80px 0; transition: 0.4s translate; } html { container-type: scroll-state; ...
-
CSS anchor positioning with transforms
When an anchor-positioned element is tethered against an anchor that has a transform (or is contained by something with a transform), resolve anchor() and anchor-size() functions against the bounding box of the transform...
-
Don't use aria-details for anchor positioning
See the discussion in this issue for more context: - https://github.com/w3c/html-aam/issues/545 The code to create aria-details relationships for non-popover use cases of anchor positioning was likely a mistake. Since ...
-
Non-Tree-Scoped container-name Matching
Ignore tree-scope when matching container-name for @container queries. Previously, container-name matching for container queries used tree-scoped names/references for matching, which meant the same name would not match ...
-
Respect overscroll-behavior for keyboard scrolls
When you set `overscroll-behavior` to a value other than `auto`, the browser should not perform scroll chaining. We respect this for mouse or touch scrolling, however keyboard scrolls were ignoring it. This change makes ...
-
Respect overscroll-behavior on non-scrollable scroll containers
The overscroll-behavior applies to all scroll container elements, regardless of whether those elements currently have overflowing content or are user scrollable. Developers can use overscroll-behavior to prevent scroll p...
-
Scroll Triggered Animations
This feature adds scroll-position-based control of animations, e.g. playing, pausing, and resetting an animation. A common pattern on pages across the web is to kick off an animation when a scroll position is reached. D...
Chrome 143 (1)
-
CSS Anchored Fallback Container Queries
Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied. Such queries can be used to e.g. style an anchored element's tether, its an...
Chrome 142 (2)
-
Non-Tree-Scoped container-name Matching
Ignore tree-scope when matching container-name for @container queries. Previously, container-name matching for container queries used tree-scoped names/references for matching, which meant the same name would not match ...
-
Range syntax for style container queries and if()
This feature enhances CSS style queries and the if() function by adding support for range syntax. This extends style queries beyond exact value matching (e.g., style(--theme: dark)). Developers can now use comparison ...
Chrome 140 (2)
-
CSS scroll-target-group property
The scroll-target-group property specifies whether the element is a scroll marker group container. 'none': The element does not establish a scroll marker group container. 'auto': The element establishes a scroll mark...
-
Propagate Viewport overscroll-behavior from Root
Propagate overscroll-behavior from the root instead of the body. The CSS working group resolved[0] on not propagating properties from the <body> to the viewport. Rather, properties of the viewport are to be propagated ...
Chrome 138 (2)
-
CSS Anchored Fallback Container Queries
Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied. Such queries can be used to e.g. style an anchored element's tether, its an...
-
CSS scroll-target-group property
The scroll-target-group property specifies whether the element is a scroll marker group container. 'none': The element does not establish a scroll marker group container. 'auto': The element establishes a scroll mark...
Chrome 137 (1)
-
CSS reading-flow, reading-order properties
The reading-flow CSS property controls the order in which elements in a flex, grid or block layout are exposed to accessibility tools and focused via TAB keyboard focus navigation. This change implements the CSS reading...
Chrome 135 (5)
-
::column pseudo element for Carousel
A ::column pseudo element, which allows applying a limited set of styles to the generated fragments. Specifically, this would be limited to styles which do not affect the layout, and thus can be applied post-layout.
-
::scroll-button() pseudo elements
Allow the creation of interactive scroll buttons as pseudo-elements, e.g. .scroller { overflow: auto; } .scroller::scroll-button(inline-start) { content: "<"; } .scroller::scroll-button(inline-end) { content: ">...
-
::scroll-marker and ::scroll-marker-group for Carousel
::scroll-marker and ::scroll-marker-group for scrolling containers: Pseudo elements that allow to create a set of focusable markers for all of the associated items within the scrolling container.
-
CSS anchor positioning remembered scroll offset
Add support for the concept of "remembered scroll offset" - see https://drafts.csswg.org/css-anchor-position-1/#scroll When a positioned element has a default anchor, and is tethered to this anchor at one edge, and ag...
-
CSS Logical Overflow
The overflow-inline and overflow-block CSS properties allow setting overflow in inline and block direction relative to the writing-mode. In a horizontal writing-mode overflow-inline maps to overflow-x, while in a vertica...
Chrome 133 (2)
-
CSS Scroll State Container Queries
Use container queries to style descendants of containers based on their scroll state. The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following ...
-
Popover invoker and anchor positioning improvements
This chromestatus represents the following related set of changes, which were resolved in https://github.com/whatwg/html/pull/9144#issuecomment-2195095228 and landed in https://github.com/whatwg/html/pull/10728: 1. add ...
Chrome 132 (4)
-
::scroll-button() pseudo elements
Allow the creation of interactive scroll buttons as pseudo-elements, e.g. .scroller { overflow: auto; } .scroller::scroll-button(inline-start) { content: "<"; } .scroller::scroll-button(inline-end) { content: ">...
-
CSS Anchor Positioning: allow anchor-size() in inset and margin Properties
Allow anchor-size() values for inset and margin properties. Originally, anchor-size() was only allowed in sizing properties. The specification was changed to allow anchor-size() in insets and margins as well.
-
Popover invoker and anchor positioning improvements
This chromestatus represents the following related set of changes, which were resolved in https://github.com/whatwg/html/pull/9144#issuecomment-2195095228 and landed in https://github.com/whatwg/html/pull/10728: 1. add ...
-
Sideways writing modes
Support of `sideways-rl` and `sideways-lr` keywords for `writing-mode` CSS property is added. They are vertical writing modes, and all letters are sideways.
Chrome 131 (4)
-
@page margin boxes
Add support for page margin boxes, when printing a web document, or exporting it as PDF. @page margin boxes allows an author to define the contents in the margin area of a page, for instance to provide custom headers an...
-
CSS Anchor Positioning: allow anchor-size() in inset and margin Properties
Allow anchor-size() values for inset and margin properties. Originally, anchor-size() was only allowed in sizing properties. The specification was changed to allow anchor-size() in insets and margins as well.
-
CSS Anchor Positioning: anchor-scope
The anchor-scope property allows limiting the visibility of anchor names to a given subtree.
-
Deprecation of CSS Anchor Positioning property `inset-area`
The CSSWG resolved to rename the `inset-area` property to `position-area`. See the CSSWG discussion here: https://github.com/w3c/csswg-drafts/issues/10209#issuecomment-2221005001. The new property name, `position-area`, ...
Chrome 130 (1)
-
CSS Container Queries flat tree lookup
Look up query containers in the flat tree ancestor order instead of shadow-including order. The specification for container queries changed to look up flat tree ancestors. This change is only relevant for shadow DOM w...