Progressive Enhancement: базовый контент и расширенные функции

Что такое Progressive Enhancement?

Progressive enhancement — это подход в веб-разработке, который начинается с 'худшего случая' (наименее способного браузера) и улучшает опыт с помощью поддерживаемых функций.

Основной принцип: контент и базовая функциональность должны всегда работать. JavaScript, CSS и расширенные возможности HTML улучшают опыт, но не обязательны.

Противоположность graceful degradation: graceful degradation начинается с лучшего опыта и деградирует в средах с низкими возможностями. Progressive enhancement начинается с базового опыта и улучшает.

Преимущества: более широкий доступ пользователей, лучшая производительность, лучший SEO, лучшая доступность.

Основные слои

HTML (контент): базовый контент и структура с семантическим HTML. Читаемый и используемый без JavaScript.

CSS (представление): базовые стили работают во всех браузерах. Расширенные CSS-функции применяются условно с помощью @supports.

JavaScript (поведение): базовая функциональность обеспечивается HTML-формами. JavaScript добавляет улучшенный UX (AJAX, анимация).

Каждый слой строится на предыдущем. Если нижний слой ломается, верхние слои тоже ломаются, но базовая функциональность сохраняется.

Подход HTML First

Семантический HTML: используйте правильные HTML-элементы. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Формы: создавайте формы, работающие без JavaScript. Серверная обработка с атрибутами action и method.

Ссылки: используйте настоящие ссылки <a href="...">. Выполняйте client-side routing с помощью JavaScript, но обеспечивайте server-side routing как fallback.

NoScript: показывайте альтернативный контент с помощью тега <noscript>, когда JavaScript отключён.

Progressive Web App: Service Worker и manifest добавляются, когда базовый сайт работает. Базовый сайт работает без JavaScript.

CSS Progressive Enhancement

@supports: условное стилизование с помощью CSS feature query. @supports (display: grid) { .container { display: grid; } }.

Fallback: базовый стиль работает во всех браузерах. Расширенные функции применяются в поддерживающих браузерах.

Пример: .button { background: blue; } @supports (backdrop-filter: blur(10px)) { .button { backdrop-filter: blur(10px); background: rgba(0,0,255,0.5); } }.

CSS custom properties: используйте fallback-значения, если переменные не поддерживаются. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Feature detection: проверяйте возможности браузера с помощью Modernizr или нативного feature detection.

Polyfill: добавляйте отсутствующие функции (fetch, Promise, IntersectionObserver) с помощью polyfill. Используйте core-js или polyfill.io.

Graceful degradation: базовая функциональность должна сохраняться при ошибках JavaScript. Перехватывайте ошибки с помощью try/catch.

Module/nomodule: ES modules для современных браузеров, transpiled bundle для старых. <script type="module" src="app.mjs"> и <script nomodule src="app.js">.

Lazy loading: lazy load расширенные функции (анимация, интерактивный виджет). Базовый контент загружается немедленно.

Тестирование и оценка

Тест с отключённым JavaScript: отключите JavaScript в браузере. Работает ли базовая функциональность?

Тест медленного соединения: тестируйте с 3G или медленным WiFi. Загружается ли контент вовремя?

Тест старого браузера: тестируйте с IE11, старым Safari/Chrome. Работает ли базовая функциональность?

Lighthouse: проверяйте оценки Accessibility и Best Practices. Progressive enhancement улучшает эти оценки.