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를 고릅니다.
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 논쟁은 “3상태”가 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 논쟁은 “3상태”가 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가 아니라 이름 붙은 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도 바꿉니다.
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해야 합니다.