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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-interop-2026	Interop 2026	10_Wiki/Topics	verified	self	Interop Project 2026 Web Interop 2026 web-platform-tests Interop	none	A	0.9	applied	web-standards browser css javascript wpt interop		2026-05-10	pending	language framework javascript 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)

.tooltip {
  position: absolute;
  position-anchor: --target;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}
.target { anchor-name: --target; }

2. View Transitions (cross-document)

<!-- both pages opt-in -->
<meta name="view-transition" content="same-origin">

@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

@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

<button commandfor="menu" command="toggle-popover">Menu</button>
<div id="menu" popover>...</div>

5. Container style queries

.card { container-name: card; container-type: inline-size; }
@container card style(--theme: dark) {
  .title { color: white; }
}

6. URL Pattern API (라우팅)

const route = new URLPattern({ pathname: '/users/:id' });
const match = route.exec(request.url);
if (match) console.log(match.pathname.groups.id);

7. WebGPU compute (간단)

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)

// 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)

<my-card>
  <template shadowrootmode="open">
    <style>:host { display: block; padding: 1rem; }</style>
    <slot></slot>
  </template>
  Hello
</my-card>

10. Feature detection + Interop matrix lookup

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 + 코드 패턴