Published: May 19, 2026
This is a generated list of all the use cases now available in Modern Web Guidance.
accessibility
accessible-error-announcement
Synchronize programmatic accessibility states (like aria-invalid) with the visual :user-invalid state to ensure screen reader users receive error feedback only after interaction, mirroring the visual experience.
Features used:
built-in-ai
language-detection
Features used:
language-model
Run on-device natural language inference in the browser using the Prompt API, with streaming output, structured JSON responses, and multi-turn session management.
Features used:
summarizer
Summarize text content using the on-device Summarizer API.
Features used:
translator
Features used:
css
highlight-text-ranges
Highlight arbitrary text ranges on a page such as search results, spelling errors, or collaborative editing cursors.
Features used:
forms
animated-select-picker
Create a custom select component whose drop-down is animated. For example, the menu fades or slides into view, or the options animate upon selection.
Features used:
autofill-address-form
Build an address form with correct autocomplete attributes and autofill support.
Features used:
autofill-highlight-inputs
Use CSS to highlight form fields that have been autofilled by the browser and not edited by the user.
Features used:
autofill-payment-form
Build a payment form that collects card details with correct autocomplete values and autofill support.
Features used:
autofill-sign-in-form
Build a sign-in form with correct autocomplete values and autofill support.
Features used:
autofill-sign-up-form
Build a sign-up form with correct autocomplete values and autofill support.
Features used:
brand-consistent-forms
Match checkboxes, radio buttons, range sliders, and progress bars to your site's color palette without replacing them with custom components.
Features used:
branded-select-styling
Create custom select elements whose button, picker, arrow icon, and checkmark all seamlessly match your brand or design system's typography, colors, spacing, and border treatments.
Features used:
custom-select-picker-layouts
Create custom select pickers whose options are positioned in unique or interesting ways, rather than the traditional stacked list of options.
Features used:
form-fields-automatically-fit-contents
Allow form fields to grow and shrink to fit the user input, for example, as the user types or selects a different option. Apply maximum and minimum size limits to create dynamic and responsive form fields that conform with the page design.
Features used:
required-field-feedback
Provide error message for required form fields that were skipped or left empty only after user interaction, to avoid preemptive errors and ensure feedback is timely and contextually relevant to the user's flow.
Features used:
rich-media-picker
Create a custom select component whose options can contain complex HTML formatting (e.g. images, icons, and other rich formatting) rather than just plain text.
Features used:
select-menu-interaction
Validate that a non-default option has been chosen in a select menu only after the user has interacted with the control.
Features used:
validate-input-after-interaction
Show form field validation feedback (e.g. password complexity or email format requirements) only after the user has finished their initial interaction, avoiding premature errors on page load or while the user is typing.
Features used:
passkeys
passkey-authentication
Authenticate a returning user with a passkey for primary sign-in.
Features used:
passkey-conditional-create
Silently register a passkey for an existing user after a successful password login.
Features used:
passkey-management
Let users view and manage the passkeys registered to their account.
Features used:
passkey-reauthentication
Verify a signed-in user's identity using their existing passkeys before a sensitive action.
Features used:
passkey-registration
Register a passkey for an existing user account.
Features used:
performance
batch-analytics-events
Debounce and batch multiple analytics events together in a single beacon to minimize network contention and reduce server load, while still delivering real-time updates.
Features used:
break-up-long-tasks
Break up heavy synchronous processing (complex computations and/or long loops) or DOM updates, to let the browser handle user input and repaint the screen.
Features used:
calculate-total-foreground-time
Calculate the total time a user actually spent viewing a page, excluding periods when the tab was in the background.
Features used:
conditional-async-dependencies
Conditionally load or initialize async dependencies (such as importing polyfills for missing web features) without requiring complex orchestration across all of a page's script dependencies.
Features used:
defer-rendering-heavy-content
Reduce rendering times in content-heavy web pages (e.g. pages with long feeds, lots of articles, or complex dashboards), by deferring rendering for any content that is not immediately visible to the user.
Features used:
defer-work-until-scroll-ends
Defer expensive operations like DOM updates, data fetching, analytics tracking, or layout recalculation until after scrolling completes to maintain smooth scroll performance.
Features used:
deprioritize-background-fetches
Deprioritize background data fetches made with the Fetch API to prevent network contention with user-initiated requests.
Features used:
detect-initial-visibility-state
Reliably determine whether a page was initially loaded in the background, even in cases where the script is loaded asynchronously after the user foregrounded the page.
Features used:
efficient-background-processing
Conserve system resources and battery life by pausing background JavaScript execution (such as <canvas> animations, WebGL rendering, or high-frequency WebSocket data polling) when the component is off-screen and then resume them just-in-time when they scroll back into view.
Features used:
faster-spa-view-transitions
Enable faster transitions back to previously visited views in a Single-Page Application (SPA) by preserving their structural DOM state instead of destroying and rebuilding them on every navigation.
Features used:
full-session-analytics
Reliably track analytics, errors, and telemetry data across the user's entire page visit, and defer sending of the data until the user leaves the page.
Features used:
identify-heavy-scripts
Identify the scripts most responsible for long animation frames
Features used:
identify-inp-causes
Identify slow running JavaScript that is impacting INP metric
Features used:
improve-next-page-load-performance
Improve page load performance by prefetching or prerendering pages that the user is likely to visit next.
Features used:
interactions-in-complex-layouts
Make interactions snappier and more responsive (reducing Interaction to Next Paint (INP) scores) by avoiding layout re-calculations in complex layouts, such as data-heavy dashboards or spreadsheet-style grids.
Features used:
optimize-image-priority
Optimize the loading priority of Largest Contentful Paint (LCP) candidate images and deprioritize non-critical images to reduce critical resource load delays.
Features used:
optimize-preload-priority
Optimize the relative priority of preloaded content to reduce critical resource load delays.
Features used:
optimize-script-priority
Optimize the loading priority of scripts by boosting critical asynchronous scripts and deprioritizing non-essential or late-body scripts to improve sequencing and reduce delays.
Features used:
resolution-optimized-pseudo-elements
Use resolution-optimized images in CSS pseudo-elements (such as ::before and ::after) to reduce the number of DOM nodes.
Features used:
schedule-tasks-by-priority
Schedule tasks with different priorities to ensure critical work runs first while background work is deferred.
Features used:
sequence-distributed-events
Log and sequence operations in distributed microservices or high-throughput tracing environments by recording timestamps with nanosecond resolution.
Features used:
user-experience
adapt-scrollbar-to-contrast-preferences
Enhance scrollbar visibility for users who prefer high-contrast interfaces
Features used:
anchor-positioning-tab-underline
Transition an element seamlessly between two target element positions. For example, moving a selected tab underline between the previously selected tab and the currently selected tab.
Features used:
animate-element-entry-exit
Smoothly hide/show elements as they are added/removed from the DOM or as their display values are toggled.
Features used:
animate-to-from-top-layer
Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.
Features used:
animate-to-intrinsic-sizes
Smoothly animate interactive components (like accordions, menus, and expanding cards) to and from their natural dimensions.
Features used:
apply-webgl-shaders
Apply custom visual effects with WebGL shaders to HTML content.
Features used:
calculate-event-differentials
Calculate the duration and time remaining between dates and times.
Features used:
calculate-with-intrinsic-sizes
Calculate the size of an element based on its intrinsic size, while ensuring it fits within given design constraints.
Features used:
capture-location-agnostic-data
Record chronological data that should not change based on a user's location, such as birthdates, recurring alarms, or national holidays.
Features used:
carousel-slide-effects
Create a carousel of slides with images or other visual elements, where each slide animates as they enter/center/exit their scroller. For example, the slides may fade-in/fade-out, rotate, get bigger or smaller, etc.
Features used:
carousel-snap-highlights
Visually highlight the currently snapped non-interactive item in scroll-snapping carousels, galleries, or full-page swipe experiences. For example, expanding a card when snapped, or revealing hidden content.
Features used:
child-state-based-styling
Build a component that changes its styling based on the state of one of its child elements. For example, a component that renders in light or dark mode based on whether a theme toggle is checked (or not).
Features used:
complex-shapes
Clip elements and their content to any free-form shape, like a symbol, brush stroke, or organic texture for more expressive designs.
Features used:
component-specific-light-dark-theme
Force certain elements to be in light mode or dark mode (e.g. code blocks, media players, etc) independently of the page's color-scheme.
Features used:
consistent-cross-document-transitions
Ensure critical page state is loaded and stable before initiating a cross-document view transition. This means critical CSS styles are loaded and applied, critical JavaScript is loaded and run, and the HTML visible for the user's initial view of the page has been parsed before the transition runs.
Features used:
content-based-styling
Build a component that changes its layout based on whether it contains specific child elements (or not). For example, if the component contains an image, use a multi-column layout, otherwise default to a single-column layout.
Features used:
coordinate-global-events
Schedule future meetings or events by explicitly binding them to a geographical IANA time zone so that event times remain accurate regardless of Daylight Saving Time (DST) transitions, "skipped" or "repeated" hours during clock changes.
Features used:
cross-document-transitions
Create smooth, seamless transitions between full page navigations, such as cross-fades, custom reveal effects, or morphing of content from one page to the next.
Features used:
customize-scrollbar-color-and-thickness
Customize the color or thickness of a scrollbar
Features used:
dark-mode
Implement dark mode support in a way that respects the user's light/dark theme preference and adapts browser UI (e.g. scrollbars, form controls, etc)
Features used:
declarative-button-actions
Declaratively connect a button to any element to trigger custom, application-specific actions using declarative button commands, invoker commands, button commands, custom commands, or declarative toggle actions.
Features used:
declarative-dialog-popover-control
Toggle the visibility of a dialog or popover from a button without writing JavaScript.
Features used:
deliver-optimized-decorative-images
Deliver optimized decorative images (such as backgrounds, UI icons, or complex masks) by simultaneously providing next-generation image formats (like AVIF or WebP) alongside multiple pixel densities (like 1x and 2x) so the browser can dynamically negotiate the best combination of file size and visual quality for the user's device capabilities.
Features used:
design-token-reactivity
Define higher-order design tokens, like density modes (compact, comfortable, spacious) or themes and have descendant components react to changes directly and in component-appropriate ways.
Features used:
directional-navigation-transitions
Animate visual state changes to reflect the direction of a user's navigational flow, such as sliding new content in from the right when advancing forward or from the left when returning to a previous screen.
Features used:
dynamic-sibling-animations
Stagger animation or transition timing across sibling elements so each one starts after a computed delay based on its position in the sibling list.
Features used:
dynamic-sibling-styling
Create dynamic visual spectrums or layout arrangements that automatically adapt to the number of elements in a group.
Features used:
export-html-media-from-canvas
Capture and export dynamic HTML content as images or video frames from within canvas.
Features used:
expose-canvas-content-to-browser-features
Expose content rendered in a canvas to browser features like assistive technologies, translation, or reading mode.
Features used:
flicker-free-client-side-ab-testing
Deliver and render A/B tests, multi-variate tests, or other experiments using client-side JavaScript to alter or inject HTML, CSS, and JavaScript without the original content showing first before flickering or flashing to show the experiment content.
Features used:
fluid-scaling
Scale items like font size, spacing, and media sizes smoothly based on the parent container's size rather than using fixed breakpoints
Features used:
format-human-readable-durations
Present elapsed time or durations to users in a readable, localized format, with the flexibility to display either detailed unit breakdowns (e.g., "1 hour and 30 minutes") or total unit counts (e.g., "90 minutes") depending on context.
Features used:
group-element-transitions
Transition a group of similar elements simultaneously using the same transition logic, such as removing a product from a shopping cart and having all the other products animate into their new positions.
Features used:
improve-text-layout-and-legibility
Improve the layout and legibility of short standalone text content, such as headings no longer than a few lines, by enabling the browser to apply evenly balanced line breaks when wrapping text.
Features used:
individual-transform-properties
Animate or override individual CSS transform properties (e.g. translate, rotate, scale) independently of other transform properties on a single element.
Features used:
interactive-content-in-3d-scenes
Integrate interactive HTML elements into a 3D scene.
Features used:
interactive-content-reveal
Create interactive reveal effects, such as a spotlight that follows the user's pointer to uncover details within an image or UI section.
Features used:
interest-triggered-action-previews
Show a live preview of a button's effect when a user signals interest (e.g. hovering, focusing, or long-pressing) but before they commit to clicking.
Features used:
interest-triggered-tooltips
Show a tooltip or supplemental information when a user hovers over, focuses on, or long-presses an interactive element, without requiring a click.
Features used:
light-dismiss-a-dialog
Create a modal dialog that can be closed using light dismiss (i.e. clicking or tapping outside of the dialog)
Features used:
manage-recurring-intervals
Calculate recurring intervals for subscription billings or payroll cycles, automatically adjusting for edge cases such as month-end transitions (e.g., adding one month to January 31st) to ensure accurate period calculations.
Features used:
model-partial-time-concepts
Model date and time concepts that inherently lack a standard component (such as a specific year, day, or date) without using arbitrary placeholder values that introduce calculation errors.
Features used:
move-dom-element-without-losing-state
Move or reparent a DOM element without losing important element state, such as interactivity states (:focus/:active), <iframe> loading state, animation/transition state, etc
Features used:
navigation-drawer
Create a navigation drawer component that, when triggered from a menu button, slides in from the side overlayed on top of existing page content, and slides out when dismissed (by swiping away, tapping outside, or pressing escape).
Features used:
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
Adjust the visible clipping boundary of an element to align with the content edge, padding edge, or border edge—or a specified offset from any of these—offering finer-grained control over how content is clipped.
Features used:
parallax-scroll-effects
Create scroll-based effects (such as parallax) where foreground and background layers move at different rates, creating a sense of depth as the user scrolls.
Features used:
persistent-app-tours
Create persistent onboarding walkthroughs using tethered native overlays that stay open during user interaction.
Features used:
persistent-toast-notifications
Create non-intrusive toast and overlay notifications for persistent, stackable messaging and state communication.
Features used:
persistent-top-layer-ui
Keep a modal dialog, fullscreen element, or native popover visibly open and functionally active when its underlying DOM node is moved or reparented in the DOM.
Features used:
physics-based-easing
Create custom, physics-based animation and transition effects, like bounce and spring, that feel more natural and engaging than traditional easing curves.
Features used:
platform-controls-dismiss-dialog
Create a modal dialog that can be closed using standard platform-specific user actions, such as pressing the Esc key on desktop platforms, or a "back" or "dismiss" gesture on mobile platforms
Features used:
position-aware-tooltips
Build tooltips and popovers with directional arrows (or other visual styling) that automatically point the correct way when the element flips to a fallback position.
Features used:
precise-text-alignment
Achieve precise vertical alignment with text of any font. For example, exactly equal visual padding above and below text, or aligning text perfectly flush with adjacent icons or images.
Features used:
prevent-text-wrapping
Ensure the browser does not insert line breaks into text and will allow text to overflow its container.
Features used:
pull-to-reveal
Build a pull-to-reveal feature that would enable the user to pull down on the screen to reveal more content, like a search bar.
Features used:
reduce-style-repetition
Reduce excessive style repetition by encapsulating complex or dynamic styling logic into reusable functions (such as a function that computes a gradient based on a set of input parameters).
Features used:
resilient-context-menus-and-nested-dropdowns
Build accessible, responsive menus, tooltips, dropdowns, or contextual overlays that must be tethered to specific UI elements, guaranteeing that the overlay automatically repositions itself (e.g., flipping axes) when it encounters viewport edges, ensuring it never gets cut off.
Features used:
same-document-transitions
Visually connect persisting elements across different page states or navigations in a Single Page Application (SPA) (e.g. expanding a product thumbnail into a full-bleed hero image) by smoothly morphing their size, position, or other styling properties.
Features used:
scroll-entry-exit-effects
Create fade-in, scale-up, or other complex reveal-type effects on elements as they enter and exit the scrollport (or viewport) while the user is scrolling.
Features used:
scroll-position-aware-elements
Build floating buttons or widgets (back-to-top, scroll-to-bottom, chat launchers, etc.) that appear and disappear based on whether the user has scrolled at all.
Features used:
scroll-progress-indicator
Create a scroll progress bar, stepped progress tracker, or any visual affordance that communicates how far through a page or section the user has scrolled.
Features used:
scroll-snap-realtime-feedback
Provide real-time visual feedback in linked UI elements while a user scrolls through snap-aligned content, before the scroll gesture completes.
Features used:
scroll-snap-state-sync
Synchronize navigation indicators, linked content panels, and analytics tracking with the actively snapped item in a scrollable container.
Features used:
scroll-target-on-load
Build a scrollable list of elements (e.g. a carousel of images or a chat conversation thread) that can be displayed with a particular element scrolled into view on the initial render.
Features used:
scrollability-affordance-hints
Build scroll-shadow overlays, gradient fades, or directional arrow indicators that appear only when there's actually more content to scroll to in that direction.
Features used:
scrollytelling
Animate visual properties on a target element — such as fading a backdrop, shifting a background color, or to create scrollytelling experiences — driven entirely by the scrollport position of a completely different element.
Features used:
search-hidden-content
Hide content from view using patterns such as accordions, tabs, and "Read more" sections, while ensuring the hidden text reveals itself during native "Find in page" searches, allows search engine indexing, supports URL fragment deep links, and maintains ARIA accessibility.
Features used:
shaped-cutouts
Combine multiple shapes to create complex cutouts or 'knockout' effects in elements, such as adding a notch to an element.
Features used:
shrinking-header-on-scroll
Smoothly animate a fixed header or full-page cover on scroll to dynamically shrink, gain shadows, and transform its layout over a predefined scroll distance.
Features used:
size-aware-styling
Build a component whose styles can be conditionally dependent on its own width or height, rather than the width or height of the viewport. For example a card component that can change its layouts depending on how large it is, or a call-to-action button that can conditionally display helper text based on its width.
Features used:
soft-edge-content-fade
Apply a transparency gradient to content edges to indicate further scrollable areas or to obscure payment-walled text.
Features used:
stabilize-reactive-state
Manage task deadlines or schedules in data-driven views without unexpected side effects from shared mutable state.
Features used:
stack-drill-down
Build full-screen hierarchical navigation that lets users drill down into nested views and swipe or navigate back to return, with browser history kept in sync.
Features used:
style-parent-with-has
Style parent elements of a form field (e.g. labels or fieldsets) when the field is invalid.
Features used:
support-global-calendar-systems
Display and calculate dates in non-Gregorian calendar systems (e.g., Islamic, Hebrew, or Chinese) accurately for international users.
Features used:
swipe-to-remove
Let users act on items in a list (remove, archive, mark as read, etc.) with a horizontal swipe gesture, so they can process entries quickly without tapping a separate control.
Features used:
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
Define font styles such that text remains readable and visually consistent in the event that there's a swap between the perferred font and one of the fallbacks (or vise versa).
Features used:
visually-stable-mixed-fonts
Define font styles such that text remains readable and visually consistent in situations where multiple fonts are used to render a single block of text.
Features used:
visually-texture-content
Apply realistic weathering and texture patterns to elements to give them an organic, aged, or physical material appearance.
Features used:
webmcp
agentic-forms
Expose client-side functionality as tools to AI agents by annotating standard HTML forms with WebMCP attributes.
Features used:
agentic-javascript-tools
Programmatically register client-side JavaScript functions as tools for AI agents using the WebMCP Imperative API.
Features used: