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を選びます。
Syntaxは、小さなlibraryやimperativeなglue codeを減らすbrowser featureを紹介します。Relative-color alpha syntaxはruntimeで透明度を調整し、progress()は二つの境界間の値をnormalizeし、key付きのPromise.allはarray positionではなく名前で結果を扱います。DeclarativeなHTML controlとtypographic trimmingも、一般的なinterface behaviorをより直接表現します。Stableとpreview browserで対応が揃わないため、各featureはrelease dateの想定ではなくfeature detectionと読みやすいfallbackの後ろに置くべきです。
Kevin PowellはCSSだけで、一度実行した後に完了状態を保つscroll-triggered entrance animationを作ります。View timelineが--in-view custom propertyを切り替え、container style queryがcard animationを開始し、animation-play-stateはelementがviewportを離れたとき完了位置でpauseします。animation-rangeが開始点を調整し、indexed custom propertyがcard間のstaggerを作ります。巧みなprogressive enhancementですが、reduced-motion対応とscroll-driven animationまたはstyle query非対応browser向けfallbackが必要です。
ShopTalk Showのroundtableは、production video workflowから小さいながら影響の大きいinterface判断までを行き来します。MicrolighterはCSS Custom Highlight APIで、DOMへ大量のspanを挿入せずtoken rangeを着色し、markupとaccessibilityを簡素化します。Light・dark・system themeの議論は、「三状態」がuserの明示的な選択とoperating-systemの状態を合わせて表すことを示します。実務上の軸はconstraint-driven toolingであり、運用者が理解できる最小のcontrolとediting pipelineを選ぶことです。
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も示します。
Syntaxは、小さなlibraryやimperativeなglue codeを減らすbrowser featureを紹介します。Relative-color alpha syntaxはruntimeで透明度を調整し、progress()は二つの境界間の値をnormalizeし、key付きのPromise.allはarray positionではなく名前で結果を扱います。DeclarativeなHTML controlとtypographic trimmingも、一般的なinterface behaviorをより直接表現します。Stableとpreview browserで対応が揃わないため、各featureはrelease dateの想定ではなくfeature detectionと読みやすいfallbackの後ろに置くべきです。
Kevin PowellはCSSだけで、一度実行した後に完了状態を保つscroll-triggered entrance animationを作ります。View timelineが--in-view custom propertyを切り替え、container style queryがcard animationを開始し、animation-play-stateはelementがviewportを離れたとき完了位置でpauseします。animation-rangeが開始点を調整し、indexed custom propertyがcard間のstaggerを作ります。巧みなprogressive enhancementですが、reduced-motion対応とscroll-driven animationまたはstyle query非対応browser向けfallbackが必要です。
ShopTalk Showのroundtableは、production video workflowから小さいながら影響の大きいinterface判断までを行き来します。MicrolighterはCSS Custom Highlight APIで、DOMへ大量のspanを挿入せずtoken rangeを着色し、markupとaccessibilityを簡素化します。Light・dark・system themeの議論は、「三状態」がuserの明示的な選択とoperating-systemの状態を合わせて表すことを示します。実務上の軸はconstraint-driven toolingであり、運用者が理解できる最小のcontrolとediting pipelineを選ぶことです。
@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も変えます。
Videoはstandardsの流れへimplementation tourを加えます。Relative colorとprogress()は計算を簡素化し、view timelineとstyle queryは一度だけ動くrevealを維持し、Custom Highlight APIはDOMのtoken spanなしでcodeを着色します。共通要件は規律あるprogressive enhancementで、新syntaxはsupport、motion、accessibility costを隠さずcomplexityを減らすべきです。
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します。