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

Question

CSS @scope를 컴포넌트 격리에 사용. Chrome·Firefox·Edge는 정상인데 Safari 18.4에서만 일부 페이지에서 작동 안 합니다. @scope (.card) to (.card-actions) { h2 { color: red; } p { margin: 16px 0; } } Safari 18.4 — h2 color 무시. p margin은 적용. specificity 계산이 다른가? Safari 17.x는 @scope 자체 미지원이라 적용 안 됐는데, 18.4는 지원하면서 부분 작동.

김영삼 · Accepted Answer

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 명

프론트수진 · Answer

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

css_dev · Answer

Safari 18.5 베타에서 패치 확인됐어요. 7월 GA까지 우회 코드로 버틴 후 제거 권장.

댓글 0