SPIKE: IE11 handling - SAP/fundamental-styles GitHub Wiki

What CSS is currently being used in fundamental that is not supported by IE11

• https://caniuse.com/#compare=ie+11,firefox+65,firefox+66,chrome+72,chrome+73&compare_cats=CSS
• :read-only https://caniuse.com/#feat=css-read-only-write
• text-rendering: optimizeLegibility https://caniuse.com/#feat=kerning-pairs-ligatures
• :focus-within https://caniuse.com/#feat=css-focus-within
• ::placeholder https://caniuse.com/#feat=css-placeholder
• CSS variables
  • https://github.com/SAP/fundamental/issues/1244
• grid (handle at later date)
  • "Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default."
  • grid: "autoplace"
  • browsers: ["last 2 versions", "IE 11"] or add .browserslistrc

Changes Needed

How are other well developed libraries handling ie11? material ui? bootstrap?

• materialui, bootstrap not using CSS variables

PostCSS config changes

• postcss-nested 'postcss-nested': {},
• postcss-simple-vars

'postcss-simple-vars': {
            unknown: function (node, name, result) {
                node.warn(result, 'Unknown variable ' + name);
            },
            keep: true
        },

• postcss-css-variables: removes variables from output CSS

'postcss-css-variables': {
    preserve: true
 },

• set parser to postcss-scss
• possibly use postcss present env
• possibly use precss plugin
• Add linting plugins doIUse

Steps needed

• remove unneeded $fd-support-css-var-fallback from SCSS files
• remove fundamentals-ie11 files
• many missing colors need to be updated:
• change npm run style:compile command, use node-sass inside of postcss as plugin after some things are done
• run customscript.js through babel, or rewrite to ES5