Interop 2026 출범 – Mozilla Hacks — 2026년 7주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 7-2026
article
Interop 2026 출범 – Mozilla Hacks
TAG: 릴리스
Interop 2026이 150개 이상의 제안서 중 20개 focus area를 선정하며 공식 출범했습니다. 2025년에는 전체 점수가 25에서 95로 급상승하며 Same-Document View Transitions, CSS Anchor Positioning 등이 cross-browser로 안착했습니다. 2026년 신규 CSS 항목으로는 scroll-driven animations, CSS container style queries, pseudo-element 외부로 확장된 CSS attr(), ::highlight() pseudo-element를 활용한 CSS custom highlights, 그리고 반응형 clip-path를 위한 CSS shape() 등이 포함됩니다. CSS scroll snap, anchor positioning, user-select, zoom의 신뢰성 개선 작업도 계속되며, accessibility 트리, 모바일 viewport, JPEG XL, WebVTT에 대한 조사 영역도 별도로 지정되었습니다.
READ_TIME: 7_MIN|BY: Jake Archibald Posted; Firefox; Uncategorized; Web Developers
교대 배경색을 가진 수평 overflow 테이블에 스크롤 shadow indicator를 표시하는 CSS 기법을 소개합니다. background-attachment: local 같은 기존 방식은 테이블 배경색이 shadow를 덮어버려 작동하지 않습니다. 해결책은 CSS Grid(grid-template: "leftindicator content rightindicator" auto / 30px max-content 30px)로 테이블을 감싸고, ::before/::after pseudo-element에 position: sticky와 z-index: 10을 적용하는 방식입니다. 각 pseudo-element는 linear-gradient shadow를 가지며, opacity는 animation-timeline: scroll(nearest inline)으로 opacity: 1에서 0으로 변하는 @keyframes show-indicator로 제어됩니다. ::before는 reverse 방향으로 실행하고, animation-timeline은 반드시 animation shorthand 선언 이후에 써야 리셋되지 않습니다.
Temani Afif는 height: 100%가 자주 실패하는 이유 — 부모에 명시적 height가 필요하고, 있더라도 margin, padding, box-sizing으로 인해 overflow가 발생할 수 있음 — 를 설명하고 height: stretch를 현대적 대안으로 소개합니다. height: 100%와 달리 stretch는 align-self: stretch 정렬처럼 동작하며 box-sizing에 관계없이 margin을 자동으로 반영합니다. 또한 요소에 definite height를 부여해 universal selector로 cascading stretch를 구현할 수 있습니다. 80% 같은 부분 채우기에는 calc-size() 함수를 조합합니다: height: calc-size(stretch, .8*size). 현재 browser support는 Chrome에 한정됩니다.
Mads Stoumann은 JavaScript 없이 최신 CSS 기능만으로 완전한 인터랙티브 Pantone fan-deck 컴포넌트를 구현합니다. fan spread에는 progress(100cqi, 300px, 1440px)를 사용해 container inline size를 0–1 값으로 연속적으로 매핑하고, 이를 -45°에서 +45° 회전에 적용합니다. 각 카드의 회전 각도는 DOM 내 위치를 인식하는 새 CSS 함수 sibling-index()와 sibling-count()로 계산됩니다. <details name="deck">의 exclusive accordion 패턴이 클릭-포커스를 처리하고, ::details-content pseudo-element에 content-visibility: visible을 적용해 카드 색상을 항상 렌더링합니다. :has() 기반 4개의 플래그(--has-active, --is-before, --is-active, --is-after)가 단일 회전 공식을 구동하며, 0.25s linear transition으로 자연스럽게 애니메이션됩니다. progress()의 browser support는 현재 Chrome과 Safari에 한정됩니다.
@starting-style at-rule은 2023년 말부터 cross-browser로 지원되고 있지만, Chrome DevTools에서는 2025년 11월 출시된 버전 143에서야 디버깅이 가능해졌습니다. 반면 Polypane은 2024년 6월 출시된 버전 20부터 Elements panel에서 @starting-style을 직접 표시하고 편집할 수 있습니다. 이 기능은 요소가 DOM에 추가될 때 JavaScript 없이 CSS transition의 "from" 상태를 정의할 수 있게 해줍니다. 핵심 specificity 규칙으로는, @starting-style 자체에는 specificity가 없으므로 내부 선택자가 기본 규칙과 동일한 specificity를 가져 반드시 소스 순서상 마지막에 위치해야 합니다. Polypane은 :hover, :focus와 동일한 메뉴에서 @starting-style 강제 적용 토글도 제공합니다.
CSS Animation Trigger: 스크러빙 없이 스크롤 시 애니메이션 재생. 딱 맞는 조합!
TAG: 심층 분석
Brecht De Ruyte는 현재 Chrome Canary의 실험적 플래그에서 사용 가능하고 Chrome 146에서 출시 예정인 CSS scroll-triggered animations를 심층 분석합니다. timeline-trigger 속성은 trigger 요소에 이름, view() 같은 소스, contain/cover 같은 enter/exit range를 지정하고, animation-trigger 속성은 play-forwards/play-backwards, play-once/none 등의 action 쌍으로 animation과 연결합니다. 기사는 scroll-driven 배경(animation-timeline: scroll(root))과 scroll-triggered 텍스트 reveal을 결합한 Valentine's Day scrollytelling 데모를 소개하며, Chrome의 typed attr() 구문으로 수십 개의 trigger 규칙을 단일 CSS 선언으로 줄이는 방법도 보여줍니다. @layer scrollTimeline 패턴으로 animation-range 백분율을 중앙화하는 팁도 포함됩니다.
Kevin Powell은 개인 Astro 사이트에서 JavaScript 기반 sticky nav를 순수 CSS로 교체하는 과정을 공개합니다. 핵심은 새로운 container-type: scroll-state로, 이를 통해 자식 요소가 container가 stuck, snapped, 또는 scrollable 상태인지를 쿼리할 수 있습니다. @container scroll-state(stuck: top) 규칙으로 header translate 등 nav 스타일을 적용하며, JavaScript 없이 동작합니다. position: sticky에 음수 top 오프셋(예: top: -200px)을 설정해 nav를 화면 밖에 숨기고, 사용자가 해당 지점을 스크롤하면 다시 슬라이드 인합니다. animation-range-start/animation-range-end를 픽셀 단위로 지정한 animation-timeline: scroll() fallback도 시연하며, 녹화 시점 기준 scroll-state는 71%(Chrome 전용), animation-timeline은 78%의 global support를 보였습니다.
Interop 2026이 150개 이상의 제안서 중 20개 focus area를 선정하며 공식 출범했습니다. 2025년에는 전체 점수가 25에서 95로 급상승하며 Same-Document View Transitions, CSS Anchor Positioning 등이 cross-browser로 안착했습니다. 2026년 신규 CSS 항목으로는 scroll-driven animations, CSS container style queries, pseudo-element 외부로 확장된 CSS attr(), ::highlight() pseudo-element를 활용한 CSS custom highlights, 그리고 반응형 clip-path를 위한 CSS shape() 등이 포함됩니다. CSS scroll snap, anchor positioning, user-select, zoom의 신뢰성 개선 작업도 계속되며, accessibility 트리, 모바일 viewport, JPEG XL, WebVTT에 대한 조사 영역도 별도로 지정되었습니다.
Kevin Powell은 개인 Astro 사이트에서 JavaScript 기반 sticky nav를 순수 CSS로 교체하는 과정을 공개합니다. 핵심은 새로운 container-type: scroll-state로, 이를 통해 자식 요소가 container가 stuck, snapped, 또는 scrollable 상태인지를 쿼리할 수 있습니다. @container scroll-state(stuck: top) 규칙으로 header translate 등 nav 스타일을 적용하며, JavaScript 없이 동작합니다. position: sticky에 음수 top 오프셋(예: top: -200px)을 설정해 nav를 화면 밖에 숨기고, 사용자가 해당 지점을 스크롤하면 다시 슬라이드 인합니다. animation-range-start/animation-range-end를 픽셀 단위로 지정한 animation-timeline: scroll() fallback도 시연하며, 녹화 시점 기준 scroll-state는 71%(Chrome 전용), animation-timeline은 78%의 global support를 보였습니다.
교대 배경색을 가진 수평 overflow 테이블에 스크롤 shadow indicator를 표시하는 CSS 기법을 소개합니다. background-attachment: local 같은 기존 방식은 테이블 배경색이 shadow를 덮어버려 작동하지 않습니다. 해결책은 CSS Grid(grid-template: "leftindicator content rightindicator" auto / 30px max-content 30px)로 테이블을 감싸고, ::before/::after pseudo-element에 position: sticky와 z-index: 10을 적용하는 방식입니다. 각 pseudo-element는 linear-gradient shadow를 가지며, opacity는 animation-timeline: scroll(nearest inline)으로 opacity: 1에서 0으로 변하는 @keyframes show-indicator로 제어됩니다. ::before는 reverse 방향으로 실행하고, animation-timeline은 반드시 animation shorthand 선언 이후에 써야 리셋되지 않습니다.
Temani Afif는 height: 100%가 자주 실패하는 이유 — 부모에 명시적 height가 필요하고, 있더라도 margin, padding, box-sizing으로 인해 overflow가 발생할 수 있음 — 를 설명하고 height: stretch를 현대적 대안으로 소개합니다. height: 100%와 달리 stretch는 align-self: stretch 정렬처럼 동작하며 box-sizing에 관계없이 margin을 자동으로 반영합니다. 또한 요소에 definite height를 부여해 universal selector로 cascading stretch를 구현할 수 있습니다. 80% 같은 부분 채우기에는 calc-size() 함수를 조합합니다: height: calc-size(stretch, .8*size). 현재 browser support는 Chrome에 한정됩니다.
Mads Stoumann은 JavaScript 없이 최신 CSS 기능만으로 완전한 인터랙티브 Pantone fan-deck 컴포넌트를 구현합니다. fan spread에는 progress(100cqi, 300px, 1440px)를 사용해 container inline size를 0–1 값으로 연속적으로 매핑하고, 이를 -45°에서 +45° 회전에 적용합니다. 각 카드의 회전 각도는 DOM 내 위치를 인식하는 새 CSS 함수 sibling-index()와 sibling-count()로 계산됩니다. <details name="deck">의 exclusive accordion 패턴이 클릭-포커스를 처리하고, ::details-content pseudo-element에 content-visibility: visible을 적용해 카드 색상을 항상 렌더링합니다. :has() 기반 4개의 플래그(--has-active, --is-before, --is-active, --is-after)가 단일 회전 공식을 구동하며, 0.25s linear transition으로 자연스럽게 애니메이션됩니다. progress()의 browser support는 현재 Chrome과 Safari에 한정됩니다.
@starting-style at-rule은 2023년 말부터 cross-browser로 지원되고 있지만, Chrome DevTools에서는 2025년 11월 출시된 버전 143에서야 디버깅이 가능해졌습니다. 반면 Polypane은 2024년 6월 출시된 버전 20부터 Elements panel에서 @starting-style을 직접 표시하고 편집할 수 있습니다. 이 기능은 요소가 DOM에 추가될 때 JavaScript 없이 CSS transition의 "from" 상태를 정의할 수 있게 해줍니다. 핵심 specificity 규칙으로는, @starting-style 자체에는 specificity가 없으므로 내부 선택자가 기본 규칙과 동일한 specificity를 가져 반드시 소스 순서상 마지막에 위치해야 합니다. Polypane은 :hover, :focus와 동일한 메뉴에서 @starting-style 강제 적용 토글도 제공합니다.
CSS Animation Trigger: 스크러빙 없이 스크롤 시 애니메이션 재생. 딱 맞는 조합!
Brecht De Ruyte는 현재 Chrome Canary의 실험적 플래그에서 사용 가능하고 Chrome 146에서 출시 예정인 CSS scroll-triggered animations를 심층 분석합니다. timeline-trigger 속성은 trigger 요소에 이름, view() 같은 소스, contain/cover 같은 enter/exit range를 지정하고, animation-trigger 속성은 play-forwards/play-backwards, play-once/none 등의 action 쌍으로 animation과 연결합니다. 기사는 scroll-driven 배경(animation-timeline: scroll(root))과 scroll-triggered 텍스트 reveal을 결합한 Valentine's Day scrollytelling 데모를 소개하며, Chrome의 typed attr() 구문으로 수십 개의 trigger 규칙을 단일 CSS 선언으로 줄이는 방법도 보여줍니다. @layer scrollTimeline 패턴으로 animation-range 백분율을 중앙화하는 팁도 포함됩니다.
이번 주 CSS는 크로스 브라우저 공조와 스크롤 드리븐 혁신을 중심으로 역사적인 한 주를 보냈습니다. 이번 주 대표 기사인 Interop 2026은 scroll-driven animations, container style queries, 새로운 CSS shape() 구문 등 20개의 focus area를 선정하며 출범하였습니다. 2025년 점수가 25에서 95로 급등한 성과를 기반으로, 이번 주 기술 튜토리얼이 실제로 무엇을 가능하게 하는지를 보여주는 전략적 배경이 됩니다.
세 편의 실습 중심 기사가 animation-timeline의 최전선을 밀어붙입니다. Chrome 146에서 출시 예정인 scroll-triggered animation API 심층 분석, animation-timeline: scroll(nearest inline)을 활용한 교대 배경색 테이블 스크롤 shadow indicator 기법, 그리고 Kevin Powell이 container-type: scroll-state로 구현한 순수 CSS sticky nav가 그 주인공입니다. 세 가지 모두 JavaScript 이벤트 리스너를 선언적 CSS로 대체하는 공통 목표를 향하면서 현재 Chrome 위주의 브라우저 지원 현실도 솔직하게 인정합니다.
두 편의 짧은 가이드는 오랜 CSS 사이징 고민을 해결합니다. height: 100%를 대체하는 마진 인식 속성 height: stretch와, JavaScript 없이 sibling-index(), progress() 등 최신 함수만으로 구현한 Pantone fan-deck이 이번 주 CSS가 이벤트 리스너 없이 얼마나 많은 인터랙티브 UI를 처리할 수 있는지를 보여줍니다.
Key Takeaways
Interop 2026이 scroll-driven animations와 CSS shape()를 공식 목표로 선정함에 따라, 이 기능들은 향후 12개월 내에 안정적인 크로스 브라우저 지원을 갖추게 될 것입니다.
animation-timeline: scroll()은 오늘부터 JavaScript 스크롤 리스너를 대체할 수 있지만, animation shorthand 이후에 선언하지 않으면 초기화되므로 주의하십시오.
height: stretch는 box-sizing에 관계없이 마진을 자동으로 반영하여 부모 컨테이너를 채우는 데 height: 100%보다 깔끔한 대안이지만, 현재는 Chrome에서만 지원됩니다.
