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.
Cascade Layers Polyfill
Copy permalink to “Cascade Layers Polyfill”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.
CSS Anchor Positioning Polyfill
Copy permalink to “CSS Anchor Positioning Polyfill”
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.
Popover Polyfill
Copy permalink to “Popover Polyfill”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.