Skip to main

HTML & CSS Polyfills

Cascade Layers, CSS Anchor Positioning, Popover

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 Cascade Layers, CSS Anchor Positioning, and the Popover attribute.

Explore Polyfills »

Demo | Source

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.

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.

Source

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.

Open Source Sponsors

Current Sponsors

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

Open Collective Avatar for Outline GbROpen Collective Avatar for basherOpen Collective Avatar for Mat MarquisOpen Collective Avatar for HiddeOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for JohannesOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for Eric Portis

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!