Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos

This week's web development news covers significant updates across various browser features. Key highlights include the standardization of WebKit's autofill, expanded uses for the pointer cursor, and browser optimizations for autoplaying videos. Let's delve into the details.

CSS :-webkit-autofill Becomes a Standard

For years, most modern browsers (excluding Firefox) supported the :-webkit-autofill CSS pseudo-class for styling browser-autofilled form fields. This allowed developers to visually customize autofilled inputs and detect them via JavaScript:

let autofilled = document.querySelectorAll(":-webkit-autofill");

While a standard autofill event is still lacking, developers could leverage the input event and check against :-webkit-autofill.

The HTML Standard now officially includes :autofill (with :-webkit-autofill as an alias), extending this functionality to all compliant browsers. Firefox 86 is expected to implement this soon.

The :autofill and :-webkit-autofill pseudo-classes target elements autofilled by the browser, ceasing to apply if the user modifies the field.

CSS Grid for Button and Link Spacing

Josh W. Comeau's article, "Let's Bring Spacer GIFs Back!", advocates using dedicated spacer elements for button component spacing, arguing against relying solely on CSS margins. He points out the ambiguity of assigning margin to either the icon or text.

CSS Grid offers a superior solution. Instead of using non-breaking spaces (like in CSS-Tricks' newsletter), a grid layout provides more precise spacing control via the gap property.

Expanding the pointer Cursor Beyond Links

The CSS Basic User Interface module defines the cursor property. While the specification states that cursor: pointer (the hand cursor) indicates links, and browsers default to applying it to links and the arrow cursor to buttons, most websites (including Wikipedia) extend cursor: pointer to other interactive elements like buttons and checkboxes for improved user experience. The <summary></summary> element (for <details></details>) is another suitable candidate for the pointer cursor.

Autoplay Video Optimization: Delay Until Visible

To reduce energy consumption compared to GIFs, browsers have eased autoplay restrictions, encouraging the use of videos. However, unnecessary video playback when the element is off-screen is inefficient. Most major browsers (except Firefox) now automatically pause <video autoplay="" muted=""></video> elements until they are visible in the viewport, eliminating the need for manual handling with Intersection Observer.

<video autoplay=""></video> elements only play once visible on-screen (e.g., scrolled into view, revealed via CSS, or added to the DOM).

(via Zach Leatherman)

Chrome's New @font-face Descriptors

Inconsistent font metrics across browsers and operating systems can lead to vertical text misalignment, especially noticeable in large headings, and layout shifts during font swapping. Chrome introduced three new @font-face descriptors to address this:

• ascent-override (height above the baseline)
• descent-override (depth below the baseline)
• line-gap-override

@font-face {
  font-family: Roboto;
  /* Merriweather Sans has 125.875px ascent 
   * and 35px descent at 128px font size.
   */
  ascent-override: calc(125.875 / 128 * 100%);
  descent-override: calc(35 / 128 * 100%);
  src: local(Roboto-Regular);
}

Overriding these metrics ensures consistent layout across different fonts, preventing layout shifts.

The above is the detailed content of Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos. For more information, please follow other related articles on the PHP Chinese website!