カンファレンスCSS Day 2026レポート：CSS Geekismを深掘り
アムステルダムで開催されたCSS Day 2026（第12回）では、2日間にわたって14のセッションが行われました。Lea Verouはif OKLCH色空間とブラウザのgamutクリッピング問題を取り上げ、Sara JoyはJavaScriptなしでダークモードを実現するlight-dark()とcolor-schemeを紹介しました。Bramus Van Dammeはスコープ付きサブツリー遷移やscroll-driven animationとの連携を含むView Transitionsを解説し、Jake Archibaldはappearance: base-select、::picker、selectedcontentを用いた33年越しのスタイル可能なselect要素の経緯を振り返りました。Patrick BrossetはSafari 26.4で実装されたgrid-lanes（masonryレイアウト）を発表し、Adam Arglescroll-state()、sibling-index()、interpolate-size、:autofillなどコンテキストを認識するCSSでデザインシステムを進化させるよう呼びかけて締めくくりました。
Read Articlearrow_forward Video · CSSクエリ
CSS Style Query実践
Kevin Powellは、現在すべてのブラウザでベースラインサポートされているCSS style queryの2つの実用的なパターンを実演しています。1つ目は@container style()クエリ内で親要素に--theme: primaryのようなcustom propertyを設定し、子コンポーネントが色やスタイルを自動的に調整できるようにする方法で、従来のmodifierクラス方式を置き換えます。2つ目のより強力なパターンは、style queryを条件付きmodifierクラスとして活用することです：メディアクエリのブレークポイントで--card-density: compactのようなcustom propertyを設定すると、JavaScriptやHTMLのクラス変更なしにすべての対象カードがcompactスタイルに切り替わります。PowellはこのアプローチがJSベースのクラス切り替えよりクリーンで、ブレークポイントロジックとマークアップの結合を避けられると強調しています。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · アニメーションREAD TIME: 2m
View Transition：view-transition-nameのattr() vs. match-element
繰り返し要素のセットに対してview-transition-nameを個別に指定する方法が2つあります。attr()方式はdata属性を読み取りcustom-identにキャスト（例: view-transition-name: attr(data-id type(<custom-ident>), none)）し、単一文書・複数文書（MPA）の両方の遷移で機能します。match-elementキーワードはブラウザの内部要素IDカウンターに基づいて自動的に名前を付けますが、2つの制限があります：MPAでは文書をまたいで要素IDが一致しないため完全に動作せず、::view-transition-old()のような特定のtransition pseudoを名前で指定することもできません。まとめると、match-elementは特定要素のpseudoを参照する必要のないSPA遷移に便利な省略形で、クロスドキュメントや個別ターゲットが必要な場合はattr()が適切です。
READ_FULL_LOGarrow_forwardArticle · レイアウトREAD TIME: 5m
CSS Grid LaneのAlignment
Microsoft EdgeのPatrick Brossetは、Safari 26.4で搭載され、Chromiumではフラグ付きで利用可能な新しいCSS grid-lanesレイアウト（masonryスタイル）のアライメントモデルについて詳しく解説しています。grid-lanesはgrid axis（レーンが配置される方向）とstacking axis（レーン内でアイテムが積み重なる方向）という2つの軸を導入します。grid axisでは、justify-contentとjustify-itemsが通常のCSS Gridと同様に機能します。stacking axisがgrid-lanesの新機能で、アイテムのspanningによるギャップやレーンの高さの違いがある場合に、align-items: stretchで余白を埋めることができ、これがmasonryレイアウトを自然に見せる要因です。個別アイテムはalign-selfで上書きできます。
READ_FULL_LOGarrow_forwardArticle · フォームREAD TIME: 3m
Customizable SelectのGolden Rule
Safari 27ではcustomizable selectが導入され、appearance: base-selectを使ってJavaScriptやdivベースの代替なしにselect要素を完全にスタイリングできるようになります。WebKitチーム（Saron YitbarekとTim Nguyen）が強調する唯一のルールは、すべてのoption要素に必ずテキストコンテンツまたはアクセシブルなテキスト属性を含めることです。アイコンのみの場合、ユーザーが識別できないUX上の問題、スクリーンリーダーや点字の出力エラー、未対応ブラウザでの空オプションという3つの問題が同時に発生します。対策はシンプルで、アイコンとともにvisually-hiddenテキストを保持し、@supports (appearance: base-select)で機能を包み、アイコンはラベルの代替ではなく補完として使うことです。
READ_FULL_LOGarrow_forwardArticle · タイポグラフィREAD TIME: 11m
文字にSVG Filterを適用
Carmen Ansioは、実際のHTMLテキストに活版印刷スタイルのタイポグラフィ効果を生み出すSVG filter primitiveのセットを紹介しています。operator="dilate"のfeMorphologyはCSS text-stroke（中央分割）と異なり真のアウターストロークを実現し、erodeはフォントを変えずに字形を細くします。重ねたfeOffsetレイヤーは各ステップで独立した色制御が可能な19世紀のshadow woodtypeを再現します。feSpecularLightingはぼかしたSourceAlphaを高さマップとして読み取り、mousemoveに反応するメタル表面照明効果をシミュレートします。実用的な注意点として、filter defsはdisplay:noneではなくゼロサイズのインラインSVGに配置し、bleed効果のためにfilter regionを拡張し、すべてのアニメーションにIntersectionObserverとprefers-reduced-motionを適用することを推奨しています。
READ_FULL_LOGarrow_forwardArticle · コンポーネントREAD TIME: 2m
::scroll-buttonと::scroll-markerによるNative CSS Carousel
CSS Overflow Module Level 5では、JavaScriptなしで完全にCSS駆動のカルーセルを実現する2つの新しいpseudo-elementが導入されます。::scroll-button()（inline-startやinline-endなどの論理的方向値を使用）はスクロール可能なコンテナの端にブラウザ管理のナビゲーションボタンをレンダリングし、contentプロパティでスタイリング可能です。::scroll-markerと::scroll-marker-groupは各scroll-snapポイントの視覚的な位置インジケーターを生成し、:target-current pseudo-classがアクティブなマーカーを自動的にハイライトします。ブラウザサポートは現時点で限定的ですが、このスペックによりJavaScriptのイベント処理やサードパーティのカルーセルライブラリなしに、アクセシブルで視覚的に一貫したスクロールインターフェースを純粋なCSSだけで構築できるようになります。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
アムステルダムで開催されたCSS Day 2026が今週の雰囲気を主導しました。14のセッションで言語の最前線が語られました。主なハイライトには、Lea VerouのOKLCH色空間と適切なgamutマッピング、Sara JoyのJavaScriptなしのダークモード実現（light-dark()とcolor-scheme）、Bramus Van Dammeのスコープ付きView TransitionsとScroll-driven animationの連携、Jake Archibaldのappearance: base-selectと::pickerを使った33年越しのスタイル可能なselect要素、そしてAdam Arglescroll-state()、sibling-index()、interpolate-sizeなどのコンテキスト対応CSSの採用を呼びかけるクロージングがありました。
2つのスペックレベルの進展が特に注目されました。Safari 26.4で実装され、Chromiumではフラグ付きで利用可能なCSS grid-lanesは、align-items: stretchでレーン間のギャップを自然に埋める独立したstacking axisを導入します。Microsoft EdgeのPatrick Brossetがこれを詳しく文書化しています。また、CSS Overflow Module Level 5はJavaScriptなしにscroll-snapポイントと直接連携する::scroll-button()と::scroll-marker pseudo-elementによるネイティブカルーセルを提供し、:target-currentがアクティブなマーカーを自動ハイライトします。Kevin PowellもCSS style queryがすべてのブラウザでベースラインになったことを実演し、マークアップを変えずにcustom propertyベースの条件付きテーマが実現できることを示しました。
アクセシビリティ面では、WebKitがSafari 27で提供予定のcustomizable selectの黄金ルールを発表しました。すべてのoption要素にはアイコンと共に必ずテキストコンテンツを含め、@supports (appearance: base-select)で包んでプログレッシブエンハンスメントを適用する必要があります。Carmen AnsioのSVG filter primitive深掘り — feMorphologyによる真のアウターストローク、feSpecularLightingによる金属表面の照明、feTurbulenceによるインクにじみ効果 — は、IntersectionObserverとprefers-reduced-motionの処理を施しながら実際のHTMLテキストにリッチなタイポグラフィ効果を重ねられることを示しました。
Key Takeaways- CSS grid-lanes（masonryレイアウト）がSafari 26.4で実装され、Chromiumではフラグ付きで利用可能です。align-items: stretchを使うstacking axisがmasonryの自然な雰囲気を生み出します。
- CSS Overflow Module Level 5の::scroll-button()、::scroll-marker、:target-currentを使えば、JavaScriptやサードパーティライブラリなしに今すぐネイティブCSSカルーセルが実装できます。
- CSS style queryがすべてのブラウザでベースラインになりました。--card-density: compactのようなcustom property一つでHTMLやJavaScriptに触れずにコンポーネントのサブツリー全体のスタイルを切り替えられます。
