In this week’s roundup, we highlight a proposal for a new
<popup> element, check the use of
prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of
Let’s get into the news!
The new HTML
<popup> element is in development
On January 21, Melanie Richards from the Microsoft Edge web platform team posted an explainer for a proposed HTML
<popup> element (the name is not final). A few hours later, Mason Freed from Google announced an intent to prototype this element in the Blink browser engine. Work on the implementation is taking place in Chromium issue #1168738.
A popup is a temporary (transient) and “light-dismissable” UI element that is displayed on the the “top layer” of all other elements. The goal for the
<popup> element is to be fully stylable and accessible by default. A
<popup> can be anchored to an activating element, such as a button, but it can also be a standalone element that is displayed on page load (e.g., a teaching UI).
<popup> is automatically hidden when the user presses the Esc key or moves focus to a different element (this is called a light dismissal). Unlike the
<dialog> element, only one
<popup> can be shown at a time, and unlike the deprecated
<menu> element, a
<popup> can contain arbitrary content, including interactive elements:
<popup>as being useful for various different types of popover UI. We’ve chosen to use an action menu as a primary example, but folks use popup-esque patterns for many different types of content.
Award-winning websites should honor the “reduce motion” preference
Earlier this week, AWWWARDS announced the winners of their annual awards for the best websites of 2020. The following websites were awarded:
- Site of the year: cornrevolution.com
- Developer site of the year: kodeclubs.com
- E-commerce site of the year: eiger-extreme.mammut.com
- Mobile site of the year: synchronized.studio
- Site of the year, users’ choice: darknetflix.io
All these websites are highly dynamic and show …