Как корректно преобразовывать html/стили для старых версий браузеров?

Question

[Станислав]

Я знаю, что есть такие вещи, как autoprefixer-плагины для систем сборки проектов вроде Webpack или Gulp, которые позволяют расставлять префиксы в файлах стилей и таким образом организовывать поддержку старых браузеров. К примеру, мы можем использовать такую таску в Gulp (взято из Web Starter Kit):

// Compile and automatically prefix stylesheets
gulp.task('styles', () => {
  const AUTOPREFIXER_BROWSERS = [
    'ie >= 10',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.4',
    'bb >= 10'
  ];

  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
    'app/styles/**/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.newer('.tmp/styles'))
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      precision: 10
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    // Concatenate and minify styles
    .pipe($.if('*.css', $.cssnano()))
    .pipe($.size({title: 'styles'}))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(gulp.dest('.tmp/styles'));
});

Но со всей этой поддержкой старых браузеров непонятно вот что:

Вопрос 1: Верно ли, что просто поменяв значения в массиве настроек UTOPREFIXER_BROWSERS мы задаем поддержку тех или иных браузеров, и задав там значение 'ie >= 8', к примеру, мы включим таким образом поддержку всех IE старше 8 версии, включая ее? Если это верно, то почему бы тогда не включать такую поддержку всегда по максимуму, только лишь из-за минимизации кода, отбрасывая из него поддержку явно мертвых / ненужных браузеров?

Вопрос 2: Верно ли, что подобные плагины только лишь подставляют в нужных местах префиксы, и ничего более не делают? Как быть в случае, если я использую flexbox-верстку, autoprefixer-плагины смогут заменить flex-свойства стилей на что-либо поддерживаемое старыми браузерами? И если нет, то как в таком случае поступать?

Вопрос 3: как быть в случае html и тегов вроде header, да и прочих более менее новых html-вещей, поддержка которых браузерами вводилась не сразу? Есть ли какие-то подобные плагины, да и вообще, есть в них смысл, или же в случае с html не будет каких-либо проблем?

Answer 1

[Сергей delphinpro]

Верно ли, что просто поменяв значения в массиве настроек UTOPREFIXER_BROWSERS мы задаем поддержку

Неверно. Потому что поддержка браузеров — это не только вендорные префиксы.
Но в целом, да. Автопрефиксер расставит вам все необходимые -webkit- и т.п. свойства. Более того, он добавит некоторые другие свойства, например для поддержки старой спеки флексов, и удалит более неактуальные префиксы, если вы их написали вручную.

Верно ли, что подобные плагины только лишь подставляют в нужных местах префиксы, и ничего более не делают?

Вот это верно.
Если вам нужны не только префиксы, но и полифилы, их нужно подключать самостоятельно. Однако, если вы используете webpack, то у него в комплекте уже есть куча полифилов. Например, поддержка for..of или spred-операторов. Они тоже по дефолту не подключаются, но можно подключить и использовать.

как быть в случае html и тегов вроде header, да и прочих более менее новых html-вещей, поддержка которых браузерами вводилась не сразу?

Полифил. Ищем нужный полифил и подключаем.