Weekly Platform News: Focus Rings, Donut Scope, More em Units, and Global Privacy Control

This week's web development news covers significant updates across various platforms. Key highlights include Chrome's handling of focus rings, the enhanced capabilities of the CSS :not() selector, major adoption of Global Privacy Control (GPC), and a compelling argument for em-based media queries. We also explore a CSS solution to improve form validation styling.

Chrome's Focus Ring Behavior Changes

Chrome, Edge, and other Chromium-based browsers currently display focus rings on button clicks. This differs from Safari and Firefox, which only show focus rings when keyboard navigation is used. Developers have employed workarounds using data-whatintent and :focus-visible to manage this behavior. However, Chrome 90 will eliminate the need for these workarounds by changing its user agent stylesheet to prioritize :focus-visible, thus suppressing focus rings on clicks and taps while preserving them for keyboard users.

Leveraging CSS :not() for "Donut Scope" Selection

The A:not(B *) selector pattern allows selecting all A elements not descended from B. Expanding this to A B:not(C *) creates a "donut scope," enabling precise selection of elements within a specific context, excluding those within a nested element. For example, article p:not(blockquote *) selects all paragraphs within an article, excluding those inside blockquotes.

Global Privacy Control Gains Traction

Global Privacy Control (GPC), a legally enforceable privacy signal using the Sec-GPC: 1 header, signals user preference against data sharing or sale. The New York Times is the first major publisher to fully support GPC, with others like The Washington Post and Automattic pledging support shortly. When a GPC signal is detected, compliant sites will cease sharing user data (excluding service providers) where relevant privacy laws apply.

The Advantages of em-Based Media Queries

Websites using pixel-based font sizes (font-size: 20px) are unresponsive to browser-level font size adjustments. Using em and rem units allows responsiveness to user preferences. For consistent behavior, media queries should also use em units (e.g., min-width: 80em). This ensures responsive layouts adapt correctly even when users adjust their default font size, preventing issues like excessively short lines in multi-column layouts. A PostCSS plugin simplifies the conversion from px to em in media queries.

Improving Form Validation Styling with :user-invalid

The standard CSS :invalid pseudo-class has limitations in form validation. It triggers on every keystroke and immediately on page load for required fields, potentially causing a confusing user experience. The :user-invalid pseudo-class, already supported in Firefox as :-moz-ui-invalid, addresses these issues by only applying after significant user interaction. Efforts are underway to standardize :user-invalid across other browsers.

The above is the detailed content of Weekly Platform News: Focus Rings, Donut Scope, More em Units, and Global Privacy Control. For more information, please follow other related articles on the PHP Chinese website!