new file: css/conditional-styling-for-unsupported-css-features.md

css/conditional-styling-for-unsupported-css-features.md

@@ -0,0 +1,31 @@
+# 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);
+  }
+}
+```