terminal
Weekly Digest // STYLING — Week 31-2026
paletteWeekly Report

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

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 31-2026
ナビゲーション

CSS route matchingでnavigation stateをstyle可能に

提案中の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対象です。

Read Articlearrow_forward
Article · シェイプREAD TIME: 9m

CSS border-shape、装飾を任意のpathに追従

実験的な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として使うべきです。

READ_FULL_LOGarrow_forward
Article · タイポグラフィREAD TIME: 6m

lh unit、line-heightをlayout primitiveへ

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変更を安全にします。

READ_FULL_LOGarrow_forward
Article · ブラウザー対応READ TIME: 3m

CSS progress()がFirefox Nightlyへ、native mixinも具体化

Firefox NightlyはCSS progress() functionとno-clamp keywordを有効化し、stable Firefox 1559月1日を予定しています。Safari Technology Preview 248no-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として扱わないでください。

READ_FULL_LOGarrow_forward
Video · CSS機能4:34

CSSがついにHTML attributeを読み取れるようになりました

CSS attr()の拡張により、HTML attributeのtyped valueをpseudo-elementのcontent以外のpropertyにも渡せます。type(<color>)でcolorをparseし、pixel・degree・percentage・millisecondの単位を付け、dataがないか不正な場合はcomma後にfallbackを指定できます。実演ではdata attributeからprogress barのwidthとstaggered animation delayを直接駆動します。さらにcustom-identでmatching IDをpage間の固有view-transition nameへ変え、反復selectorを不要にします。任意のstylingをmarkupへ移す機能ではなく、当時はChromeでのみ安定し、他browserやVS Codeが一部syntaxを拒否または警告する制約があります。

AI_INFOGRAPHIC
CSSがついにHTML attributeを読み取れるようになりました — infographicWATCH_VIDEOarrow_forward
Video · CSS機能5:55

CSSに仕事を任せましょう

Kevin Powellはraw precipitation dataをCSS custom propertyへ渡し、presentation計算をJavaScriptから移します。CSSはcalc()で必要な単位を付け、visual maximumをcomponent styleの隣に置き、min()でrain indicatorを100%に制限します。API値はJavaScriptに残しつつ、それをheightへ変換するruleは将来のstyling変更で見つけやすい場所に保ちます。このpatternは不透明なinline pixel値を避け、visual constantを発見しやすくします。JavaScript作業の削減は性能向上の可能性がありますが、Powellは仮定せず測定すべき仮説として扱います。

WATCH_VIDEOarrow_forward
summarizeDigest_Summary

今週のCSSは、browser navigation、shape decoration、typographic rhythmをdeclarative primitiveへ近づけました。提案中のCSS Route and Navigation Matching仕様は@route@navigation:nav-source:link-to()を導入します。これによりview transitionの方向やlink stylingを、JavaScriptのevent処理なしに出発点・到着点・クリックしたelementへ反応させられます。

Shape APIも広がっています。実験的なborder-shapeclip-pathと同じbasic shapeを受け取りながら、border・outline・shadowをpathに沿わせ、二つのshapeで外側と内側の境界を定義してcutoutや複雑なframeを作れます。Ahmad Shadeedのlhガイドは、よりすぐ使えるprimitiveです。spacing、mask、icon、float imageを計算済みline-heightに合わせると、typography変更後も整列が保たれます。これらに共通する設計原則は、visual effectを固定pixelやJavaScript stateと同期させるのではなく、関係そのものをCSSへ記述することです。

Browser convergenceはまだ未完成です。Firefoxのprogress()はNightlyでFirefox 155への搭載予定、CSS mixinはprototype段階、border-shapeはChrome限定です。Progressive enhancementとsupport checkは実装の一部です。

二つの実践videoが、その原則を具体化します。拡張されたCSS attr()は既存data attributeをtyped color、length、delay、identifierへ変え、Kevin Powellはraw application dataをcustom propertyで渡してunit変換、cap、visual constantをcalc()min()へ置きます。どちらもsynchronization codeを減らしますが、typed attribute supportには依然としてChrome優先のprogressive-enhancement経路が必要です。

Key Takeaways
  • Chrome Canaryで@route@navigationによるnavigation-aware view transitionを試しつつ、CSSWGのsyntaxとbrowser supportが安定するまでは既存のJavaScript経路を維持してください。
  • text rhythmに従うspacingには1lh、line-count maskには5lh、iconにはline-height由来のサイズを使い、typography変更後も整列を保ってください。
  • Typed attr()はmarkupに既にあるdataのprogressive enhancementとしてのみ使い、non-Chromium supportとtoolingが追い付くまではfallbackを保ってください。