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가 아니라 이름 붙은 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가 아니라 이름 붙은 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가 마지막 줄에 item 하나만 남기는 대신 여러 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해야 합니다.