SPIKE: IE11 handling

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

Current Handling

https://github.com/SAP/fundamental/blob/master/scss/all-ie11.scss#L2 https://github.com/SAP/fundamental/blob/master/scss/components/popover.scss#L45

 @if $fd-support-css-var-fallback {
    box-shadow: 0 5px 20px 0 fd-color("neutral", 3), 0 2px 8px 0 fd-color("neutral", 2);
 }
 box-shadow: 0 5px 20px 0 var(--fd-color-neutral-3), 0 2px 8px 0 var(--fd-color-neutral-2);

results in fiori-fundamentals.css and fiori-fundamentals-ie11.css

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

Jekyll: handling IE11

• find libraries for browser detection
• for now- replacing with ie11 fundamental-css

How to advise consumers to handle IE11