enhancing-progressively
CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
プログレッシブエンハンスメント
優先順位
| 優先度 | アプローチ | 例 |
|---|---|---|
| 1 | HTML | セマンティック要素、ネイティブ入力 |
| 2 | CSS | Grid, Flexbox, :has(), transitions |
| 3 | JS | 本当に必要な場合のみ |
検出
| JSパターン | CSS代替 |
|---|---|
element.style.display |
CSS :has(), [open], <dialog> |
addEventListener('resize') |
CSS @media, clamp(), min() |
getBoundingClientRect |
CSS Grid, Flexbox, gap |
setInterval アニメーション |
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!