A <popup> element moves toward the web platform

Browser vendors are exploring a new HTML element for transient, light-dismissable user interfaces. Microsoft Edge's Melanie Richards published an explainer in late January, and Google's Mason Freed quickly followed with an intent to prototype the element in Blink. Implementation work is tracked in Chromium issue #1168738.

As proposed, the <popup> element would render on the top layer, above all other content, and hide automatically when the user presses Esc or moves focus elsewhere — a pattern known as light dismissal. It can be anchored to an activating element like a button or shown standalone on page load, for instance as a teaching UI. The goal is to make such UI fully stylable and accessible by default.

Two use cases showing a white action menu with four gray menu links below a blue menu button, and another example of a blog button with a large dark blue tooltip beneath it with two paragraphs of text in white.

The proposal differs from existing elements in two ways: only one <popup> can be visible at a time, unlike <dialog>, and it accepts arbitrary content, including interactive elements, unlike the deprecated <menu>. The name itself is not final.

Award winners ignore prefers-reduced-motion

AWWWARDS announced its 2020 site-of-the-year winners this week, and the list is heavy on full-screen motion:

All five animate heavily on load and during scroll, yet none honors the <a href="https://css-tricks.com/introduction-reduced-motion-media-query/">prefers-reduced-motion</a> media query. That's a problem for the roughly one in four adults in the US who experience dizziness or nausea from such motion, per WCAG guidance on animation from interactions.

/* (code from animal-crossing.com) */
@media (prefers-reduced-motion: reduce) {
  .main-header__scene {
    animation: none;
  }
}

One counterexample: Nintendo's official Animal Crossing: New Horizons site. It respects prefers-reduced-motion and also offers a visible "Reduce motion" toggle near the top of the page.

Screenshot of the animal crossing game website that is bright with a solid green header above a gold ribbon that displays menu items. Below is the main banner showing a still of the animated game with a wooden welcome to Animal Crossing sign in the foreground.

(via Eric Bailey)

Cross-origin isolation is now opt-in-able

Chrome and Firefox now support the two HTTP response headers needed for a page to enter cross-origin isolation, a step toward a broader long-term security improvement:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

In exchange for requiring third-party resources to opt in via CORS headers, a cross-origin-isolated page gains access to powerful capabilities like SharedArrayBuffer.

if (crossOriginIsolated) {
  // post SharedArrayBuffer
} else {
  // do something else
}

WhiteHouse.gov sets a higher accessibility bar

The Biden administration rebuilt WhiteHouse.gov from scratch in six weeks with accessibility "top of mind," and Microsoft's chief accessibility officer reviewed the result favorably. Notably, the site's accessibility statement references WCAG 2.1 (2018) — a step beyond the WCAG 2.0 (2008) standards that US federal agencies are legally required to meet.

"The Web Content Accessibility Guidelines are the most widely accepted standards for internet accessibility. … By referencing WCAG 2.1 (the latest version of the guidelines), the Biden administration may be indicating a broader acceptance of the WCAG model."

100vw and the classic scrollbar trap

On Windows, a visible vertical scrollbar consumes layout space, narrowing the <html> element; this is a classic scrollbar. macOS, by default, uses overlay scrollbars that float over content and don't affect layout.

The CSS unit 100vw equals the width of the viewport, not the <html> element. When a classic scrollbar appears, the <html> element narrows but 100vw does not — making the unit wider than the page. A header styled with width: 100vw for a full-bleed effect will then trigger a horizontal scrollbar on Windows, though macOS developers may never notice since overlay scrollbars mask the issue.

Screenshot of an article on a white background with a large black post title, post date and red tag links above a paragraph of black text. A scrollbar is displayed on the right with two large red arrows illustrating the page width, which is larger than the 100 viewport width unit.

MacOS developers who set "Show scroll bars" to "Always" in System Preferences > General can reproduce the bug before shipping. The issue has also been raised with the CSS Working Group.