Search⌘ K

Safely Using the :has() Selector Today

Explore how to use the CSS :has() selector as a progressive enhancement for dynamic layouts. Understand fallback strategies using :is(), :where(), and @supports to maintain compatibility across browsers. Gain insight into combining :has() with container queries to create flexible, reusable components while preparing for future CSS features.

Enhancing CSS with :has() and fallbacks

As in the image grid example, :has() can be a progressive enhancement— meaning that, if the unique arrangement styles don’t apply due to lack of browser support for :has(), the grid will still be functional, just less refined.

Additionally, remember that rules including :has() as part of a selector list may be thrown ...