> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/css/conditional-styling-for-unsupported-css-features.md).

# Conditional Styling For Unsupported CSS Features

As much as possible, you should aim to use CSS features that have broad browser support. Sometimes browsers lag behind or you'd like to take advantage of a draft feature in browsers that support it.

For these situations, you can provide conditional styling using the [`@supports` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports).

Here is an example of conditionally using `display: grid` if it is supported:

```css
@supports (display: grid) {
  div {
    display: grid;
  }
}
```

In [this article](https://24ways.org/2019/zs-still-not-dead-baby-zs-still-not-dead/) there is an example of using `background-blend-mode` and falling back to `background-image` if it isn't supported.

```css
@supports not (background-blend-mode: normal) {
  body {
    background-image: url(fallback.png); 
  }
}
```