New Selector Power and a Media Query-Like Video Loading Option in Browsers

This week's platform update brings improvements to CSS selectors, fresh support for scaling video sources by viewport, and confirmation that clip-path: path() now works everywhere. There are also lingering accessibility concerns with auto-refresh and an annoying Chrome interaction between smooth scrolling and page search.

The Upgraded :not() Pseudo-Class Is Now Universal

The enhanced :not() pseudo-class, which it took years to land across engines, now works in all major browsers. Unlike the older version that could only handle a simple selector, this one accepts complex selectors and full selector lists. Among other things, that opens up selectors that reach for elements outside a certain ancestor.

/* select all <p>s that are descendants of <article> */
article p {
}

/* NEW! */
/* select all <p>s that are not descendants of <article> */
p:not(article *) {
}

It also provides a workaround for a Safari-only selector feature. The :nth-child(1 of :not([hidden])) pattern — which targets the first list item without a hidden attribute — only works in Safari because the of notation remains unsupported elsewhere. With the new :not(), the same idea can be expressed without that notation:

/* select all non-hidden elements that are not preceded by a non-hidden sibling (i.e., select the first non-hidden child */
:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {
}

The Unseen Risk of Auto-Refresh Headers

The HTTP Refresh header and its <meta http-equiv="refresh"> equivalent are old but still widely used. They tell the browser to reload the page automatically, on an interval. According to Google's usage data, <meta http-equiv="refresh"> appears on roughly 2.8% of page loads in Chrome, down from 4% a year earlier.

<!-- refresh page after 60 seconds -->
<meta http-equiv="refresh" content="60">

That may sound harmless, but frequent reloads can break WCAG compliance. A page that refreshes without warning can force screen readers to start over from the top, leaving users who are blind or low-vision with too little time to read the content. There is, however, a legitimate case: WCAG permits <meta http-equiv="refresh"> with value 0 for a client-side redirect when the author has no server-side control.

Chrome's Find-on-Page Still Scrolls Smoothly. Here Is the Fix.

When scroll-behavior: smooth is set on <html>, Chrome and Firefox apply smooth scrolling to navigation, to API calls like window.scrollTo({ top: 0 }), and to scroll snapping. Chrome, though, incorrectly applies it to the "Find on page…" text search feature as well. The browser has an open bug about it, and some users find the behavior annoying. Until that's resolved, Christian Schaefer offers a CSS-only workaround that disables smooth scrolling solely for that search feature.

@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;
}

In his demonstration, clicking links still scrolls smoothly, but searching for terms like "top" and "bottom" jumps instantly.

Safari Still Honors media on Video Sources

The <video> element lets you specify several source files, each with a different MIME type or encoding, so browsers can pick the first one they can play. Years ago, the spec also allowed the media attribute on <source> elements within <video>, letting authors serve a high-resolution clip only when the viewport was wide enough.

<video>
  <source src="https://css-tricks.com/flower.webm" type="video/webm">
  <source src="https://css-tricks.com/flower.mp4" type="video/mp4">
</video>
<video>
  <source media="(min-width: 1200px)" src="https://css-tricks.com/large.mp4" type="video/mp4">
  <source src="https://css-tricks.com/small.mp4" type="video/mp4">
</video>

That capability still exists in Safari, but other engines dropped it around 2014. The reasoning at the time: media queries weren't a clean match for resolution choice, since the environment can change mid-session — a viewer can fullscreen a video after loading has begun — and the browser is better equipped than the author to decide what to download based on bandwidth.

Scott Jehl of the Filament Group thinks removing the feature was a misstep. For embedded video, he argues, authors are stuck serving files that are either too large or too small for many devices, or they must fall back to server-side logic, scripts, or third-party tooling to deliver the right size. He has written a proposal to bring media back to <source> elements in <video> and is inviting feedback.

clip-path: path() Ships in Chrome

Chrome silently shipped support for the path() function on the CSS clip-path property, taking it off the "New in Chrome 88" changelog. With that release, the feature now runs in all three major engines: Safari, Firefox, and Chrome.

Defined in the CSS Shapes module, path() accepts an SVG path string and can clip an element into effectively any shape. A photo clipped into a heart shape is possible with this syntax: