Skip to main

HTML & CSS Polyfills

Popover, CSS Anchor Positioning, Cascade Layers

by OddBird since

Along with our work for the W3C developing specifications for the CSS language, OddBird has started and maintains a number of powerful polyfills for new web platform features including the Popover attribute, CSS Anchor Positioning, and Cascade Layers.

Explore Polyfills »

Popover Polyfill

Copy permalink to “Popover Polyfill”

Demo | Source

Popovers take a state of “auto” or “manual”. If no state is provided, the popover takes on the behavior of its default state, which is “auto”. Auto popovers can be “light dismissed” by selecting anywhere on the page, clicking the popover control button, or opening another popover on the page.

OddBird’s Popover Attribute Polyfill – built in collaboration with Keith Cirkel and used in production by GitHub – lets developers preview the upcoming mechanism for displaying popover content on top of other page content, drawing the user’s attention to specific important information or actions that need to be taken.

This polyfills the HTML popover attribute and showPopover/hidePopover/togglePopover methods onto HTMLElement, as well as the popovertarget and popovertargetaction attributes on <button> elements.

CSS Anchor Positioning Polyfill

Copy permalink to “CSS Anchor Positioning Polyfill”

Demo | Source

With polyfill applied Target and Anchors right edges line up

The CSS anchor positioning specification defines anchor positioning, “where a positioned element can size and position itself relative to one or more ‘anchor elements’ elsewhere on the page.” This CSS Anchor Positioning Polyfill supports and is based on this specification.

The proposed anchor() and anchor-size() functions add flexibility to how absolutely positioned elements can be placed within a layout. Instead of being sized and positioned based solely on the position of their containing block, the proposed new functions allow absolutely positioned elements to be placed relative to one or more author-defined anchor elements.

Cascade Layers Polyfill

Copy permalink to “Cascade Layers Polyfill”

Demo | Source

Sample Content for Layers and the Polyfill - When layers are supported or if the polyfill is in use, you will see the default bootstrap button styles. In this demo, the Bootstrap CSS is imported into the lowest priority layer making any CSS written outside of the "framework" layer take priority. This means you can apply your own styles without having to worry about increased specificity.

PostCSS Cascade Layers lets you use @layer following the Cascade Layers Specification. For more information on layers, checkout A Complete Guide to CSS Cascade Layers by Miriam Suzanne.

Upcoming Workshop

Mia from behind, standing at a laptop - speaking to a conference audience and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

by Miriam

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for Outline GbROpen Collective Avatar for Mat MarquisOpen Collective Avatar for ScheppOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for ThijsOpen Collective Avatar for Eric PortisOpen Collective Avatar for Tyson Gach

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

Posts

  1. A rusty anchor hanging with the sea in the background.
    Article post type

    Updates to the Anchor Position Polyfill

    Catching up to the spec

    by James Stuckey Weber on

    Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.

    see all Article posts
  2. Winging It post type

    CSS Anchor Positioning in Practice

    on Winging It episode 8 with James & Miriam on | 53 mins

    What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join James Stuckey Weber and Miriam Suzanne as they talk through these questions and answer yours in our monthly live stream.

    see all Winging It posts
  3. Article post type

    Using Web Platform Tests to Write and Test Polyfills

    by Ed Rivas on

    Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.

    see all Article posts
  4. see all Article posts

OddNews Sign Up

Get the latest news in front-end development — CSS, HTML, JavaScript, and UX. See Archive