Wrap everything in support query

EdgeHTML is the only browser engine that supports `-ms-ime-align`, so we can check Edge 12 - 18 by applying this property. https://browserstrangeness.github.io/css_hacks.html We can target Edge 16 - 18 more specifically, but keeping it simple for now. This approach just wraps almost everything in a check to see the browser DOESN'T support `-ms-ime-align`, but separates some spacing and border styles to make things look tolerable.
alphagov · Jun 7, 2023 · 5fc7ba1 · 5fc7ba1
1 parent cc3641f
commit 5fc7ba1
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 62 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss
@@ -7,82 +7,90 @@
     display: block;
   }
 
-  .govuk-details__summary {
-    // Make the focus outline shrink-wrap the text content of the summary
-    display: inline-block;
-
-    // Absolutely position the marker against this element
-    position: relative;
+  .govuk-details__text {
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
 
+  .govuk-details__summary {
     margin-bottom: govuk-spacing(1);
+  }
 
-    // Allow for absolutely positioned marker and align with disclosed text
-    padding-left: govuk-spacing(4) + $govuk-border-width;
-
-    // Style the summary to look like a link...
-    color: $govuk-link-colour;
-    cursor: pointer;
-
-    &:hover {
-      color: $govuk-link-hover-colour;
+  // Fix for older browsers which:
+  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
+  //   - do not support ES6 modules or the <details> element (eg, IE8+)
+  // -ms-ime-align is only supported by Edge 12 - 18
+  // Older browsers ignore the entire feature query and use the styles above
+  @supports not (-ms-ime-align: auto) {
+    .govuk-details__summary {
+      // Make the focus outline shrink-wrap the text content of the summary
+      display: inline-block;
+
+      // Absolutely position the marker against this element
+      position: relative;
+
+      // Allow for absolutely positioned marker and align with disclosed text
+      padding-left: govuk-spacing(4) + $govuk-border-width;
+
+      // Style the summary to look like a link...
+      color: $govuk-link-colour;
+      cursor: pointer;
+
+      &:hover {
+        color: $govuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+      }
     }
-
-    &:focus {
-      @include govuk-focused-text;
+    // ...but only underline the text, not the arrow
+    .govuk-details__summary-text {
+      @include govuk-link-decoration;
     }
-  }
-
-  // ...but only underline the text, not the arrow
-  .govuk-details__summary-text {
-    @include govuk-link-decoration;
-  }
 
-  .govuk-details__summary:hover .govuk-details__summary-text {
-    @include govuk-link-hover-decoration;
-  }
+    .govuk-details__summary:hover .govuk-details__summary-text {
+      @include govuk-link-hover-decoration;
+    }
 
-  // Remove the underline when focussed to avoid duplicate borders
-  .govuk-details__summary:focus .govuk-details__summary-text {
-    text-decoration: none;
-  }
+    // Remove the underline when focussed to avoid duplicate borders
+    .govuk-details__summary:focus .govuk-details__summary-text {
+      text-decoration: none;
+    }
 
-  // Remove the default details marker so we can style our own consistently and
-  // ensure it displays in Firefox (see implementation.md for details)
-  .govuk-details__summary::-webkit-details-marker {
-    display: none;
-  }
+    // Remove the default details marker so we can style our own consistently and
+    // ensure it displays in Firefox (see implementation.md for details)
+    .govuk-details__summary::-webkit-details-marker {
+      display: none;
+    }
 
-  // Append our own open / closed marker using a pseudo-element
-  .govuk-details__summary::before {
-    content: "";
-    position: absolute;
+    // Append our own open / closed marker using a pseudo-element
+    .govuk-details__summary::before {
+      content: "";
+      position: absolute;
 
-    top: -1px;
-    bottom: 0;
-    left: 0;
+      top: -1px;
+      bottom: 0;
+      left: 0;
 
-    margin: auto;
+      margin: auto;
 
-    @include govuk-shape-arrow($direction: right, $base: 14px);
+      @include govuk-shape-arrow($direction: right, $base: 14px);
 
-    .govuk-details[open] > & {
-      @include govuk-shape-arrow($direction: down, $base: 14px);
+      .govuk-details[open] > & {
+        @include govuk-shape-arrow($direction: down, $base: 14px);
+      }
     }
-  }
-
-  .govuk-details__text {
-    padding-top: govuk-spacing(3);
-    padding-bottom: govuk-spacing(3);
-    padding-left: govuk-spacing(4);
-    border-left: $govuk-border-width solid $govuk-border-colour;
-  }
 
-  .govuk-details__text p {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(4);
-  }
+    .govuk-details__text p {
+      margin-top: 0;
+      margin-bottom: govuk-spacing(4);
+    }
 
-  .govuk-details__text > :last-child {
-    margin-bottom: 0;
+    .govuk-details__text > :last-child {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -44,7 +44,7 @@ Details.prototype.init = function () {
     this.$module instanceof HTMLDetailsElement
 
   if (!hasNativeDetails) {
-    this.polyfillDetails()
+    // this.polyfillDetails()
   }
 }