2026년 4월은 CSS 브라우저 상호 운용성에서 획기적인 달이었습니다. Chrome 147은 비직사각형 테두리를 위한 border-shape와 element.startViewTransition()을 통한 요소 범위 view transition을 출시했습니다. Firefox 150은… 개발자가 바로 활용할 수 있도록 정리했습니다.
calendar_todaysummarize2026년 17주차
article
태그: 플랫폼읽기_시간: 3분
2026년 4월 웹 플랫폼의 새로운 기능
Chrome 147과 Firefox 150이 2026년 4월 주요 기능을 대거 출시했습니다. CSS contrast-color() 함수가 Baseline에 편입되어 주어진 색상에 대해 가장 높은 대비를 제공하는 검정 또는 흰색을 자동으로 반환합니다. Firefox 150은 animation-range-start, animation-range-end, animation-range 단축 속성을 추가하여 스크롤 기반 애니메이션 범위 제어가 모든 주요 엔진에서 완성되었습니다. Chrome 147은 비직사각형 테두리를 위한 border-shape 속성과 element.startViewTransition()을 통한 요소 범위 view transition을 도입합니다. 베타 버전에서는 Chrome 148의 이름 기반 컨테이너 쿼리, Firefox 151의 컨테이너 스타일 쿼리, Safari 26.5의 :open 가상 클래스 지원을 미리 볼 수 있습니다.
이 글은 JavaScript 없이 순수 CSS scroll-driven 애니메이션으로 가변 폰트를 구동하는 방법을 다룹니다. wght, letter-spacing 같은 font-variation-settings 축을 animation-timeline과 @keyframes로 제어합니다. 핵심 통찰은 overflow: hidden이 스크롤 컨테이너를 생성해 타임라인 해석을 깨뜨리는 반면, overflow: clip은 동일한 시각적 클리핑을 제공하면서 이 부작용이 없다는 점입니다. 전체 범위 전환을 위한 view-timeline-name과 animation-range: contain을 활용한 sticky wrapper 패턴, 그리고 각 단어에 3% 오버랩animation-range 슬라이스를 부여하는 staggered weight-lens 효과 두 가지 패턴을 소개합니다. 브라우저 지원은 animation-timeline과 view-timeline-name을 위해 Safari 18 이상이 필요합니다.
CSS Property Type Validator, 실제 CSS 워크플로에 한층 가까워지다
CSS Property Type Validator 프로젝트에 실용적인 사용에 한층 가까워지는 세 가지 개선이 추가되었습니다. 첫째, CSS Properties and Values API 명세에 따라 필수 디스크립터, 유효한 syntax 값, initial-value 호환성, 계산 독립성을 강제하는 더 엄격한 @property 유효성 검사입니다. 둘째, 이제 로컬 무조건부 @import 규칙을 따라 여러 파일에 분산된 @property 등록을 발견할 수 있어 토큰 기반 코드베이스 구조와 일치합니다. 셋째, 새로운 --registry-only CLI 모드로 @property 규칙을 독립적으로 검증할 수 있어 CI에서 디자인 토큰 패키지 검사에 유용합니다. 이 도구는 파싱에 css-tree를 사용하고 var() fallback 브랜치를 소비 속성 타입에 대해 검증합니다.
Jared White는 명령형 script 태그 안티패턴에 대비해 두 가지 선언적 요소 향상 방식을 비교합니다. 첫 번째 패러다임은 Hotwired Stimulus 컨트롤러와 유사하게 MutationObserver가 magic 속성을 감시하는 방식으로, 아직 구현되지 않은 custom attributes API 제안에 해당합니다. 두 번째는 HTML web components를 composition 래퍼로 사용하는 방식입니다. validation-enhancer, form-saver 같은 커스텀 요소를 표준 form 요소 주위에 레이어링해 요소를 서브클래싱하지 않고 동작을 추가합니다. 이 글은 is= 속성이 WebKit에서 거부된 이유도 재고합니다. 단일 상속이 다중 향상을 불가능하게 하고 내장 요소 구현에 취약한 결합을 만든다는 점을 논거로 제시합니다.
Safari Technology Preview 242는 두 가지 주요 CSS 추가 사항을 제공합니다. CSS Values Level 5의 attr() 함수 지원과 CSS Fonts Level 4의 font-synthesis-style에 oblique-only 값 지원입니다. 버그 수정으로는 position-try-order의 논리적 축 해석이 자체 writing-mode 대신 포함 블록의 writing-mode를 사용하도록 수정되었고, readonly 속성 변경 시 :in-range 및 :out-of-range 가상 클래스가 업데이트되지 않는 문제와 view-timeline-inset 직렬화에서 동일한 값이 병합되지 않는 문제가 해결되었습니다. sticky 위치 요소의 자식에 앵커된 요소의 anchor positioning 문제도 수정되었습니다.
Kevin Powell는 media query 중단점을 container query와 ch 단위로 교체하면 임의적이지 않은 콘텐츠 중심의 중단점을 만들 수 있음을 시연합니다. rem으로 설정된 media query는 selectors 내부의 font-size 변경을 무시합니다. media query가 전역 스코프에서 동작하기 때문입니다. @container와 container-type: inline-size로 전환하면 브라우저가 상속된 font-size를 포함한 요소의 실제 계산된 크기를 관찰할 수 있습니다. rem 값을 90ch로 교체하면 컨테이너가 약 90자 너비에 도달할 때 중단점이 발동되는데, 이는 열당 약 30자에 해당하며 매직 픽셀 값이 아닌 타이포그래피적으로 근거 있는 임계값입니다.
Chrome 147과 Firefox 150이 2026년 4월 주요 기능을 대거 출시했습니다. CSS contrast-color() 함수가 Baseline에 편입되어 주어진 색상에 대해 가장 높은 대비를 제공하는 검정 또는 흰색을 자동으로 반환합니다. Firefox 150은 animation-range-start, animation-range-end, animation-range 단축 속성을 추가하여 스크롤 기반 애니메이션 범위 제어가 모든 주요 엔진에서 완성되었습니다. Chrome 147은 비직사각형 테두리를 위한 border-shape 속성과 element.startViewTransition()을 통한 요소 범위 view transition을 도입합니다. 베타 버전에서는 Chrome 148의 이름 기반 컨테이너 쿼리, Firefox 151의 컨테이너 스타일 쿼리, Safari 26.5의 :open 가상 클래스 지원을 미리 볼 수 있습니다.
Kevin Powell는 media query 중단점을 container query와 ch 단위로 교체하면 임의적이지 않은 콘텐츠 중심의 중단점을 만들 수 있음을 시연합니다. rem으로 설정된 media query는 selectors 내부의 font-size 변경을 무시합니다. media query가 전역 스코프에서 동작하기 때문입니다. @container와 container-type: inline-size로 전환하면 브라우저가 상속된 font-size를 포함한 요소의 실제 계산된 크기를 관찰할 수 있습니다. rem 값을 90ch로 교체하면 컨테이너가 약 90자 너비에 도달할 때 중단점이 발동되는데, 이는 열당 약 30자에 해당하며 매직 픽셀 값이 아닌 타이포그래피적으로 근거 있는 임계값입니다.
이 글은 JavaScript 없이 순수 CSS scroll-driven 애니메이션으로 가변 폰트를 구동하는 방법을 다룹니다. wght, letter-spacing 같은 font-variation-settings 축을 animation-timeline과 @keyframes로 제어합니다. 핵심 통찰은 overflow: hidden이 스크롤 컨테이너를 생성해 타임라인 해석을 깨뜨리는 반면, overflow: clip은 동일한 시각적 클리핑을 제공하면서 이 부작용이 없다는 점입니다. 전체 범위 전환을 위한 view-timeline-name과 animation-range: contain을 활용한 sticky wrapper 패턴, 그리고 각 단어에 3% 오버랩animation-range 슬라이스를 부여하는 staggered weight-lens 효과 두 가지 패턴을 소개합니다. 브라우저 지원은 animation-timeline과 view-timeline-name을 위해 Safari 18 이상이 필요합니다.
CSS Property Type Validator, 실제 CSS 워크플로에 한층 가까워지다
CSS Property Type Validator 프로젝트에 실용적인 사용에 한층 가까워지는 세 가지 개선이 추가되었습니다. 첫째, CSS Properties and Values API 명세에 따라 필수 디스크립터, 유효한 syntax 값, initial-value 호환성, 계산 독립성을 강제하는 더 엄격한 @property 유효성 검사입니다. 둘째, 이제 로컬 무조건부 @import 규칙을 따라 여러 파일에 분산된 @property 등록을 발견할 수 있어 토큰 기반 코드베이스 구조와 일치합니다. 셋째, 새로운 --registry-only CLI 모드로 @property 규칙을 독립적으로 검증할 수 있어 CI에서 디자인 토큰 패키지 검사에 유용합니다. 이 도구는 파싱에 css-tree를 사용하고 var() fallback 브랜치를 소비 속성 타입에 대해 검증합니다.
Jared White는 명령형 script 태그 안티패턴에 대비해 두 가지 선언적 요소 향상 방식을 비교합니다. 첫 번째 패러다임은 Hotwired Stimulus 컨트롤러와 유사하게 MutationObserver가 magic 속성을 감시하는 방식으로, 아직 구현되지 않은 custom attributes API 제안에 해당합니다. 두 번째는 HTML web components를 composition 래퍼로 사용하는 방식입니다. validation-enhancer, form-saver 같은 커스텀 요소를 표준 form 요소 주위에 레이어링해 요소를 서브클래싱하지 않고 동작을 추가합니다. 이 글은 is= 속성이 WebKit에서 거부된 이유도 재고합니다. 단일 상속이 다중 향상을 불가능하게 하고 내장 요소 구현에 취약한 결합을 만든다는 점을 논거로 제시합니다.
Safari Technology Preview 242는 두 가지 주요 CSS 추가 사항을 제공합니다. CSS Values Level 5의 attr() 함수 지원과 CSS Fonts Level 4의 font-synthesis-style에 oblique-only 값 지원입니다. 버그 수정으로는 position-try-order의 논리적 축 해석이 자체 writing-mode 대신 포함 블록의 writing-mode를 사용하도록 수정되었고, readonly 속성 변경 시 :in-range 및 :out-of-range 가상 클래스가 업데이트되지 않는 문제와 view-timeline-inset 직렬화에서 동일한 값이 병합되지 않는 문제가 해결되었습니다. sticky 위치 요소의 자식에 앵커된 요소의 anchor positioning 문제도 수정되었습니다.
2026년 4월은 CSS 브라우저 상호 운용성에서 획기적인 달이었습니다. Chrome 147은 비직사각형 테두리를 위한 border-shape와 element.startViewTransition()을 통한 요소 범위 view transition을 출시했습니다. Firefox 150은 animation-range-start, animation-range-end, animation-range 단축 속성으로 크로스 엔진 스크롤 기반 애니메이션 범위 제어를 완성했습니다. CSS contrast-color() 함수가 Baseline에 편입되었습니다. Chrome 148은 이름 기반 컨테이너 쿼리, Firefox 151은 컨테이너 스타일 쿼리, Safari 26.5는 :open 가상 클래스 지원을 미리보기로 제공합니다.
Safari Technology Preview 242는 CSS Values Level 5attr() 함수 지원과 font-synthesis-styleoblique-only를 추가하고, sticky 위치 요소 자식에 앵커된 요소의 anchor positioning 버그, view-timeline-inset 직렬화, readonly 속성 변경 시 :in-range/:out-of-range 가상 클래스 문제를 수정했습니다. 애니메이션 측면에서는 animation-timeline을 사용하는 CSS scroll-driven 애니메이션만으로 가변 폰트 축(wght, letter-spacing)을 구동하는 방법이 상세히 소개되었으며, scroll-container timeline 해석을 깨뜨리지 않으려면 overflow: hidden 대신 overflow: clip을 사용해야 한다는 점이 중요하게 다루어졌습니다.
Kevin Powell은 media query의 매직 픽셀 중단점을 container query와 ch 단위로 대체하여 콘텐츠 중심의 타이포그래피적 중단점을 만드는 방법을 시연했습니다(90ch는 열당 약 30자에서 발동). CSS Property Type Validator는 더 엄격한 @property 검증, 디자인 토큰 코드베이스를 위한 크로스 파일 @import 추적, --registry-only CI 모드를 추가했습니다.
핵심 요점
Firefox 150이 animation-range-start/end로 크로스 엔진 스크롤 기반 애니메이션 범위 제어를 완성하고, Chrome 147이 border-shape와 스코프 범위 element.startViewTransition()을 출시하여 CSS 기준 지원 범위가 크게 확대되었습니다.
scroll-driven 애니메이션과 가변 폰트를 함께 사용할 때는 overflow: hidden 대신 overflow: clip을 사용하세요. overflow: hidden은 animation-timeline 해석을 조용히 깨뜨리는 스크롤 컨테이너를 생성합니다.
rem 기반 media query 중단점을 container query와 ch 단위로 교체하면 임의적인 픽셀 값 대신 콘텐츠 중심의 타이포그래피적 임계값을 만들 수 있습니다.
