CSS Lab
毎回ひとつだけ確かめます。これ、本当に JavaScript が必要なのか？
1. View Transitions API
MPA のページ遷移を CSS だけで演出する。一覧の板から詳細の板へ、同じ要素が動いて見えるか。
2. Scroll-driven Animationsスクロール連動のプログレスバーとフェードイン。今このサイトが JavaScript でやっている処理を置き換えられるか。
3. Container Queries画面幅ではなくカード自身の幅でレイアウトを切り替える。同じカードを幅違いの箱に入れて確かめる。
各ページの構成
デモを置くだけだと「動いた」で終わってしまうので、判断できる材料まで書きます。
- 実際に触れるデモ
- 使った HTML と CSS
- JavaScript で書いた場合との比較
- 未対応ブラウザでどうなるか
- 動きが苦手な読者への配慮
- 実運用で使うときの注意点
まだ手を付けていないもの
企画書に並べた残りのテーマです。順番は決めていません。
:has()
子の状態で親を変える
Popover API / <dialog>
一時 UI の JavaScript を減らす
CSS Anchor Positioning
ボタンに追従する吹き出し
subgrid
カード間で行位置を揃える
light-dark() / color-mix()
テーマ設計を CSS 側へ寄せる
content-visibility / text-wrap: balance
表示性能と読みやすさ