Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

6.3 KiB

Raw Blame History

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

title

Baseline (Web Platform)

📌 한 줄 통찰

"매 widely available API 의 timeline". 매 Chrome / Edge / Firefox / Safari 의 30 개월 이상 매 support 된 feature. 매 polyfill 의 drop 의 signal. 매 modern web 의 deployment confidence 의 source.

📖 핵심

매 정의

Baseline: 매 Chrome, Edge, Firefox, Safari 의 모든 매 stable channel.
Newly available: 매 모든 4 의 latest support.
Widely available: 매 30+ 개월 의 stable.

매 source

Web Platform DX Community Group.
Google / Mozilla / Microsoft / Apple 의 collaboration.
web.dev/baseline.
caniuse.com 의 alternative.

매 적용

Confidence to ship: 매 polyfill 의 drop.
Documentation: 매 MDN 의 badge.
Linter: 매 ESLint plugin.
Bundler: 매 transpile target.
Code review: 매 feature 의 risk check.

매 timeline (2025-2027 selected)

Year	Newly Available
2025	Container Queries, CompressionStream, MathML
2025 Sep	resource size / server timing API
2026 Jul	AVIF image format
2027 Apr	`fetchpriority` attribute

→ 매 specific 의 baseline website 의 verify.

매 modern features (Baseline)

CSS: 매 Container Queries, 매 :has(), 매 nesting, 매 subgrid, 매 cascade layers.
JS: 매 top-level await, 매 dynamic import, 매 Array.at(), 매 Object.hasOwn().
DOM: 매 popover API, 매 dialog element.
Image: 매 AVIF, 매 lazy loading.
Performance: 매 fetch priority, 매 resource hint.

매 vs polyfill

Polyfill: 매 cost (JS payload).
Baseline: 매 native, 매 fast.
Trade-off: 매 user 의 device 의 다양성.

매 progressive enhancement

매 baseline 의 기준.
매 newer feature 의 enhancement.
매 older 의 graceful fallback.

매 ESLint integration

eslint-plugin-compat: 매 unsupported feature 의 warn.
@eslint/baseline-plugin: 매 newly-available 의 warn.

매 비판 / limitation

매 30 개월 의 conservative.
매 enterprise (IE11 era) 의 더 보수.
매 mobile (Samsung Internet) 의 X.
매 specific browser variant 의 X.

💻 패턴

Baseline check (programmatic)

// 매 web-features package
import { features } from 'web-features';

const containerQueries = features['container-queries'];
console.log(containerQueries.status.baseline);  // 'high' / 'low' / false
console.log(containerQueries.status.baseline_high_date);  // '2025-02-14'

ESLint config

// .eslintrc.cjs
module.exports = {
  plugins: ['compat'],
  rules: {
    'compat/compat': 'error',
  },
  settings: {
    browsers: ['baseline'],  // 매 widely available 만
  },
};

Browserslist (bundler target)

# .browserslistrc
> 0.5%
last 2 versions
not dead
# 매 baseline-aligned

Progressive enhancement (CSS)

/* 매 fallback */
.card {
  width: 100%;
}

/* 매 baseline (Container Queries) */
@container (min-width: 600px) {
  .card { width: 50%; }
}

/* 매 newly-available */
@supports (selector(:has(*))) {
  .card:has(.featured) { background: gold; }
}

Feature detection

// 매 Object.hasOwn (baseline 2025)
if (typeof Object.hasOwn === 'function') {
  Object.hasOwn(obj, 'key');
} else {
  Object.prototype.hasOwnProperty.call(obj, 'key');
}

// 매 popover API
if (HTMLElement.prototype.hasOwnProperty('popover')) {
  el.popover = 'auto';
} else {
  // 매 fallback dialog
}

web-features API integration

import { features, browsers } from 'web-features';

function isBaselineWidely(featureId) {
  const f = features[featureId];
  if (!f) return false;
  return f.status.baseline === 'high';
}

// 매 build script 의 audit
const used = ['container-queries', 'has-pseudo', 'view-transitions'];
for (const f of used) {
  if (!isBaselineWidely(f)) {
    console.warn(`${f} is not widely available — needs polyfill or fallback`);
  }
}

MDN Baseline badge (markdown)

# Container Queries

[Baseline: widely available since 2025-02-14]

CSS Container Queries allow elements to respond to their container's size...

CI check

# .github/workflows/baseline-check.yml
- name: Check baseline compatibility
  run: |
    npx @web-platform-dx/web-features --check src/ \
      --target=widely-available

🤔 결정 기준

상황	Decision
New feature in code	Baseline widely → ship
Newly available	Polyfill or fallback
Not baseline	Polyfill required
Enterprise / legacy	More conservative target
Mobile-first	Check Samsung Internet
Performance-critical	Native (baseline) > polyfill

기본값: Baseline widely available + 매 progressive enhancement.

🔗 Graph

부모: Web-Performance
변형: Progressive-Enhancement
응용: Container-Queries · View-Transitions · AVIF

🤖 LLM 활용

언제: 매 web feature 의 ship decision. 매 polyfill drop. 매 build target 결정. 언제 X: 매 enterprise (IE11) 의 conservative. 매 specific niche browser.

❌ 안티패턴

Bleeding-edge feature 의 production 의 지원 무시: 매 user 의 break.
Polyfill 의 무한 retain: 매 baseline 의 reached 후 도 keep.
No fallback (newly-available): 매 older browser 의 broken.
@supports 의 missing: 매 cascade 의 unpredictable.
Browserslist 의 old default: 매 polyfill bloat.

🧪 검증 / 중복

Verified (web.dev/baseline, web-features npm).
신뢰도 A.
Related: Browser-Compatibility · Polyfill · Progressive-Enhancement · Web-Performance.

🕓 Changelog

날짜	변경
2026-04-19	Auto-mapped
2026-05-08	Phase 1
2026-05-10	Manual cleanup — definition + timeline + 매 ESLint / Browserslist / web-features code

6.3 KiB Raw Blame History