enhancing-progressively

# Progressive Enhancement

## Priority

| Priority | Approach | Examples                           |
| -------- | -------- | ---------------------------------- |
| 1        | HTML     | Semantic elements, native inputs   |
| 2        | CSS      | Grid, Flexbox, :has(), transitions |
| 3        | JS       | Only when truly necessary          |

## Detection

| JS Pattern                   | CSS Alternative                    |
| ---------------------------- | ---------------------------------- |
| `element.style.display`      | CSS `:has()`, `[open]`, `<dialog>` |
| `addEventListener('resize')` | CSS `@media`, `clamp()`, `min()`   |
| `getBoundingClientRect`      | CSS Grid, Flexbox, `gap`           |
| `setInterval` for animation  | CSS `transition`, `@keyframes`     |
| `classList.toggle`           | CSS `:checked`, `:target`          |
| `scrollTo`, `scrollIntoView` | CSS `scroll-behavior: smooth`      |
| `matchMedia`                 | CSS `@media`, `@container`         |