「最新(?)のCSS、知ってますか？」
という煽りポストを見かけたので、もちろん知っていると言い張りたい私はさっと知識を身につけるためにClaude君にシミュレーター作って！！！と雑にお願いしました。（字を読む能力が枯渇している）
とっても丁寧に作ってくれたので貼り付けます。PCからみてね。
Modern CSS Simulator
// 8 features · interactive playground
01 / color-mix()
色の混合シミュレーター
2色を指定した割合・色空間で混合。スライダーを動かして結果を確認しよう。
コントロール
プレビュー
A
Mixed
B
02 / @layer
カスケードレイヤー順序シミュレーター
レイヤーの順序をドラッグで並び替えると、スタイルの優先順位がどう変わるかを確認できる。
レイヤー順序（下が優先）
⠿reset低優先
⠿base↑
⠿components↑
⠿utilities最高優先
適用結果
テキスト要素
レイヤーの color:
03 / @scope
スコープ範囲シミュレーター
どの要素にスコープを当てるかを選択。スタイルがどの範囲に適用されるかを視覚化する。
スコープ設定
プレビュー
カードのタイトル
これはカードの本文テキストです。@scope で対象範囲を絞ることで、外部への影響を防ぎます。
フッター — scope-end に指定された場合ここには効かない
04 / @supports
ブラウザ機能検出シミュレーター
実際に CSS.supports() を実行。このブラウザが何に対応しているかリアルタイムで確認。
検出する機能
カスタム検出
検出結果がここに表示されます
05 / corner-shape
コーナーシェイプシミュレーター
border-radius と組み合わせた各 corner-shape の形状を確認。クリックで選択。
パラメーター
選択中の形状
06 / Anchor Positioning
アンカーポジショニングシミュレーター
ボタンの位置とツールチップ方向を変えて、アンカー要素への追従を体感。
設定
アンカーシーン（ホバーで表示）
ツールチップ
anchor-name: --btn position-anchor: --btn07 / @function
CSS カスタム関数シミュレーター
fluid typography の計算を CSS 関数として定義した例。引数を変えて出力値を確認。
関数の引数
計算結果
fluid() の結果
—
適用プレビュー
Aa
min
14px
vw値
—
max
32px
08 / if()
CSS if() シミュレーター
カスタムプロパティの値に応じてスタイルが条件分岐する様子を確認。バリアントを切り替えよう。
--variant の値を選択
選択中:
primary適用中のルール:
適用プレビュー
Button
Badge
ラベルAlert
variant の値によって色・スタイルが変わります。
特に調整や内容が本当に正しいのかまでは確認はしていないのですが、さっとやってくれるの便利すぎますね。
実際にいじれるし、CSSの変遷も見ることができるので感覚的にも掴みやすい。
自主勉が捗る〜〜〜
