How to correctly convert html/styles for older versions of browsers?

Question

HTML

I know there are things like autoprefixer plugins for project build systems like Webpack or Gulp that allow you to prefix your style files and thus support older browsers. For example, we can use this task in Gulp (taken from the 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'));
});

But with all this support for old browsers, the following is not clear:
Question 1: Is it true that by simply changing the values ​​​​in the UTOPREFIXER_BROWSERS settings array, we set support for certain browsers, and setting the value 'ie >= 8' there, for example, we will enable such way support for all IE older than version 8, including it? If this is true, then why not always include such support to the maximum, just because of the minimization of the code, discarding support for apparently dead / unnecessary browsers from it?
Question 2:Is it true that such plugins only substitute prefixes in the right places, and do nothing else? What if I use flexbox layout, autoprefixer plugins will be able to replace flex style properties with something supported by older browsers? And if not, then how to proceed in this case?
Question 3: what about html and tags like header, and other more or less new html things, support for which was not introduced by browsers immediately? Are there any similar plugins, and indeed, do they make sense, or will there be no problems in the case of html?

Answer 1

Is it true that by simply changing the values ​​in the UTOPREFIXER_BROWSERS settings array, we set support for

Wrong. Because browser support is not just about vendor prefixes.
But in general, yes. The autoprefixer will arrange all the necessary -webkit- and so on for you. properties. Moreover, it will add some other features, for example, to support the old flex spec, and remove no longer relevant prefixes if you wrote them manually.
That's right.
If you need not only prefixes, but also polyfills, you need to include them yourself. However, if you are using webpack, then it already comes with a bunch of polyfills. For example, support for for..of or spread operators. They are also not connected by default, but you can connect and use them.
Polyfill. We are looking for the desired polyfill and connect.