Grid／flexのgap rule、簡潔なdark mode control、壊れにくいcustom highlight、斜めscroll制御を解説します。 開発ですぐ活用できるよう整理しました。
CSS gap decorationがChromeとEdge 149へ入りました。column-ruleがgridとflexboxへ拡張され、row-ruleが追加されます。Stable版はruleの自動反復、capとjunctionの独立inset、空cellのvisibility control、明示的なoverlap orderを備えます。未対応browserは装飾を無視するため、他engineの標準化が進む間も自然なprogressive enhancementとして使えます。
Lea Verouは同じ簡潔さをdark modeへ適用します。Two-state controlの下では3状態modelを維持し、最初のinteractionで反対側のexplicit themeを保存、次のinteractionでoverrideを消して現在のsystem preferenceへ戻します。共通する教訓は、underlying modelが表現できる全状態や実装詳細ではなく、ユーザーの目前の目的を公開することです。
Custom Highlight APIはJavaScript利用時にも同じ原則を守る方法を示します。意味のあるtextをsemanticな<mark>で先に示し、Highlight rangeを登録してsupport query内の::highlight()で強化します。Scriptやbrowser対応が失敗しても強調は残ります。
最後にChromium 153は、真に2次元のcanvasとscroller向けにscroll-axis-lock: noneを追加します。通常のrailingを無効化してdiagonal inputを即時反映しますが、platform defaultは意図しないdriftを防ぐため、unrestricted panningが目的のsurfaceだけで使うべきです。
Chromium 149+ではrow-rule、column-rule、rule shorthandをprogressive decorationとして使い、未対応browser向けの必須separatorは残してください。<mark> fallbackから始め、CSS.highlightsへrangeを登録し、@supportsで::highlight() stylingを囲ってください。ChromeとEdge 149はcolumn-ruleをgrid／flexboxへ拡張し、row-ruleと共通rule shorthandを追加します。Stable designはdecorationの自動反復、cap／junction別inset、空cell周辺のrule非表示、row／columnのpaint order選択に対応します。Layout markupを変えずborderやpseudo-element workaroundを減らせます。他engineは未対応のため必須separatorにはfallbackが必要で、純粋なdecorationはprogressive enhancementとして導入できます。
Lea Verouはheader theme controlが3つの実装状態を露出するより、現在のpageを明るく／暗くしたいユーザー目標を示すべきだと主張します。Underlying modelはsystem、light、darkを区別し続けます。最初のinteractionで反対のexplicit valueを保存し、次のinteractionがresolved system themeと一致したらoverrideを削除します。OSが後で変わっただけで保存済み選択を消してはいけません。Compactな1 actionでintentとreversibilityを両立します。
Custom Highlight APIはJavaScriptでRangeを作り、Highlight instanceへまとめてCSS.highlightsへ登録し、named ::highlight()でstylingします。Piccalilliは一層手前から始め、強調語をusable baseline style付きのsemanticな<mark>にします。Enhanced styleを@supports selector(::highlight(...))で囲み、未対応browserやfailed scriptでもcontentと強調を失いません。
Browserはgestureが主にvertical／horizontalで始まるとaxis locking、つまりrailingで別axisの小さな動きを抑えます。Chromium 153のscroll-axis-lock: noneは2次元scrollerにdiagonal inputを即時反映し、autoはplatform behaviorを保ちます。FirefoxとSafariは未対応ですがprogressive enhancementや@supportsで安全に使えます。Railingを外すと直線scrollもjitteryになるため、free panning向けcanvas／surfaceだけに適します。