[v3.2] Add supports-[] modifier documentation (tailwindlabs#1390)

* Add `supports-[]` modifier

* Add `supports-[]` to "Quick reference"

* Rename "Media queries" section to "Media and feature queries"

* Move "supports" to last item in "Media and feature queries" section

* Rename "Supports" title to "Supports rules"

Author: reinink

src/pages/docs/hover-focus-and-other-states.mdx

@@ -672,7 +672,7 @@ If you're using native `<dialog>` elements in your project, you may also want to
 
 ---
 
-## Media queries
+## Media and feature queries
 
 ### Responsive breakpoints
 
@@ -855,6 +855,26 @@ Use the `print` modifier to conditionally add styles that only apply when the do
 </div>
 ```
 
+### Supports rules
+
+Use the `supports-[...]` modifier to style things based on whether a certain feature is supported in the user's browser.
+
+```html
+<div class="flex **supports-[display:grid]:grid** ...">
+  <!-- ... -->
+</div>
+```
+
+Under the hood the `supports-[...]` modifier generates [`@supports rules`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) and takes anything you’d use with `@supports (...)` between the square brackets, like a property/value pair, and even expressions using `and` and `or`.
+
+For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:
+
+```html
+<div class="bg-black/75 **supports-[backdrop-filter]:bg-black/25** **supports-[backdrop-filter]:backdrop-blur** ...">
+  <!-- ... -->
+</div>
+```
+
 ---
 
 ## Attribute selectors
@@ -1226,6 +1246,7 @@ A quick reference table of every single modifier included in Tailwind by default
 | <a href="#prefers-contrast" className="whitespace-nowrap">contrast-more</a> | <code className="whitespace-nowrap before:content-none after:content-none">@media (prefers-contrast: more)</code> |
 | <a href="#prefers-contrast" className="whitespace-nowrap">contrast-less</a> | <code className="whitespace-nowrap before:content-none after:content-none">@media (prefers-contrast: less)</code> |
 | <a href="#print-styles" className="whitespace-nowrap">print</a> | <code className="whitespace-nowrap before:content-none after:content-none">@media print</code> |
+| <a href="#supports" className="whitespace-nowrap">supports-[<span className="text-slate-400">...</span>]</a> | <code className="whitespace-nowrap before:content-none after:content-none">@supports (<span className="text-slate-400">...</span>)</code> |
 | <a href="#rtl-support" className="whitespace-nowrap">rtl</a> | <code className="whitespace-nowrap before:content-none after:content-none">[dir="rtl"] <span className="text-slate-400">&</span></code> |
 | <a href="#rtl-support" className="whitespace-nowrap">ltr</a> | <code className="whitespace-nowrap before:content-none after:content-none">[dir="ltr"] <span className="text-slate-400">&</span></code> |