2nd/10_Wiki/Topics/AI_and_ML/Interop 2026.md

---
id: wiki-2026-0508-interop-2026
title: Interop 2026
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Interop Project 2026, Web Interop 2026, web-platform-tests Interop]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [web-standards, browser, css, javascript, wpt, interop]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: web-platform-tests
---

# Interop 2026

## 매 한 줄
> **"매 같은 코드가 모든 브라우저에서 같게 동작한다 — 그게 표준이다"**. Interop 2026 은 Apple/Google/Microsoft/Mozilla/Bocoup/Igalia 가 매년 합의하는 cross-browser 호환성 프로젝트의 6번째 사이클로, web-platform-tests 점수를 통해 약 20개 focus area 의 호환률을 공개 추적한다.

## 매 핵심

### 매 프로젝트 구조
- **Focus Areas**: 합의된 약 20 개 영역 (CSS, layout, web API 등).
- **Investigations**: 표준 자체가 부족해 우선 조사 필요한 영역.
- **WPT (web-platform-tests)**: 모든 점수의 source of truth.
- **Dashboard**: wpt.fyi/interop-2026 — 일별 점수 갱신.

### 매 2026 주요 Focus Areas (대표)
- **CSS Anchor Positioning**: tooltip/popover 의 anchor() 함수.
- **View Transitions (cross-document)**: SPA-like MPA 전환.
- **Container Queries (deeper)**: style queries, scroll-state queries.
- **Scroll-driven Animations**: animation-timeline.
- **Popover API + invokers**: command/commandfor.
- **Storage Access API + CHIPS**: third-party storage partitioning.
- **WebGPU**: compute + render pipeline 호환.
- **HDR / color-mix()**: color-gamut 확장.
- **Declarative Shadow DOM**: SSR-friendly Web Components.
- **URL Pattern API**: 라우팅 표준.

### 매 참여 벤더
- Apple (WebKit/Safari), Google (Blink/Chrome), Mozilla (Gecko/Firefox), Microsoft (Edge — Blink 기반), Bocoup, Igalia (consultancy).

### 매 응용
1. Production 코드에서 vendor prefix / polyfill 제거 시점 결정.
2. 신규 feature 도입 우선순위 (안정 영역 → 실험 영역).
3. Progressive enhancement 매트릭스 작성.
4. Browser bug 보고 우선순위.

## 💻 패턴

### 1. CSS Anchor Positioning (Interop 2026 focus)
```css
.tooltip {
  position: absolute;
  position-anchor: --target;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}
.target { anchor-name: --target; }
```

### 2. View Transitions (cross-document)
```html
<!-- both pages opt-in -->
<meta name="view-transition" content="same-origin">
```
```css
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade 0.2s both; }
::view-transition-new(root) { animation: fade 0.2s both reverse; }
```

### 3. Scroll-driven animation
```css
@keyframes reveal { from { opacity: 0 } to { opacity: 1 } }
.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
```

### 4. Popover + invoker commands
```html
<button commandfor="menu" command="toggle-popover">Menu</button>
<div id="menu" popover>...</div>
```

### 5. Container style queries
```css
.card { container-name: card; container-type: inline-size; }
@container card style(--theme: dark) {
  .title { color: white; }
}
```

### 6. URL Pattern API (라우팅)
```javascript
const route = new URLPattern({ pathname: '/users/:id' });
const match = route.exec(request.url);
if (match) console.log(match.pathname.groups.id);
```

### 7. WebGPU compute (간단)
```javascript
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const module = device.createShaderModule({ code: `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;
  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3<u32>) {
    data[id.x] = data[id.x] * 2.0;
  }
` });
```

### 8. Storage Access + CHIPS (3rd-party cookie)
```javascript
// in iframe (third-party context)
if (await document.hasStorageAccess() === false) {
  await document.requestStorageAccess();
}
// CHIPS partitioned cookie:
// Set-Cookie: sid=abc; Secure; SameSite=None; Partitioned
```

### 9. Declarative Shadow DOM (SSR)
```html
<my-card>
  <template shadowrootmode="open">
    <style>:host { display: block; padding: 1rem; }</style>
    <slot></slot>
  </template>
  Hello
</my-card>
```

### 10. Feature detection + Interop matrix lookup
```javascript
const features = {
  anchorPos: CSS.supports('position-anchor: --x'),
  viewTrans: 'startViewTransition' in document,
  popover:   HTMLElement.prototype.hasOwnProperty('popover'),
  webgpu:    'gpu' in navigator,
};
console.table(features);
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Interop 점수 ≥ 95% | Production 사용 OK, prefix 제거 |
| 80-95% | Progressive enhancement + @supports |
| < 80% | Polyfill 필수 또는 보류 |
| Investigation only | Production 금지, 실험 prototype 만 |
| Safari LTS lag | 6-12 개월 grace 필요 |

**기본값**: Interop 2026 dashboard 95% 이상이면 prefix 없이 사용, 80-95% 는 @supports gate, 그 이하는 보류.

## 🔗 Graph
- 부모: [[Web-Standards]]
- 변형: [[Interop 2025]]
- 응용: [[Progressive-Enhancement]]
- Adjacent: [[Baseline]]

## 🤖 LLM 활용
**언제**: Focus area 별 사용 가능 여부 판단, @supports 가드 코드 생성, polyfill 매핑, 호환성 보고서 초안.
**언제 X**: dashboard 실시간 점수 — wpt.fyi 직접 조회 또는 web fetch (LLM 학습 cutoff 이후).

## ❌ 안티패턴
- **점수 100% 가정**: 같은 영역 안에서도 sub-feature 별 차이 — 실제 wpt.fyi 확인.
- **Polyfill 없는 신기능 강제**: 구 브라우저 사용자 화면 깨짐.
- **Interop 통과 == 모든 환경 OK**: 모바일 WebView (구 Android) 는 별도.
- **벤더 prefix 추가**: 2026 Interop 영역은 prefix 거의 사용 안 함.
- **caniuse 만 신뢰**: WPT 실행 결과가 truth — caniuse 는 요약본.

## 🧪 검증 / 중복
- Verified (web.dev/blog/interop-2026, wpt.fyi/interop-2026 official dashboard).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Interop 2026 focus areas + 코드 패턴 |