Feature Detecting “Undetectable” CSS Features with @supports named-feature()

In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two existing properties suddenly working together? Enter @supports named-feature(), a function designed to expose these specific capabilities without relying on hacky workarounds. ~ The OG use-case: “Flexbox Gap” Back in the day (and by back in the day, I mean 2020 😅), I wrote about the gap property for Flex layouts landing in Chromium. The property already worked with Grid Layouts, and the post celebrated the property also starting to have an effect on Flex layouts. Historically, this gap property debuted in 2015 as grid-gap (as a shorthand for grid-row-gap and grid-column-gap), and worked exclusively for CSS Grid Layout. Later on, in 2017, driven by author demand, the CSS Working Group decided that spacing out items was useful across all layout methods. So they dropped the grid- prefix and…