2nd/10_Wiki/Topics/Domain_Programming/AI_and_ML/Baseline Project.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-baseline-project	Baseline (Web Platform Features)	10_Wiki/Topics	verified	self	Baseline Baseline Web widely available browser APIs web platform compatibility Web.dev	none	A	0.92	applied	web browser web-platform baseline compatibility web-performance polyfill progressive-enhancement		2026-05-10	pending	language framework web standards Browser APIs / Web Platform

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.

매 적용

1. Confidence to ship: 매 polyfill 의 drop.
2. Documentation: 매 MDN 의 badge.
3. Linter: 매 ESLint plugin.
4. Bundler: 매 transpile target.
5. 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