Flex line balancing、named CSS feature detection、registered custom propertyが不安定なlayout推測を明示的browser contractへ変えます。 開発ですぐ活用できるよう整理しました。
Chrome 150で先行するflex-wrap: balanceはwrapped flex itemを再配分して最終行のorphanを避けます。flex-line-countはcontainer自体を縮めず最小line数を要求できます。Ahmad Shadeedはcontainer-query width、conditional clamp式、grouping markup、pseudo-element breakと比較し、native modelが除く不安定な知識を示します。Masonry実験はvisual columnとreading orderがずれるaccessibility constraintも示します。
@supports named-feature()はproperty parsingでは分からないbehaviorを検出します。Anchor positioningがtransformに従うか、containerが一axisだけscrollするかが例です。Chrome 150、Firefox 156、Safari Technology Previewからplatform対応が始まりますがkeywordごとにsupportは異なり、旧implementationはfalse negativeになります。このmechanismはbrowser-version switchではなく、named testable behavior changeに限定されます。
未登録custom propertyはtoken streamを保持するため、sibling-index()やrelative unitがvar()を使うelementで計算されます。同じpropertyを@propertyとnumeric syntaxで登録するとdeclaration contextで先に計算され、例の結果は1から2へ変わります。URL resolutionも移動し、registered urlは宣言stylesheetへ固定されます。@propertyはvalidation metadataだけでなく、値の一部がconcreteになるcontextを選びます。
Chrome 150で先行するflex-wrap: balanceはwrapped flex itemを再配分して最終行のorphanを避けます。flex-line-countはcontainer自体を縮めず最小line数を要求できます。Ahmad Shadeedはcontainer-query width、conditional clamp式、grouping markup、pseudo-element breakと比較し、native modelが除く不安定な知識を示します。Masonry実験はvisual columnとreading orderがずれるaccessibility constraintも示します。
@supports named-feature()はproperty parsingでは分からないbehaviorを検出します。Anchor positioningがtransformに従うか、containerが一axisだけscrollするかが例です。Chrome 150、Firefox 156、Safari Technology Previewからplatform対応が始まりますがkeywordごとにsupportは異なり、旧implementationはfalse negativeになります。このmechanismはbrowser-version switchではなく、named testable behavior changeに限定されます。
未登録custom propertyはtoken streamを保持するため、sibling-index()やrelative unitがvar()を使うelementで計算されます。同じpropertyを@propertyとnumeric syntaxで登録するとdeclaration contextで先に計算され、例の結果は1から2へ変わります。URL resolutionも移動し、registered urlは宣言stylesheetへ固定されます。@propertyはvalidation metadataだけでなく、値の一部がconcreteになるcontextを選びます。
Chrome 150はflex-wrap: balanceを提供し、Flexboxが最後の行に一要素だけ残す代わりに複数lineへitemを再配分できます。関連するflex-line-countは最小line数を要求し、container query、計算済みmax-width、追加grouping markupが担っていたlayoutを表現します。対応が一browserから始まるためprogressive enhancementが必要です。
@supports named-feature()は通常のpropertyやselector検査では分からないbehaviorを検出します。最初のcapabilityはtransform-aware anchor positioningとsingle-axis scroll containerです。Keywordは意図的に狭くtest可能なcontractですが、detectorよりbehaviorが先に出たbrowserではfalse negativeになります。
@propertyでcustom propertyを登録すると値の計算時点が変わります。未登録のsibling-index() token streamはvar()が使われる場所で計算できますが、typed numberはcustom propertyの宣言場所で計算されます。Relative unit、container unit、URLも同じtiming差を持つため、登録はvalidationやanimationだけでなくsemanticsも変えます。
progressive enhancementとして扱い、読みやすいflex-wrap: wrap fallbackを残してvisual orderとreading orderを確認してください。@supports named-feature()はspecで定義されたbehavior keywordだけに使い、capabilityがdetectorより先に出たbrowserのfalse negativeを考慮してください。@propertyは値をdeclaration contextへ固定できるため、component boundaryを越えるrelative unit、sibling function、URLをtestします。