hint popovers, position-area and more
We have been busy updating the Popover and CSS Anchor Positioning Polyfills, but there is still more we can do with your help.
We have been busy updating the Popover and CSS Anchor Positioning Polyfills,
adding support for hint popovers, position-area, and more. A huge thank
you to our sponsors and contributors! If you or your company would like to
support these projects, there is much more we could do to improve polyfills for
users.
In early May, we released v0.6.0 of @oddbird/popover-polyfill.
The major update to the Popover polyfill was support for hint popovers. This
addition to the Popover API adds an extra stack of popovers that act similar to
auto popovers, but are more ephemeral.
As an example, an auto popover might be used for a dropdown. Opening a tooltip
shouldn’t close the dropdown, but it should close other tooltips. You can use
hint popovers to declaratively author this functionality.
Read more about popover=hint
on the Chrome for Developers blog, or the original Open UI
proposal.
We also updated showPopover() and togglePopover() to accept an object as an
argument. Initially, togglePopover() only accepted a boolean force, to
either open or close the popover. However, the spec was updated to add a
source parameter to showPopover() and togglePopover(), so we updated the
polyfill to allow that format.
Why use togglePopover({force: true}) instead of showPopover()?
If you call showPopover() on a popover that is already shown, the native
browser implementation will throw an error. If you aren’t sure if the popover is
already shown, you may instead want to call togglePopover({force: true}),
which will show it if it isn’t already shown, but will not throw an error if it
is.
In addition, togglePopover() now returns a boolean value indicating whether
the popover is shown after the method executes.
The Popover API has 4 to 18 months of support in all major browsers, but hint popovers have only been available in Chromium browsers for a few months.
This means that many users are on a browser that supports the Popover API, but not hint popovers. This is a problem for the polyfill, as it only can polyfill from no support to full support – partial polyfilling is not supported.
We would love to selectively polyfill popover=hint in browsers that have
support for the Popover API, but we anticipate that this will take a fair amount
of investigation and effort. You can track our progress on the Github
issue.
Read more or try out the Popover polyfill at https://popover.oddbird.net/.
In April, we released v0.5.0 of @oddbird/css-anchor-positioning, followed by v0.6.0 in May. This was the result of a lot of useful feedback and bug reports from our users.
position-area supportWhile the polyfill has supported anchor() functions since the initial release,
I expect that position-area will be the more common method for placing items.
All 50 keywords for position-area are now supported, respecting writing mode
and text direction.
You can see some demos here.
We also added support for inside and outside keywords on physical insets –
for instance with left: anchor(inside), which is equivalent to left: anchor(left).
anchor-size is now supported on margin and inset
properties, in
addition to the sizing properties that were already supported.
<link>
elements with <link> elements loading from generated blob: URLs was
breaking relative paths for assets like images, fonts, or stylesheets included
with @import. Our approach of replacing these with <style> elements has
fixed a number of these problems.Bramus’s recent proposal for CSS Parser Extensions does a great job naming one of the main challenges of writing a CSS polyfill. His estimate is that we could reduce the size of the CSS Anchor Positioning polyfill by 85% if we didn’t have to parse the CSS ourselves.
One of the frustrating caveats for our users has been that the polyfill can only affect elements and styles that are present when the polyfill is run. This creates issues for users with dynamic content, or who are using frameworks like React. While we have collaborated with users to find ways to work around the issue, we would love to solve the issue of dynamic elements.
This is not a small task, but I think it would make it possible for a lot of users to adopt the polyfill in their project, and by extension, start using Anchor Positioning. You can follow that issue to find out more.
Over the last few months, we’ve enjoyed the chance to make a lot of updates to meet users’ needs. Unfortunately, this rate of progress isn’t sustainable without additional support.
If your company is using our polyfills, or if one of the issues above is blocking you from using our polyfills, support us on Open Collective or get in touch about supporting a specific feature.
We would also welcome any code contributions if you’d like to help out that way instead!
A huge thank you to the individuals and organizations sponsoring OddBird’s open source 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!
Display color gamut ranges and more
OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.
Start using author-defined functions
There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium ‘Canary’ (v136+) browsers with the experimental platform features flag enabled. Author-defined Functions are coming to CSS, and you can start to experiment with them…
There are several proposals, but one major road block
We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.