Safari STP 246: CSS 이미지-컬러 엔진 확장 및 pseudo-element attr() 지원

Safari Technology Preview 246 widens color, images and attr()

Leo2026년 6월 23일4분intermediate

AI 요약

Context

기존 CSS 명세는 이미지 값의 테마 전환을 위해 @media (prefers-color-scheme) 블록을 반복 작성해야 하는 구조적 번거로움 존재. 또한 pseudo-element 내 attr() 함수가 타겟 요소의 데이터만 참조 가능하여 상위 요소의 데이터를 동적으로 바인딩하는 패턴 구현에 한계가 있었음.

Technical Solution

light-dark() 함수를 값 타입으로 확장하여 테마별 이미지 교체 로직을 단일 선언으로 통합
image() 함수 도입을 통해 1x1 data URI나 linear-gradient를 활용한 색상 플레이스홀더 구현 방식 대체
alpha() 상대 색상 함수 및 다중 색상 지원 color-mix() 도입으로 색상 계산 엔진의 유연성 확보
pseudo-element(::before, ::after)의 attr() 참조 범위를 확장하여 originating element의 데이터 조회 가능하도록 설계 변경
word-break: auto-phrase 및 font-variant-emoji 옵션을 엔진 내부 preview 단계에서 활성화하여 렌더링 정밀도 검증

실천 포인트

- light-dark(<image>, <image>) 도입 시 @supports 쿼리를 통한 브라우저 호환성 검증 필요 - pseudo-element 내 데이터 바인딩 시 Custom Property 대신 확장된 attr() 활용 가능성 검토 - 동적 노드 삽입 후 .focus() 호출 시 VoiceOver 포커스 전이 정상 작동 여부 확인

태그

#Pseudo-elements #Web accessibility #Web Rendering #CSS Engine #Safari Technology Preview

원문 읽기