Коротко и по делу — набор практик и конкретных приёмов, которые минимизируют разрывы между современными браузерами и старыми IE без дублирования кода.
1) Базовая идея: прогрессивное улучшение
- Делайте рабочую «базовую» версию для всех (простая верстка, нормальные семантические HTML/CSS).
- Повышайте функциональность через фичи (CSS/JS) только когда поддержка есть (feature detection).
- Не делайте «всё только на современных фичах» — обеспечьте приемлемый UX без них.
2) Feature detection (не user-agent)
- Используйте Modernizr или собственную детекцию: добавляет классы/флаги и позволяет условно подгружать полифилы/скрипты.
- Пример (JS):
if (!Modernizr.flexbox) {
loadScript('flexbox-polyfill.js');
}
3) CSS @supports — канал для единого CSS с fallback
- Пишите сначала фолбэк-правила, затем более современные внутри @supports; это предотвращает дублирование файлов.
- Пример:
.container { display: block; /* fallback */ }
@supports (display: grid) {
.container { display: grid; grid-template-columns: 1fr 1fr; }
}
4) Фолбэки в CSS (порядок — от старого к новому)
- Указывайте «старые» свойства перед новыми: браузер возьмёт последнее понятное ему.
.btn { background: #ccc; background: linear-gradient(#eee,#ccc); }
- Для CSS-переменных: укажите значение до var() или используйте PostCSS/postcss-custom-properties:
.el { background: #06c; background: var(--main, #06c); }
5) Полноценные полифилы и условная загрузка
- Подгружайте полифилы только если нужно (Modernizr, feature-detection + динамическая загрузка).
- Полезные полифилы: html5shiv, respond.js (старые IE — медиа-запросы), picturefill (srcset/picture), polyfills для Promise/Fetch, svg4everybody/inline-svg fallback.
- Для старых IE можно использовать условные комментарии (до IE9) или JS-дедекцию:

6) Адаптивный дизайн — mobile-first + медиа-запросы с фолбэком
- Пишите mobile-first: базовый лэйаут — простейший, затем медиа-запросы расширяют. Старые IE, не понимая сложных медиа-запросов, получат базовую версию.
- Для старых IE без поддержки медиа-запросов используйте respond.js (polyfill).
7) Грид/флекс: умный фолбэк
- Используйте @supports для grid/flex; до него — плавающие блоки/inline-block или одноколоночный стек.
Пример:
/* fallback: floats */
.col { float: left; width: 50%; }
@supports (display: flex) {
.row { display: flex; }
.col { width: auto; flex: 1; float: none; }
}
8) Инструменты: автопрефиксер и транспайлеры
- Autoprefixer + Browserslist для автоматической поддержки префиксов и минимизации ручной кодовой базы.
- Babel для JS-транспиляции; полифилы через core-js и @babel/preset-env с useBuiltIns:'usage' — подгружать только нужное.
9) Минимизировать дублирование стилей/логики
- Пишите «единую» каскадную стратегию: фолбэк → улучшение через @supports/классы Modernizr. Это устраняет необходимость дублировать файлы.
- Компонентная структура (BEM, CSS Modules) + PostCSS для генерации кроссбраузерного CSS.
10) Практические мелочи
- Используйте normalize.css/modern-normalize для выравнивания базового поведения.
- Не полагайтесь на хак-целевые UA-правила — лучше feature detection.
- Тестируйте в эмуляторах/реальных старых IE или BrowserStack; используйте CI для визуального регресс-тестирования.
- Логирование фолбэков: если важная фича отсутствует, показывайте минимальный но понятный контент (сообщение/альтернативный контрол).
Короткий чеклист внедрения
- Определите целевой набор браузеров (browserslist).
- Сделайте базовую версию без современных фич.
- Добавьте улучшения через @supports/Modernizr.
- Подключите полифилы динамически (useBuiltIns / conditional loads).
- Автоматизируйте префиксы/транспиляцию/postcss.
- Тестируйте старые IE и корректируйте фолбэки.
Эти практики дают единый код-базис (не дублируют файлы) и давление на качество: старые IE получают корректную, пусть упрощённую, работу, а современные — улучшенный интерфейс.