Miriam Suzanneは2025年を通じて行ったfluidおよびレスポンシブタイポグラフィの研究をweb.devの記事にまとめ、ビューポート相対フォントサイジングの核心的なトレードオフを示します。ビューポートへの追従度が高いほど、ユーザー設定のズームへの応答性が低下するというものです。彼女のアプローチは em または rem を vw や vi 単位と組み合わせた clamp() 関数を使用し、BaselineサポートのCSS比較関数によって簡潔に表現できます。ビューポート幅に対してベースフォントサイズ（px）と有効ズーム率（%）を重ねたグラフで数式を視覚化し、ビューポートスケーリングによる2×フォントサイズ増加が200%ズームよりも急勾配であることを示します。CSS min()・max()・clamp() が広くサポートされた今、pxかremかの二項対立は不要と主張しています。
Kevin Powellは、CSS relative colorsを使えば明度・透明度バリアントごとに変数を個別管理する必要がなくなることを、toast通知UIを題材に実演します。hsl(from var(--toast-color) H S L) 構文で単一のカスタムプロパティから背景色・ボーダー色・box-shadowを派生させ、明度値を固定したりスラッシュでアルファチャンネルを付加したりする方法を示します。次にOKLCHをHSLの知覚均一な代替として紹介します。HSLでは同じ明度値でも黄色系が青色系より大幅に明るく見えますが、OKLCHはhueが変わっても知覚輝度が一定に保たれるため、自動生成された色バリアントが視覚的に整合します。このチュートリアルは、PowellがPiccalilliに寄稿したスペース区切りCSS色構文と色操作の実践ガイド2本を基にしています。
Kevin Powellは、CSS relative colorsを使えば明度・透明度バリアントごとに変数を個別管理する必要がなくなることを、toast通知UIを題材に実演します。hsl(from var(--toast-color) H S L) 構文で単一のカスタムプロパティから背景色・ボーダー色・box-shadowを派生させ、明度値を固定したりスラッシュでアルファチャンネルを付加したりする方法を示します。次にOKLCHをHSLの知覚均一な代替として紹介します。HSLでは同じ明度値でも黄色系が青色系より大幅に明るく見えますが、OKLCHはhueが変わっても知覚輝度が一定に保たれるため、自動生成された色バリアントが視覚的に整合します。このチュートリアルは、PowellがPiccalilliに寄稿したスペース区切りCSS色構文と色操作の実践ガイド2本を基にしています。
Miriam Suzanneは2025年を通じて行ったfluidおよびレスポンシブタイポグラフィの研究をweb.devの記事にまとめ、ビューポート相対フォントサイジングの核心的なトレードオフを示します。ビューポートへの追従度が高いほど、ユーザー設定のズームへの応答性が低下するというものです。彼女のアプローチは em または rem を vw や vi 単位と組み合わせた clamp() 関数を使用し、BaselineサポートのCSS比較関数によって簡潔に表現できます。ビューポート幅に対してベースフォントサイズ（px）と有効ズーム率（%）を重ねたグラフで数式を視覚化し、ビューポートスケーリングによる2×フォントサイズ増加が200%ズームよりも急勾配であることを示します。CSS min()・max()・clamp() が広くサポートされた今、pxかremかの二項対立は不要と主張しています。
第2週のCSSのテーマは、色のインテリジェンスとレイアウトの創意工夫の出会いです。注目の動画はKevin PowellによるCSS relative colorsの実演で、デザインシステムのよくある悩みを再定義します。ブランドカラーごとにtint・shade・transparentの変数を個別に管理する代わりに、hsl(from var(--toast-color) H S L)構文で単一のカスタムプロパティからすべてのバリアントを派生させます。PowellはさらにOKLCHを知覚的に優れた色空間として紹介します。HSLでは同じ明度の黄色と青色を視覚的に同等として扱いますが（実際には異なります）、OKLCHはhueが変わっても知覚輝度を一定に保つため、手動補正なしでパレットを整合的に生成できます。
