Research Hub

Appearance

Frontend Development: Изменения 2018–2022 ​

🎯 Начните отсюда ​

Для быстрого старта откройте final-report.md — комплексный обзор всего периода с executive summary, timeline, insights и roadmap для изучения.

📚 Структура исследования ​

Основные документы (knowledge/) ​

ФайлОписаниеРазмер
final-report.md🌟 НАЧАТЬ ЗДЕСЬ — Executive summary, timeline, insights, roadmap~30 KB
browser-timeline.mdTimeline релизов браузеров 2018–2022, baseline методология20 KB
html.mdДетальный обзор HTML изменений с примерами кода36 KB
css.mdComprehensive CSS изменения с практическими примерами28 KB
javascript.mdКлючевые JavaScript (ES2018–ES2022) и Web APIs изменения~20 KB
scope.mdГраницы исследования, критерии, методология12 KB

Всего: ~146 KB детальных материалов

🔍 Quick Reference ​

Ключевые baseline достижения по годам ​

2018:

  • CSS Flexbox gap в Firefox
  • Overscroll-behavior

2019:

  • Optional chaining в TC39 Stage 3
  • prefers-color-scheme

2020:

  • ES2020: optional chaining (?.), nullish coalescing (??)
  • clamp(), min(), max()
  • prefers-reduced-motion
  • Resize Observer

2021:

  • Flexbox gap baseline (апрель)
  • aspect-ratio baseline (сентябрь)
  • :is(), :where() baseline

2022:

  • <dialog> baseline (март)
  • :focus-visible baseline (март)
  • :has() появился (baseline 2023)
  • Container Queries появились (baseline 2023)

Браузерные релизы ​

  • Chrome: 45 релизов (64 → 108)
  • Firefox: 50 релизов (58 → 107)
  • Safari: 10 мажорных релизов (11.1 → 16)
  • Edge: 32 Chromium релиза (79 → 108)

📖 Рекомендованный порядок чтения ​

  1. final-report.md — начните здесь для полной картины
  2. scope.md — поймите границы и методологию
  3. browser-timeline.md — контекст релизов и baseline
  4. Затем углубляйтесь в интересующие технологии:
    • html.md — если интересует HTML
    • css.md — если интересует CSS
    • javascript.md — если интересует JS/APIs

💡 Ключевые insights ​

Технологические прорывы ​

  • HTML: <dialog>, native lazy loading, улучшенные формы
  • CSS: Layout революция (Flexbox gap, aspect-ratio), математические функции, modern селекторы
  • JavaScript: ES2020 (optional chaining, nullish coalescing), ES2022 (top-level await)

Институциональные изменения ​

  • Май 2019: W3C передал HTML/DOM управление WHATWG
  • Январь 2020: Edge мигрировал на Chromium
  • 2021: Chrome и Firefox перешли на 4-недельные релизные циклы

Safari как bottleneck ​

Множество фич достигло baseline только после поддержки Safari: Flexbox gap (2021), aspect-ratio (2021), <dialog> (2022), :focus-visible (2022).

🛠 Практическое применение ​

Что использовать сегодня (100% safe) ​

html
<dialog id="modal">...</dialog>
<img src="image.jpg" loading="lazy" />
<input type="text" inputmode="decimal" enterkeyhint="next" />
css
.container {
    display: flex;
    gap: 1rem;
}

.item {
    aspect-ratio: 16 / 9;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

:focus-visible {
    outline: 2px solid blue;
}
javascript
const value = data?.deeply?.nested ?? 'default';

const controller = new AbortController();
fetch('/api', { signal: controller.signal });

Progressive enhancement для новых фич ​

css
@supports (container-type: inline-size) {
    .container {
        container-type: inline-size;
    }
}

@supports selector(:has(*)) {
    .card:has(img) {
        grid-template-columns: 200px 1fr;
    }
}

📊 Статистика исследования ​

  • Источников проанализировано: 50+
  • Web searches выполнено: 20+
  • Браузерных релизов изучено: 145+
  • Baseline фич задокументировано: ~60
  • Примеров кода: 100+
  • Диаграмм Mermaid: 2

🔗 Внешние ресурсы ​

Первичные источники ​

Compatibility данные ​

Обучающие ресурсы ​

📝 Feedback и вопросы ​

Если у вас есть вопросы по материалам исследования или вы нашли неточности, обратитесь к автору исследования.

  • Research ID: frontend-baseline-2018-2022
  • Дата создания: 17.11.2025
  • Методология: DeepResearch Agent
  • Версия: 1.0