2nd/10_Wiki/Topics/AI_and_ML/Baseline Project.md

---
id: wiki-2026-0508-baseline-project
title: Baseline (Web Platform Features)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Baseline, Baseline Web, widely available browser APIs, web platform compatibility, Web.dev]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
verification_status: applied
tags: [web, browser, web-platform, baseline, compatibility, web-performance, polyfill, progressive-enhancement]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: web standards
  framework: 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)
```js
// 매 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
```js
// .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)
```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
```js
// 매 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
```js
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)
```markdown
# Container Queries

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

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

### CI check
```yaml
# .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 |