CSS @scope — Safari 18.4에서만 가끔 작동 안 함

Safari 18.4의 @scope specificity 계산 버그입니다. WebKit bug 254812(추정), 18.5에서 패치됩니다.

현상

Safari 18.4는 @scope 안의 selector specificity를 외부 일반 selector보다 낮게 계산. 일반 스타일이 우선 적용되어 @scope 의도가 무시.

우회 1 — :where() 안 쓰기

Safari 18.4가 :where() 안의 @scope selector specificity 0으로 계산. :where() 없이:

/* ❌ Safari 18.4 깨짐 */
@scope (.card) {
  :where(h2) { color: red; }
}

/* ✅ Safari 18.4 OK */
@scope (.card) {
  h2 { color: red; }
}

우회 2 — 일반 selector + :scope

.card :scope h2 { color: red; }
/* Safari 18.4도 OK, specificity 명확 */

우회 3 — 전체 fallback CSS

.card h2 { color: red; }
.card-actions h2 { color: revert; }  /* 명시적 reset */

@supports (display: -webkit-line-clamp: 1) and (font-variant-emoji: text) {
  /* Safari 18.5+ feature detection 가능시 @scope 사용 */
}

우회 4 — Safari 18.4 UA로 별도 CSS 분기

if (/Version\/18\.4/.test(navigator.userAgent)) {
  document.documentElement.classList.add('safari-18-4')
}

/* CSS */
.safari-18-4 .card h2 { color: red; }  /* fallback */

저는 우회 2 추천

specificity 명확 + 모든 브라우저 호환. @scope의 lower limit 같은 고급 기능 안 쓰는 경우 충분.

Safari 18.5 (예상 7월 출시)에서 패치되면 다시 @scope으로 복귀.

Safari 18.x는 CSS 새 기능에서 미세 회귀 자주 일어나요. CSS new feature는 6개월 정도 production 미루는 게 안전.