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不要, シンプル
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
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 |
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-01-20
- 索引更新时间
- 2026-01-26
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!