フォームちょうどいいCustomizable Selectの高さ
Jake Archibaldが、完全カスタマイズ可能なselect要素のpickerドロップダウンのサイズ調整という難題を掘り下げます。::picker(select)擬似要素を使い、ポップアップがビューポート端に触れたり、極端に小さくなったり、不必要に大きくなるのを防ぐ解法にたどり着きます。鍵となるのはcalc-size()で、fit-contentやstretchといった固有サイズをmin()演算に組み込めます。これにより最小値はcalc-size(fit-content, min(size, 12em))、最大値はcalc-size(stretch, min(size, 30em))として設定可能です。@supportsとflip-blockを用いたposition-try-fallbacksにより、FirefoxとSafariでもcalc-size()が普及するまで安定したフォールバックを提供します。
Read Articlearrow_forward Video · アニメーション
滑らかなAnimation付きNative Popover（JavaScript不要）
Kevin PowellがHTMLのpopover属性とCSSだけで — JavaScriptなしで — 完全にアニメーションするポップオーバーを作る過程を解説します。ボタンのpopovertargetとpopoverの間の暗黙的なアンカー関係を説明し、CSSアンカーポジショニングのposition-areaとposition-try: flip-blockを使ってポップオーバーを画面内に収めます。続いて:popover-open擬似クラス、@starting-style、そしてtransition-behavior: allow-discreteを使って滑らかな開閉アニメーションを付加します。重要な注意点として、displayはpopover要素自体ではなく(UAのdisplay: noneを上書きしてしまうため):popover-open内に設定する必要があり、grid-template-columnsのようなレイアウトプロパティは閉じるトランジション中も維持されるよう擬似クラスの外に置く必要があることを強調しています。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · レイアウトREAD TIME: 3m
CSS Grid Lane Masonry Layout Cheatsheet
Pawel GrzybekがAppleとGoogleの長年のスペック論争に決着をつけたネイティブCSSマソンリーレイアウト、display: grid-lanesの実用的なチートシートを公開しました。grid-template-columnsを使った列ベースのレイアウト、grid-template-rowsを使った行ベースのレイアウト、grid-column: span 2によるアイテムの結合、そして視覚的に紛らわしいまたはアクセシビリティを損なう配置を防ぐflow-toleranceプロパティを解説しています。現在のブラウザサポートは限定的で、ChromeとFirefoxは未対応、Safari 26.4が最も充実した実装を持ちますが一部のWPTテストは依然として失敗します。通常のgridへのプログレッシブエンハンスメントが推奨されます。
READ_FULL_LOGarrow_forwardArticle · テーマREAD TIME: 9m
持続するModeとTheme：Persistent Toggle Solutionを構築
この記事はmode（ライト/ダーク）とtheme（アクセントカラー）を明確に区別し、両者を単一の属性に混在させると組み合わせ爆発を招くと主張します。推奨アーキテクチャはこの2つをdata-modeとdata-theme属性に分離し、ネイティブのラジオ入力で操作します。3つのプログレッシブエンハンスメント層を採用しており、CSSのみの基盤レイヤー、初回描画前にlocalStorageを読み取り色の一瞬のちらつきを排除する小さなブロッキングインラインheedスクリプト、インタラクティビティとOS設定変更イベントを処理する遅延スクリプトで構成されます。重要なのはユーザーの意図（"system"）を保存し解決済みの値は保存しないことで、ページがOSの変更をリアルタイムに反映します。fieldset/legend、:focus-visible、WCAGコントラストなどアクセシビリティ要件も詳しく解説されています。
READ_FULL_LOGarrow_forwardArticle · レイアウトREAD TIME: 3m
Full-bleed CSSを修正
David Bushellがクラシックなfull-bleedユーティリティパターン — width: 100vwと負のマージンオフセット — を再検討し、OSのスクロールバーがスペースを消費する際にビューポート単位がピクセルレベルの位置ずれを引き起こす理由を説明します。現代的な解決策はビューポート単位をコンテナクエリ単位に置き換えることで、body要素を名前付きコンテナ(container: body / inline-size)にし、full-bleedクラスにinline-size: 100cqiを使います。ネストしたコンテナを扱うために@propertyを使い--body-sizeを継承可能で型付きのlengthとして定義します。これにより子コンテナ内で値が代入時点で解決され、full-bleed要素に正しく継承されます。Bushellはこの回避策を完全に不要にする将来の構文案100cqi(body)にも触れています。
READ_FULL_LOGarrow_forwardArticle · モダン CSSREAD TIME: 5m
古いTechniqueを置き換えるModern CSS Feature
長年使われてきたCSSの回避策を置き換える5つのモダンCSSプロパティを実用的に紹介します。scrollbar-gutter: stableはスクロールバーのスペースを常に確保し、モーダルがoverflow: hiddenを設定する際のレイアウトのずれを防ぎます。system-uiフォントキーワードは任意ではなく意図的に見えるプラットフォームネイティブなフォールバックを提供します。ブロックコンテナにalign-content: centerを適用するとFlexboxやGridコンテキストなしに子要素を垂直方向に中央揃えできます。light-dark()関数は2つの別々の@mediaブロックで書いていたデュアルテーマの変数定義をトークンごとに1行に圧縮します。最後に、論理的なtext-align値(start, end)が方向性のあるleft/rightを置き換え、RTLサポートを自動化します。各セクションは従来の回避策と1行の代替方法を比較しています。
READ_FULL_LOGarrow_forwardArticle · アクセシビリティREAD TIME: 4m
Grid LaneをProgressive Enhancementする
Manuel MatuzovicがSafariでdisplay: grid-lanesを使用する際のアクセシビリティの落とし穴を検証します。Safariはそのレイアウトをサポートしていますが、フォーカス順序を視覚的な順序と合わせるために必要なreading-flowプロパティはサポートしていません。彼はdisplay: grid-lanesとreading-flow: grid-rowsの両方を要求する@supportsチェックでGrid Lanesを条件付き適用することを推奨し、Safariがアクセシビリティを損なったレイアウトではなく通常のグリッドにフォールバックするようにします。緩やかな代替策としてflow-tolerance: infiniteを使えば最悪のフォーカス順序のずれを軽減できますが、完全には解決しません。彼の結論は慎重で、Grid Lanesはプログレッシブエンハンスメントで導入しやすいものの、DOMと視覚的順序の緊張関係にはキーボードとスクリーンリーダーの丁寧なテストが必要だと強調します。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
今週はCSSレイアウトとUIプリミティブが注目を集めました。AppleとGoogleの長年のスペック論争に決着をつけたネイティブCSSマソンリーレイアウトdisplay: grid-lanesについて2つの記事が公開されました。ひとつはgrid-template-columns、grid-template-rows、grid-column: span 2によるアイテム結合、flow-tolerance配置プロパティを扱う実用的なチートシート、もうひとつはSafariがdisplay: grid-lanesをサポートするがreading-flow: grid-rowsはサポートしていないため、両方を要求する@supportsでフィーチャーゲートをかけないとキーボードフォーカス順序が壊れるというアクセシビリティ警告です。ChromeとFirefoxはまだ未対応で、Safari 26.4が現時点で最良の実装を持ちます。
Jake Archibaldは完全カスタマイズ可能なselect要素のpickerドロップダウンのサイズ設定を深く掘り下げ、calc-size()を活用してfit-contentとstretchをmin()比較に参加させる解法を示し、FirefoxとSafari向けに@supportsとposition-try-fallbacks: flip-blockのフォールバックも提供しました。David Bushellは古い100vwのfull-bleedハックをコンテナクエリ単位に置き換え、bodyを名前付きコンテナとして宣言してinline-size: 100cqiを使用、ネストしたコンテナでの正しい継承には@propertyを活用しました。
Kevin PowellはHTMLpopover属性、CSSアンカーポジショニング、@starting-style、transition-behavior: allow-discreteを組み合わせてJavaScriptゼロで完全にアニメーションするポップオーバーを構築する方法を実演しました。別の記事では、古いCSSの回避策を不要にする5つのモダンCSSの一行解法 — scrollbar-gutter: stable、system-ui、ブロック要素へのalign-content: center、light-dark()、論理的text-align: start/end — が紹介されました。
Key Takeaways- display: grid-lanes（ネイティブCSSマソンリー）はSafari 26.4で利用可能ですが、Safariはreading-flowをサポートしていないため、display: grid-lanesとreading-flow: grid-rowsの両方を要求する@supportsチェックなしに本番投入するとキーボードフォーカス順序が壊れます。
- calc-size()を使うとfit-contentやstretchなどの固有サイズをmin()/max()比較に組み込めるようになり、JavaScriptなしでカスタマイズ可能なselectドロップダウンを正しくサイズ設定できます。
- popover属性と@starting-style、transition-behavior: allow-discreteの組み合わせにより、JavaScriptゼロで完全にアニメーションするアンカー配置のポップオーバーが実現できます。本番利用に値するパターンです。
