CSS route matchingでnavigation stateをstyle可能に — 2026年 第31週 CSS・スタイリング

提案中のCSS Route and Navigation Matching仕様は、styleをnavigationの出発点・到着点・trigger elementへ反応させます。Named patternは@routeで宣言し、@navigationはfrom・to endpointをqueryしてJavaScriptなしにview-transition typeを指定します。:nav-source pseudo-classはクリックelementを選びlist thumbnailをdetail page heroへつなぎ、:link-to()は目的routeに応じてlinkをstyleします。Parameter matchingとbase URL動作はまだopen questionです。CSSWG議論前でexperimental Chrome Canary feature限定のため、production CSSではなくfeedback対象です。

実験的なborder-shape propertyはbasic shapeをelementへ適用しつつ、border・outline・box shadowをそのpathに沿わせます。clip-pathと違って装飾を切り落とさず、既知のshape()、polygon()などのsyntaxを再利用できます。値一つはshapeをstrokeし、二つは外側と内側のpathを定義してcutout、partial frame、breakout decorationを作ります。Contentは別途管理しなければ元の矩形boxに従い、border-radiusは無視されます。現在Chrome限定なので、単純なfallback付きprogressive enhancementとして使うべきです。

CSSのlh unitはelementの計算済みline heightと等しく、typographic rhythmをlayout計算に使えます。Ahmad Shadeedはparagraph spacingと反復paper-line gradientへ一つのline heightを使い、font size変更後も整列を保ちます。5lh制限のlistは正確に5行後でfadeでき、1lhの比率で決めたiconは周囲のlabelに追従します。高度な例はcalc-size()とround()を組み合わせ、float imageのheightをline gridへ合わせます。こうした関係は重複pixel値をなくしresponsive typography変更を安全にします。

Firefox NightlyはCSS progress() functionとno-clamp keywordを有効化し、stable Firefox 155は9月1日を予定しています。Safari Technology Preview 248もno-clampを追加し、value normalizationのinteroperability gapを縮めました。別途Chromiumはnative CSS mixinのprototype意向を示しましたが、specificationとimplementationは初期段階です。このroundupはframework breakpointも比較し、mdのようなlabelが普遍的device widthではないと警告します。Prerelease browserでexperimentできますがfallbackを残し、予定ship dateを現在のbaseline supportとして扱わないでください。