Reinstate support for IE 11

Author: philwareham

README.md

@@ -7,8 +7,8 @@ Official 2017+ website of the [Textpattern](https://textpattern.com/) project. *
 
 ## Supported web browsers
 
-* Internet Explorer 11.
 * Chrome, Edge, Firefox, Safari and Opera the last two recent stable releases.
+* Internet Explorer 11.
 * Firefox ESR latest major point release.
 
 Older versions of the above and other browsers may work, but these are the ones we verify.

src/assets/sass/modules/_base.scss

@@ -1,6 +1,22 @@
 /* Reset
    ========================================================================== */
 
+/**
+ * Render the `main` element consistently in IE 11.
+ */
+
+main {
+    display: block;
+}
+
+/**
+ * Add the correct display in IE 11.
+ */
+
+template {
+    display: none;
+}
+
 /**
  * Remove tap delay in modern browsers.
  */

src/assets/sass/modules/_forms.scss

@@ -407,16 +407,18 @@ optgroup {
 }
 
 /**
- * 1. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
- * 2. Restrict to vertical resizing to prevent layout breakage.
+ * 1. Remove the default vertical scrollbar in IE 11.
+ * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
+ * 3. Restrict to vertical resizing to prevent layout breakage.
  */
 
 textarea {
     width: 100%;
     height: auto;
     min-height: 3em;
-    vertical-align: top; /* 1 */
-    resize: vertical; /* 2 */
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+    resize: vertical; /* 3 */
 }
 
 /**

src/assets/sass/modules/_layout.scss

@@ -19,8 +19,8 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin: 0; /* 1 */
-    background: $color-background;
-    color: $color-text;
+    background-color: $color-text;
+    color: $color-text-inverse;
     scroll-behavior: smooth; // https://caniuse.com/#search=scroll-behavior
 }
 
@@ -84,6 +84,8 @@ noscript {
 .wrapper {
     position: relative;
     padding: 1px 0;
+    background: $color-background;
+    color: $color-text;
 }
 
 /**
@@ -100,8 +102,6 @@ noscript {
 .wrapper-footer {
     flex: 1;
     padding-bottom: 0.5em;
-    background-color: $color-text;
-    color: $color-text-inverse;
 }
 
 /**

src/assets/sass/modules/_responsive.scss

@@ -4,17 +4,35 @@
 
 @media screen and (min-width: $breakpoint-1) {
 
+    /**
+     * Screen size-specific elements.
+     */
+
+    .screen-small {
+        display: none;
+    }
+
+    .screen-large {
+        display: initial; // TODO: use `display: revert` when browser support is widespread.
+    }
+
     /**
      * Grid container.
      */
 
     .layout-container {
+        display: flex; // Flexbox fallback for browsers without CSS Grid support.
         display: grid;
+        flex-wrap: wrap; // Flexbox fallback for browsers without CSS Grid support.
+        margin: 0 -1em; // Flexbox fallback for browsers without CSS Grid support.
         grid-template-columns: repeat(12, 1fr);
         grid-gap: 0 2em;
 
         > * {
+            flex: 1; // Flexbox fallback.
             min-width: 0; // Fix Firefox `pre` overflow issues.
+            padding: 0 1em; // Flexbox fallback.
+            box-sizing: border-box; // Flexbox fallback.
         }
     }
 
@@ -42,29 +60,31 @@
     .layout-4col,
     .layout-4col-2span,
     .layout-4col-3span {
+        width: 100%; // Flexbox fallback.
         grid-column: span 12;
     }
 
-    /**
-     * Screen size-specific elements.
-     */
-
-    .screen-small {
-        display: none;
-    }
-
-    .screen-large {
-        display: initial; // TODO: use `display: revert` when browser support is widespread.
-    }
-
     /**
      * Cells for 4 column layouts are generated, but as 2 columns at this width.
      */
 
     .layout-4col:not(.sidebar) {
+        width: 50%; // Flexbox fallback.
         grid-column: span 6;
     }
 
+    // Override Flexbox fallback for browsers with CSS Grid support.
+    @supports (display: grid) {
+        .layout-container {
+            margin: 0;
+        }
+
+        .layout-container > * {
+            width: auto;
+            padding: 0;
+        }
+    }
+
     /**
      * Allow two columns of text.
      */
@@ -199,17 +219,27 @@
      */
 
     .layout-2col {
+        width: 50%; // Flexbox fallback.
         grid-column: span 6;
     }
 
     .layout-3col {
+        width: 33.333%; // Flexbox fallback.
         grid-column: span 4;
     }
 
     .layout-3col-2span {
+        width: 66.666%; // Flexbox fallback.
         grid-column: span 8;
     }
 
+    // Override Flexbox fallback for browsers with CSS Grid support.
+    @supports (display: grid) {
+        .layout-container > * {
+            width: auto;
+        }
+    }
+
     /**
      * Allow three columns of text.
      */
@@ -413,17 +443,27 @@
 
     .layout-4col,
     .layout-4col:not(.sidebar) {
+        width: 25%; // Flexbox fallback.
         grid-column: span 3;
     }
 
     .layout-4col-2span {
+        width: 50%; // Flexbox fallback.
         grid-column: span 6;
     }
 
     .layout-4col-3span {
+        width: 75%; // Flexbox fallback.
         grid-column: span 9;
     }
 
+    // Override Flexbox fallback for browsers with CSS Grid support.
+    @supports (display: grid) {
+        .layout-container > * {
+            width: auto;
+        }
+    }
+
     /**
      * Allow four columns of text.
      */