--- 
canonical: 'https://mwop.net/blog/2025-11-03-css-feature-selectors.html'
title: 'CSS Feature Selectors'
author: "[Matthew Weier O'Phinney](https://mwop.net)"
created: '2025-11-03T14:09:00-06:00'
updated: '2025-11-03T14:09:00-06:00'
tags:
  - css
  - til

---
I have a number of locations on my website where I've been faking a [masonry layout](https://masonry.desandro.com/) (you know, like how Pinterest lays things out) using CSS grid columns. They work, but they're not what I'm looking for.

I've been waiting for the official [masonry grid display](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) to land, and discovered that it's now an experimental feature in Chrome-based browsers that you can enable (it's been available for Firefox for awhile).

But... how can I check to see if the feature exists? Turns out CSS already has that covered, via the `@supports` selector:

```css
@supports (display: masonry) {
    .container {
        display: masonry;
    }
}

@supports not (display: masonry) {
    .container {
        display: grid;
    }
}
```

I love that CSS is fully embracing the idea of progressive enhancement! I've used feature testing in JS for a long while, but hadn't realized this was now baked in to CSS, too.