Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw

This week's web development news covers a range of topics, from a proposed new HTML element to accessibility best practices and potential CSS pitfalls.

A New <popup></popup> Element Emerges

Microsoft and Google are collaborating on a new HTML <popup></popup> element, designed to create accessible and easily stylable temporary UI elements. Unlike <dialog></dialog> and the deprecated <menu></menu>, this element aims for simplicity and clear dismissal behavior (Esc key or focus change).

Accessibility in Award-Winning Websites: A Missed Opportunity

While celebrating the best websites of 2020, AWWWARDS highlighted a common accessibility oversight: none of the winning sites implemented prefers-reduced-motion. This media query allows developers to gracefully handle user preferences for reduced motion, preventing potential issues for users with vestibular disorders. The Animal Crossing website serves as a positive example of proper implementation, including a user toggle.

Cross-Origin Isolation: Enhanced Security with Trade-offs

Websites can now opt into cross-origin isolation by setting specific HTTP headers (Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin). This enhances security by restricting content loading from other origins, but grants access to powerful APIs like SharedArrayBuffer.

WhiteHouse.gov: A Commitment to Accessibility

The Biden administration's WhiteHouse.gov website demonstrates a strong commitment to accessibility, exceeding minimum requirements by referencing WCAG 2.1 guidelines.

Beware the 100vw CSS Value and Scrollbars

Using width: 100vw can create unexpected horizontal scrollbars on Windows due to the way classic scrollbars handle width. macOS users, who typically use overlay scrollbars, might not encounter this issue, making it crucial for developers to test on different operating systems and scrollbar settings.

The above is the detailed content of Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw. For more information, please follow other related articles on the PHP Chinese website!