CSS @supports 구문의 컨텍스트 무시로 인한 렌더링 불일치 분석

@supports Lies: When CSS Says 'Yes' but Browsers Say 'LOL No'

Alvaro Montoro2026년 5월 9일2분intermediate

AI 요약

Context

CSS 명세와 달리 브라우저가 선택자 내부에 중첩된 @supports 구문을 허용하며 발생하는 파싱 모호성 존재. @supports가 특정 Selector나 Pseudo-element의 컨텍스트가 아닌 General Validity만 체크함에 따라 실제 렌더링 결과와 조건문의 판단 결과가 상충하는 한계 노출.

Technical Solution

@supports 구문을 Root level이 아닌 Selector 내부에 배치하여 시각적 중첩 구조 형성
Feature Check 시 특정 Context의 지원 여부가 아닌 Syntax 인식 여부만 판단하는 브라우저 엔진의 메커니즘 확인
Safari 브라우저의 ::marker 내 content 속성 미지원 사례를 통한 Context-aware 검증의 필요성 도출
단순 Syntax Check를 넘어 Selector와 Declaration의 조합을 검증하는 신규 Operator 또는 Function 도입 제안
Container Queries 및 Style Queries를 통한 우회 시도 및 Custom Properties 기반의 제한적 검증 가능성 검토

실천 포인트

- @supports 구문 사용 시 브라우저가 해당 속성을 '일반적으로' 지원하는지와 '특정 컨텍스트에서' 지원하는지가 다를 수 있음을 인지할 것 - Critical Path의 UI 구현 시 @supports에만 의존하지 말고 실제 브라우저 렌더링 결과에 기반한 Cross-browser Testing 수행 - 복잡한 조건부 스타일링 필요 시 @supports의 한계를 고려하여 Fallback 전략 수립

태그

#Pseudo-element #CSS Specification #@supports #Browser Parsing #Rendering Context

원문 읽기