Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support

This week's browser updates from Šime Vidas cover significant CSS enhancements, accessibility concerns, and a long-awaited CSS feature.

This week's highlights include the improved :not() pseudo-class, addressing smooth scrolling issues in Chrome's "Find on page" function, Safari's unique handling of the <video></video> element's media attribute, and the arrival of the path() function for clip-path.

Enhanced :not() Pseudo-class Expands Selector Capabilities

The enhanced :not() pseudo-class, now supported across major browsers, significantly boosts CSS selector power. It now accepts complex selectors and lists, enabling more precise targeting. For instance, you can select <p></p> elements not within an <article></article>:

/* Select all <p> elements not within an <article> */
p:not(article *) {
}</article></p>

Another example involves selecting the first visible list item: While :nth-child(1 of :not([hidden])) is ideal, its of notation lacks broad support. The enhanced :not() provides a workaround:

/* Select the first non-hidden list item */
:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {
}

HTTP Refresh Header: An Accessibility Risk

The HTTP Refresh header (and equivalent <meta> tag) automatically reloads pages periodically. While widely used (2.8% of Chrome page loads), this poses accessibility challenges. Short refresh intervals disrupt screen reader usage for visually impaired users. WCAG allows its use only with a value of 0 for client-side redirects when server-side redirects aren't feasible.

Disabling Smooth Scrolling During Chrome's "Find on Page"

Chrome's smooth scrolling, while generally beneficial, interferes with the "Find on page" feature for some users. A CSS workaround by Christian Schaefer disables smooth scrolling specifically during searches:

@keyframes smoothscroll1 { from, to { scroll-behavior: smooth; } }
@keyframes smoothscroll2 { from, to { scroll-behavior: smooth; } }
html { animation: smoothscroll1 1s; }
html:focus-within { animation-name: smoothscroll2; scroll-behavior: smooth; }

Safari's Continued Support for <video></video>'s media Attribute

The <video></video> element's media attribute, allowing responsive video sources, was removed from most browsers due to concerns about efficient source selection. However, Safari still supports it. Scott Jehl advocates for its reinstatement, arguing for greater control over responsive video delivery within the <video></video> element itself.

clip-path: path() Function Now Widely Supported

Chrome's recent implementation of the path() function for clip-path completes its support across major browsers. This function, part of the CSS Shapes module, uses SVG path strings for versatile element clipping, allowing for virtually any shape.

The above is the detailed content of Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support. For more information, please follow other related articles on the PHP Chinese website!