enhancing-progressively
CSS-first approach - use CSS before JavaScript. Use when implementing layouts, animations, or toggles, or when user mentions レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
Installation
Suivez les instructions du dépôt pour votre agent. Consultez les fichiers et dépendances avant l’installation.
Voir la source ↗GuidesInstructions
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 |
Exemples
Consultez les exemples du dépôt source.
Voir la source ↗Historique source
- Date d’indexation
- 2026-01-20
- Mise à jour de l’index
- 2026-01-26
- Branch
- main
Les dates concernent ce répertoire. Consultez le dépôt pour l’historique du code.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!