--- id: wiki-2026-0508-interop-2025 title: Interop 2025 category: 10_Wiki/Topics status: verified canonical_id: self aliases: [Web Interop 2025] duplicate_of: none source_trust_level: A confidence_score: 0.9 verification_status: applied tags: [web-platform, browser, standards] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: HTML/CSS/JavaScript framework: Web Platform --- # Interop 2025 ## 매 한 줄 > **"매 browser vendor 들이 매년 합의하여 fix 하는 web platform inconsistency list"**. Apple, Google, Microsoft, Mozilla, Bocoup, Igalia 가 공동으로 select 한 focus area 를 1년간 implement, web-platform-tests pass rate 의 dashboard 로 progress 의 track. 2025 cycle 의 anchor positioning, scrollbar styling, navigation API, View Transitions cross-document, storage access API 가 highlight. ## 매 핵심 ### 매 origin & process - 2021 Compat 2021 시작, 2022 부터 "Interop" 명칭. - 매년 vendor 공동 선정 + community proposal. - WPT (web-platform-tests) score 로 measure — wpt.fyi dashboard. ### 매 Interop 2025 의 focus areas - **Anchor positioning** (CSS): tooltip/popover 의 declarative anchor. - **View Transitions cross-document**: MPA 도 SPA 같은 transition. - **Scrollbar gutter / colors**: scrollbar styling cross-browser. - **Navigation API**: history API replacement. - **Storage Access API**: cross-site cookie consent flow. - **Container queries** (residual gaps). - **Custom highlights API**: native highlight rendering. ### 매 응용 1. Web feature 의 production-safe baseline 결정 (Baseline initiative 와 align). 2. Polyfill / progressive enhancement strategy 의 기준. 3. Browser team 의 quarterly priority. ## 💻 패턴 ### Anchor positioning (CSS) ```css /* Trigger */ .btn { anchor-name: --my-anchor; } /* Popover positioned relative to anchor */ .tooltip { position: absolute; position-anchor: --my-anchor; top: anchor(bottom); left: anchor(center); translate: -50% 8px; } ``` ### View Transitions cross-document ```html ``` ### Navigation API ```javascript navigation.addEventListener('navigate', (e) => { if (!e.canIntercept || e.hashChange) return e.intercept({ handler: async () => { const data = await fetch(e.destination.url).then(r => r.json()) render(data) }, }) }) ``` ### Storage Access API ```javascript // inside iframe — request 1P-like cookie access if (await document.hasStorageAccess() === false) { try { await document.requestStorageAccess() } catch (e) { /* user denied */ } } ``` ### Scrollbar styling (modern) ```css .list { scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; } ``` ### Feature detect via Baseline / `@supports` ```css @supports (anchor-name: --x) { .tooltip { position-anchor: --my-anchor; } } @supports not (anchor-name: --x) { .tooltip { /* fallback positioning JS */ } } ``` ## 매 결정 기준 | 상황 | Approach | |---|---| | New feature production use | Interop 2025 list + Baseline check | | 필요한 feature 가 still red | polyfill or feature flag | | Cross-browser bug found | wpt.fyi 에 issue file | | Greenfield SPA | Navigation API 채택 검토 | | Tooltip / popover | Anchor positioning + popover API | **기본값**: 매 Baseline Newly Available + Interop 2025 통과 feature 만 의 default 사용. ## 🔗 Graph - 변형: [[Interop 2026]] - 응용: [[View Transitions API]] · [[Navigation API]] - Adjacent: [[Chromium]] · [[Baseline]] ## 🤖 LLM 활용 **언제**: 매 web platform feature 의 cross-browser readiness 의 query, polyfill strategy, modern CSS/JS adoption 결정. **언제 X**: server-side, native, non-browser runtime. ## ❌ 안티패턴 - **Single-vendor preview 의 production**: Chrome canary 만 의 working ≠ ship-ready. - **WPT pass = bug-free 의 가정**: real-world edge case 는 WPT 가 다 cover X. - **Polyfill 의 무지성 적용**: native 가 ship 된 후에도 polyfill 유지 = bundle bloat. - **Interop list 의 구속**: list 외 의 feature 도 needed 면 채택 가능 — list 는 priority 일 뿐. ## 🧪 검증 / 중복 - Verified (web.dev/interop-2025, wpt.fyi/interop-2025, vendor blog posts 2025). - 신뢰도 A. ## 🕓 Changelog | 날짜 | 변경 | |---|---| | 2026-05-08 | Phase 1 | | 2026-05-10 | Manual cleanup — Interop 2025 focus areas + adoption patterns |