Modern mode: CSS

[yabab-dev]

Idea from @academici

Original content:

"Green browsers" support attribute "module" on tag script, old browsers use scripts with attribute "nomodule". But tag link no support "nomodule".

Idea

Create config option modernBrowsers

modernBrowsers = [
    'Chrome >= 60',
    'Safari >= 10.1',
    'iOS >= 10.3',
    'Firefox >= 54',
    'Edge >= 15',
  ]

Configure postcss.config.js

const isModern = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
let autoprefixerConfig = {}

if(isModern) {
  autoprefixerConfig.browsers = modernBrowsers
}

module.exports = {
  plugins: {
    autoprefixer: {
      ...autoprefixerConfig,
    },
  },
};

Files were generated in dist folder and precache-manifest.

Create middleware using useragent parser and modernBrowsers option.

In html file include needed styles.

what do you think of this idea?

[academici]

To help https://www.smashingmagazine.com/2018/10/smart-bundling-legacy-code-browsers/

[academici]

Will there be conflicts with Critical Css #2 ?