カラーAlgorithmic Theming Engine：contrast-color()でSelf-correcting Color Systemを構築
CSS の contrast-color() 関数は Chrome 147、Firefox 146、Safari 26.0 から Baseline Newly Available となり、アクセシブルなテキスト色選択のための chroma-js、polished、tinycolor2 といったランタイム JavaScript ライブラリを置き換えます。背景色を渡すと、ブラウザがペイント前のスタイル計算フェーズで WCAG 2.x 相対輝度コントラストを基に black または white を返し、ハイドレーションフラッシュが解消されます。相対カラー構文（oklch(from contrast-color(var(--bg)) l 0.05 var(--hue))）、color-mix()、light-dark() と組み合わせることで、CSS 変数ひとつからコンポーネント全体のパレットを自動補正できます。注意点として、出力は離散値のため transition による補間はできず、現在の仕様では black か white のみ（Level 6 の候補リストは未リリース）、グラデーションや半透明色は特別な合成処理を受けます。
Read Articlearrow_forward Video · アニメーション
JavaScriptなしのScroll-driven Animation
Kevin Powell は、::before 疑似要素でレンダリングされた装飾的な順序付きリストのカウンターに適用した、純粋な CSS スクロール駆動フェード効果を順を追って解説しています。アニメーションは opacity を 0.05 から 1 へ 50% 地点で遷移させるキーフレームを使用し、従来のタイミング関数の代わりに animation-timeline: view() でスクロール位置と連動させています。animation-range-start と animation-range-end でビューポート基準のエフェクト開始・終了タイミングを細かく調整でき、たとえば 20% 進入時に開始し、終了を 120% まで延ばして要素が画面上部に近づくまでフェードアウトを遅らせることができます。requestAnimationFrame や IntersectionObserver を使わず、@keyframes とスクロール駆動タイムライン構文だけで完成した繊細で控えめな表示エフェクトです。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · アニメーションREAD TIME: 5m
CSS vs. JavaScript Animation：Performance差を解説
CSS キーフレームアニメーションとトランジションはコンポジタースレッドで動作するため、JavaScript が重い処理を行っている間も滑らかに再生され続けます。一方、requestAnimationFrame ループはメインスレッドで React の調停や fetch のパースなどすべての JS 処理と競合し、スレッドがブロックされると目に見えるカクつきが発生します。Web Animations API（WAAPI）はこのギャップを埋めるもので、Motion（旧 Framer Motion）はWAAPI を内部で使用してメインスレッド外でアニメーションを実行します。GSAP はその利点よりも豊富な機能を優先しています。実際には、まずネイティブ CSS アニメーションを選択し、CSS だけでは対応できない場合に WAAPI ベースのライブラリで補うアプローチが推奨されます。
READ_FULL_LOGarrow_forwardArticle · スコープREAD TIME: 5m
複雑なBuild StepなしでComponent-scoped CSSを実現する4つの方法
CSS ネスト、カスタムプロパティ、@scope ルールが Safari 17.4+ を含む全主要ブラウザでサポートされたことで、コンポーネントスコープのスタイルに CSS Modules、CSS-in-JS ランタイム、複雑なビルドパイプラインは不要になりました。本記事では四つの実用的アプローチを紹介しています。単一の連結 CSS ファイル、ルート経由のコンポーネント別 CSS ファイルのバンドル、:scope セレクターとオプションのドーナツスコーピング（header のスコープから nav などの子コンポーネントを除外）を使ったインライン @scope ブロック、そして data-scope 属性と Mastro の css タグリテラルを使ったサーバーサイド CSS-in-JS です。@scope は BEM 命名規則なしにスタイルの漏れを防ぎ、サーバーサイド JS 式を使えば SCSS プリプロセッサなしで動的なパレット生成も可能です。
READ_FULL_LOGarrow_forwardArticle · パフォーマンスREAD TIME: 7m
No-Vary-Searchでより賢いWeb Site Caching
No-Vary-Search HTTP レスポンスヘッダーを使うと、サーバーがキャッシュマッチングに無関係なクエリパラメーターを宣言でき、/products、/products?utm_source=twitter、/products?ref=homepage のように同一コンテンツを返しながら別キャッシュエントリとして保存されていた長年の問題を解決します。特定パラメーターの無視（params=("utm_source" "utm_campaign")）、パラメーター順序の無視（key-order）、例外を除く全パラメーターの無視（params, except=("variant" "price")）、ルールの組み合わせをサポートしています。expects_no_vary_search を通じて Speculation Rules と統合されており、ナビゲーション先の URL が無視パラメーターのみ異なる場合にブラウザが処理中の pre-render を再利用できます。現在 Chrome、Edge、Opera のみ対応で Firefox と Safari は未対応です。
READ_FULL_LOGarrow_forwardArticle · テーマREAD TIME: 4m
Tailwind CSSとOKLCHでUser-customizable Themeを構築
本チュートリアルでは、Rails アプリ向けのホワイトラベルテーマアプローチとして、Tailwind の @theme ディレクティブ内で OKLCH 色空間を使い、単一の CSS カスタムプロパティ --color-value から brand-50 〜 brand-950 の 11 段階カラーパレットを生成する手法を紹介しています。OKLCH は明度・彩度・色相を分離しているため、ランタイムで色相角（0〜360）を変更するだけで全パレットの視覚的な重みと彩度を一定に保てます。Stimulus コントローラーが style[data-theme] タグを即時更新することで、すべての brand-* ユーティリティクラスに変更が瞬時に反映されます。複数の変数（primary、secondary、accent）への拡張も可能で、ビルド時の再生成も不要です。
READ_FULL_LOGarrow_forwardArticle · ツールREAD TIME: 3m
CSS Property Type Validator Stylelint Pluginを発表
@schalkneethling/stylelint-plugin-css-property-type-validator の初ベータ版は、単一のルール css-property-type-validator/valid-property-types を通じて、型付きの @property カスタムプロパティ検証を既存の Stylelint ワークフローに組み込みます。color 型で宣言されたカスタムプロパティ（syntax: "<color>"）を background-image 値として誤用するケースなど、型の不一致を CI・エディター・pre-commit フックで別途ツールを追加することなく検出できます。registryFiles グロブで @property 定義をコンテキストとして読み込み、tokenFiles を使った checkUnknownCustomProperties モードをオプションで有効化できます。ベータ段階では自動修正・カスタム重大度マッピング・fail-fast モードは未実装です。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週CSSカラーツーリング面で重要なマイルストーンが達成されました。contrast-color()がChrome 147、Firefox 146、Safari 26.0でBaseline Newly Availableとなり、アクセシブルなテキスト色選択のためのchroma-jsやtinycolor2といったランタイムJavaScriptライブラリが不要になりました。相対カラー構文（oklch(from contrast-color(var(--bg)) ...)）、color-mix()、light-dark()と組み合わせることで、CSS変数ひとつでコンポーネント全体のパレットを自動補正できます。ただし現在はblackかwhiteのみ返し、グラデーションや半透明色は特別な合成処理が必要です。関連するチュートリアルでは、Tailwind CSS v4とOKLCHを@themeディレクティブで組み合わせ、単一の色相角からbrand-50〜brand-950の11段階ホワイトラベルパレットを生成し、Stimulusコントローラー経由でビルド再生成なしにランタイム更新する方法を紹介しました。
ビルドパイプラインなしのコンポーネントスコーピングも成熟しました。Safari 17.4+を含む全主要ブラウザでCSS nesting、custom properties、@scopeがサポートされたことで、CSS ModulesやCSS-in-JSランタイムなしに、インライン@scopeブロック（サブコンポーネントを除外するドーナツスコーピング）、ルート別CSSファイルバンドル、またはdata-scope属性を使ったサーバーサイドcssタグリテラルから選択できます。新しいStylelintプラグイン（@schalkneethling/stylelint-plugin-css-property-type-validator）は型付き@propertyバリデーションを追加し、color型のカスタムプロパティをbackground-image値として誤用するケースなどをCIやエディターで検出します。
パフォーマンスとアニメーション面では、No-Vary-SearchがUTMタグなどのクエリパラメーターをキャッシュ無関係として宣言し重複キャッシュエントリを防ぐ方法として注目されました。Speculation Rulesと統合してpre-renderの再利用も可能ですが、現在はChrome、Edge、Operaのみ対応です。Kevin Powellの動画はanimation-timeline: view()とanimation-range-start/endでJavaScriptなしにスクロール駆動フェードアニメーションを実装する方法を実演し、Josh Comeauの記事はrequestAnimationFrameループに対するCSSおよびWAAPIベースのMotionライブラリのコンポジタースレッドの優位性を明確に解説しました。
Key Takeaways- contrast-color()がBaseline Newly Available（Chrome 147、Firefox 146、Safari 26.0）になりました。テーマエンジンからchroma-jsとtinycolor2を除き、ブラウザがスタイル計算でアクセシブルなblack/whiteテキスト色を決定するようにしましょう。
- CSS @scope、nesting、custom propertiesはビルドステップなしでクロスブラウザ対応済みです。ドーナツスコーピングで親スコープからサブコンポーネントを除外でき、多くのチームでBEMやCSS Modulesを置き換えられます。
- No-Vary-SearchレスポンスヘッダーはUTMパラメーターなどのトラッキングクエリパラメーターによる重複キャッシュエントリを防ぎ、Speculation Rulesと統合してpre-renderを再利用できます。ただし現在はChrome、Edge、Operaのみ対応です。
