Grid와 flex gap rule, 단순한 dark mode control, resilient custom highlight, diagonal scroll 제어를 다룹니다. 개발자가 바로 활용할 수 있도록 정리했습니다.
CSS gap decoration이 Chrome과 Edge 149에 도입됐습니다. column-rule이 grid와 flexbox로 확장되고 row-rule이 추가됐습니다. Stable 형태는 rule 자동 반복, cap과 junction의 독립 inset, 빈 cell visibility control, 명시적인 overlap order를 제공합니다. 지원하지 않는 browser는 decoration을 무시하므로 다른 engine의 표준화가 진행되는 동안 자연스러운 progressive enhancement로 쓸 수 있습니다.
Lea Verou는 같은 단순화 원칙을 dark mode에 적용합니다. Two-state control 아래에는 세 상태 model을 유지합니다. 첫 interaction은 반대쪽 explicit theme을 저장하고, 다음 interaction은 override를 삭제해 현재 system preference로 돌아갑니다. 공통 교훈은 underlying model이 표현할 수 있는 모든 상태나 구현 세부 사항이 아니라 사용자의 즉각적인 목표를 노출하라는 것입니다.
Custom Highlight API는 JavaScript를 사용할 때도 이 원칙을 지키는 법을 보여 줍니다. 먼저 의미 있는 text를 semantic <mark>로 표시한 뒤 Highlight range를 등록하고 support query 안의 ::highlight()로 향상합니다. Script나 browser 지원이 실패해도 강조는 사라지지 않습니다.
마지막으로 Chromium 153은 실제 2차원 canvas와 scroller를 위한 scroll-axis-lock: none을 추가합니다. Browser의 일반적인 railing을 해제해 diagonal input을 즉시 반영하지만, platform default는 보통 accidental drift를 막아 주므로 unrestricted panning이 의도된 surface에만 적용해야 합니다.
Chromium 149+에서 row-rule, column-rule, rule shorthand를 progressive decoration으로 사용하되 미지원 browser의 필수 separator는 유지하세요.<mark> fallback에서 시작한 뒤 CSS.highlights에 range를 등록하고 @supports로 ::highlight() styling을 제한하세요.Chrome과 Edge 149는 column-rule을 grid와 flexbox로 확장하고 row-rule, 공통 rule shorthand를 추가합니다. Stable design은 decoration 자동 반복, cap/junction별 inset, 빈 cell 주변 rule 숨김, row와 column의 paint order 선택을 지원합니다. Layout markup을 바꾸지 않고 border와 pseudo-element workaround를 줄일 수 있습니다. 다른 engine은 아직 지원하지 않으므로 필수 separator에는 fallback이 필요하고 순수 decoration은 progressive enhancement로 바로 도입할 수 있습니다.
Lea Verou는 header theme control이 세 구현 상태를 노출하기보다 현재 page를 밝거나 어둡게 바꾸려는 사용자 목표를 보여 줘야 한다고 주장합니다. Underlying model은 system, light, dark를 계속 구분합니다. 첫 interaction은 반대 explicit value를 저장하고, 다음 interaction이 resolved system theme과 일치하면 override를 삭제합니다. OS가 나중에 바뀌었다는 이유로 저장된 선택을 지우지 않는 것이 중요합니다. Compact한 한 번의 action으로 intent와 reversibility를 함께 보존합니다.
Custom Highlight API는 JavaScript로 Range를 만들고 Highlight instance에 묶어 CSS.highlights에 등록한 뒤 named ::highlight()로 styling합니다. Piccalilli는 그보다 한 layer 앞에서 시작합니다. 강조할 단어를 usable baseline style이 있는 semantic <mark>로 표시합니다. Enhanced style은 @supports selector(::highlight(...)) 안에 두어 미지원 browser나 failed script에서도 content와 강조를 잃지 않습니다.
Browser는 gesture가 대부분 vertical 또는 horizontal로 시작하면 axis locking, 즉 railing을 적용해 다른 axis의 작은 움직임을 억제합니다. Chromium 153의 scroll-axis-lock: none은 2차원 scroller가 diagonal input을 즉시 따르게 하고 auto는 platform behavior를 유지합니다. Firefox와 Safari에는 아직 없지만 progressive enhancement나 @supports로 안전하게 적용할 수 있습니다. Railing을 제거하면 직선 scroll도 jittery해지므로 free panning을 위해 설계한 canvas와 surface에만 적합합니다.