HTML Popover API

The Popover API provides a standardized way to create overlay content that appears on top of other page content. This demo uses the popover attribute on the navigation element and popovertarget on the button to create the relationship between trigger and content. This approach offers several advantages:

• Automatic handling of showing/hiding - No JavaScript required for basic functionality
• Accessible by default - Includes proper ARIA attributes and keyboard support
• Light dismiss behavior - Clicking outside or pressing Escape automatically closes the popover
• Top layer rendering - Content appears above other elements without z-index management

The popover automatically manages focus, provides keyboard navigation, and handles the display state without custom scripting.

<button popovertarget="my-popover">Open</button>

<div id="my-popover" popover>
  Popover content here
</div>

Learn more: MDN - Popover API

CSS Anchor Positioning

CSS Anchor Positioning allows elements to be positioned relative to other elements on the page, solving a long-standing challenge in web development. In this demo, the popover menu is anchored to the button that triggers it, ensuring it appears in the correct location regardless of where the button is positioned on the screen.

This feature enables:

• Declarative positioning - Define relationships in CSS rather than JavaScript
• Responsive behavior - Automatic repositioning when the anchor moves
• Fallback positions - Handle overflow scenarios gracefully
• Better performance - No JavaScript calculations or event listeners needed

The anchor-position property creates a stable, maintainable connection between the trigger and the popover content.

#trigger {
  anchor-name: --my-anchor;
}

#popover {
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(left);
}

Learn more: MDN - CSS Anchor Positioning

CSS Corner Shape

The corner-shape property adds visual polish by creating custom corner styles beyond traditional border-radius. This demo uses it to create a distinctive corner appearance on the popover menu, enhancing the visual design and helping the popover stand out from standard rectangular containers.

Benefits include:

• Creative freedom - Go beyond simple rounded corners
• Pure CSS solution - No need for SVG masks or pseudo-elements
• Performance - Hardware-accelerated rendering
• Flexible design - Multiple corner shape options available

This property allows designers to create more sophisticated and branded interface elements with minimal code.

button {
  border-radius: 1rem;
  corner-shape: squircle;
}

Learn more: MDN - corner-shape

CSS Position Try Fallbacks

The position-try-fallbacks property works hand-in-hand with anchor positioning to provide intelligent fallback positioning when the primary position would cause overflow or visibility issues. This ensures popovers and tooltips always remain visible and accessible, even in constrained viewport scenarios.

Key capabilities:

• Automatic overflow handling - Tries alternative positions when content would overflow
• Multiple fallback options - Define a sequence of fallback positions to try
• Flip keywords - Use built-in flip values like flip-block and flip-inline
• Custom @position-try rules - Define custom fallback positioning strategies

This feature eliminates the need for JavaScript-based collision detection and repositioning logic, making popover positioning more robust and performant.

@position-try --top-left {
  top: anchor(top);
  bottom: auto;
  left: anchor(left);
}

#popover {
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(left);
  position-try-fallbacks: --top-left, flip-block, flip-inline;
}

Learn more: MDN - position-try-fallbacks

CSS Interpolate Size

The interpolate-size property enables smooth animations and transitions to intrinsic sizing keywords like auto, fit-content, min-content, and max-content. Previously, animating to these values required JavaScript calculations or workarounds like using max-height with arbitrary large values.

Key benefits:

• Natural animations - Animate directly to content-based sizes without guessing values
• Eliminates hacks - No more max-height: 9999px workarounds
• Flexible layouts - Works with dynamic content that changes size
• Better maintainability - No hardcoded size values to update

This property must be set globally on :root or html to enable the feature across all elements. While powerful, browser support is still emerging, and some combinations (like height transitions on popovers) may not work reliably yet.

:root {
  interpolate-size: allow-keywords;
}

.element {
  height: 0;
  transition: height 300ms ease;
}

.element.expanded {
  height: fit-content;
}

Learn more: MDN - interpolate-size

CSS @starting-style

The @starting-style rule defines the initial state of an element when it first appears in the DOM or enters the top layer (like popovers and dialogs). This enables smooth entry animations without requiring JavaScript to toggle classes or manipulate styles.

Use cases:

• Popover animations - Animate popovers fading in and scaling up when opened
• Dialog transitions - Smooth entry animations for modal dialogs
• Dynamic content - Animate newly inserted DOM elements
• Top layer elements - Essential for animating elements that render in the browser's top layer

When combined with transitions and the allow-discrete keyword, @starting-style enables complete control over element appearance animations. The browser automatically interpolates from the @starting-style values to the element's normal state.

.popover {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms,
              display 300ms allow-discrete;
}

.popover:popover-open {
  @starting-style {
    opacity: 0;
    transform: scale(0.8);
  }
}

Learn more: MDN - @starting-style