Hopp til innhold

IE + Jøkul = Sant

Jo Emil Holen

2020.08.05

"Vi må støtte IE 11" trenger ikke være den verste setningen en utvikler kan høre. Med noen enkle steg kan man komme veldig langt uten å hverken måtte snu opp-ned på markup eller kode.

Steg én: Polyfill JavaScript for IE 11

Legg til følgende konfigurasjon i package.json:

"browserslist": {
    "extends @fremtind/browserslist-config-jkl",
    "ie 11"
}

BrowsersList forteller verktøy som Babel og PostCSS hvilke polyfills som kreves. I tillegg til dette må vi registrere noen ekstra polyfills:

import "document-register-element";
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

Jøkul bruker NanoID, som ikke lenger støtter IE 11. For å fikse dette kan man fortelle Babel at pakken må kompileres, samt definere window.crypto:

// webpack.config.ts
module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: [/node_modules\/(?!(nanoid)\/).*/],
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                        plugins: ["@babel/plugin-proposal-export-default-from"],
                    },
                },
            },
        ],
    },
};

// polyfills.ts
if (typeof window !== "undefined" && !window.crypto) {
    // @ts-ignore
    window.crypto = window.msCrypto;
}

// index.ts
import "./common/polyfills";

Steg to: Autoprefix CSS

IE 11 er ikke helt ukjent for å henge litt etter på stylingfronten. Ofte tenker man spesielt på CSS Grid. Her finnes det også verktøy som kan hjelpe oss på veien, det er dog ikke like mye å hente her som på JavaScript-siden.

Ved å benytte oss av PostCSS kan vi få en del nyttig funksjonalitet, som blant annet autoprefix. Bare dette hjelper oss et stykke på veien. Dette verktøyet vil prøve å polyfille funksjonalitet så langt det er mulig. Men CSS Grid begrenser seg noe, og derfor er grid-modulen i autoprefixeren slått av som standard. Ved å legge til følgende konfigurasjonsfil kan vi konfigurere PostCSS til å autoprefixe CSS Grid:

// postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: { grid: 'autoplace' }
  }
};

Denne vil prøve å polyfille CSS så godt det lar seg gjøre ved å blant annet bruke nth-child selectorer.

Veien videre

JavaScript er mer eller mindre ferdig. Her skal du slippe å tenke på noe mer konfigurasjon, polyfills eller lignende. Men for styling ser derimot historien ganske annerledes ut.

PostCSS og Autoprefixer fikser det meste, med noen unntak. Stort sett er det med CSS Grid man merker den manglende støtten.

Vår venn, Flexbox

Flexbox er CSS Grid sin éndimensjonale storebror. I motsetning til CSS Grid er Flexbox mye bedre støttet i IE 11, og kan brukes med mye større trygghet.

En viktig ting å huske på er at CSS Grid ikke utelukker Flexbox. Dette er verktøy som kan brukes sammen og hver for seg, med sine bruksområder. Der hvor CSS Grid er todimensjonal og kan gå både vertikalt og horisontalt, bryr Flexbox seg kun om én av aksene. Selv om det frister å skrive mindre kode for å lage noe pent med CSS Grid, kan det være lurt å ta seg bryet med å gjøre det i Flexbox. Et godt eksempel er her er et fler-kolonne oppsett:

.columns: {
    display: grid;
    grid-template-columns: repeat(4, auto);
}

Hvordan kan dette gjenskapes med Flexbox?

.columns {
    display: flex;
    flex-wrap: wrap;
}

.columns .column {
    flex: 1 0 25%;
}

Gotchas

1. Bruk CSS Grid til å definere navngitte områder og kjente størrelser; PostCSS klarer ikke blant annet grid-auto-rows og grid-auto-columns.

.page__wrapper {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
    grid-template-areas:
        "message"
        "header"
        "main"
        "footer";
}

.page__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

2. Må det egentlig se likt ut i IE 11 som i Chrome? Bruk @supports() for alt det den er verdt!

.avtale-oversikt__gruppe-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: $bm-max-width;
    margin: 0 auto;
    padding: jkl.$spacing-2xl 0 $padding-bottom 0;
}

@supports (display: grid) {
    .avtale-oversikt__gruppe-wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
        grid-auto-flow: row dense;
    }
}

3. Går innholdet i bare én retning? Like greit å bare bruke Flexbox!

.page__content {
    display: flex;
    flex-direction: column;
}

Videre lesing om CSS Grid i IE 11

CSS Grid in IE: CSS Grid and the New AutoPrefixer (css-tricks.com)

Supporting CSS Grid in Internet Explorer (medium.com)

Does Autoprefixer polyfill Grid Layout for IE (github.com/postcss)