Default to native styling

Author: domoscargin

packages/govuk-frontend/src/govuk/components/details/_index.scss

@@ -5,24 +5,16 @@
     @include govuk-responsive-margin(6, "bottom");
 
     display: block;
-
-    border-left: $govuk-border-width-wide solid $govuk-border-colour;
   }
 
   .govuk-details__summary {
     // Make the focus outline shrink-wrap the text content of the summary
     display: inline-block;
 
-    margin-top: govuk-spacing(3);
-
     margin-bottom: govuk-spacing(1);
   }
 
   .govuk-details__summary-text {
-    @include govuk-typography-weight-bold;
-    @include govuk-responsive-margin(4, "bottom");
-    padding-left: govuk-spacing(4);
-
     > :first-child {
       margin-top: 0;
     }
@@ -48,6 +40,25 @@
     margin-bottom: 0;
   }
 
+  // Hack to target IE8 - IE11 (and REALLY old Firefox)
+  // These browsers don't support the details element, so fall back to looking
+  // like inset text
+  @media screen\0 {
+    .govuk-details {
+      border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    }
+
+    .govuk-details__summary {
+      margin-top: govuk-spacing(3);
+    }
+
+    .govuk-details__summary-text {
+      @include govuk-typography-weight-bold;
+      @include govuk-responsive-margin(4, "bottom");
+      padding-left: govuk-spacing(4);
+    }
+  }
+
   // We wrap styles for newer browsers in a feature query, which is ignored by
   // older browsers, which always expand the details element.
   //
@@ -57,19 +68,11 @@
   //   - support ES6 modules but not the <details> element (Edge 16 - 18)
   //   - do not support ES6 modules or the <details> element (eg, IE8+)
   @supports not (-ms-ime-align: auto) {
-    // Override default border
-    .govuk-details {
-      border-left: none;
-    }
-
     .govuk-details__summary {
 
       // Absolutely position the marker against this element
       position: relative;
 
-      // Override default top margin
-      margin-top: 0;
-
       // Allow for absolutely positioned marker and align with disclosed text
       padding-left: govuk-spacing(4) + $govuk-border-width;
 
@@ -88,12 +91,6 @@
     // ...but only underline the text, not the arrow
     .govuk-details__summary-text {
       @include govuk-link-decoration;
-      // Override default font weight
-      @include govuk-typography-weight-regular;
-      // Override default margin
-      margin-bottom: 0;
-      // Override default padding
-      padding-left: 0;
     }
 
     .govuk-details__summary:hover .govuk-details__summary-text {

packages/govuk-frontend/src/govuk/components/details/implementation.md

@@ -1,5 +1,49 @@
 ## Implementation notes
 
+### Styling in older browsers
+
+#### Browsers with support for `type=module`, `<details>` and feature queries
+
+https://browsersl.ist/#q=supports+details+and+supports+css-featurequeries+and+supports+es6-module&region=GB
+
+Previously, we provided a polyfill for older browsers which do not support the
+`<details>` component. Since most browsers now DO support `<details>`, we've
+removed that polyfill, and we need to make sure browsers which don't support
+`<details>` don't use any styles that make them look interactable.
+
+By wrapping these styles in a feature query, we can capture the vast majority of
+browsers which have full support.
+
+#### Browsers that support `type=module` and feature queries but not `<details>`
+
+https://browsersl.ist/#q=supports+es6-module+and+not+supports+details+and+supports+css-featurequeries&region=GB
+
+This only affects Edge 16 - 18. We filter these out of the support query by
+checking for `-ms-ime-align: auto`, which isn't supported by any other browsers.
+
+#### Browsers that support `<details>` but not `type=module` or feature queries
+
+https://browsersl.ist/#q=supports+details+and+not+supports+css-featurequeries+and+not+supports+es6-module&region=GB
+
+These will default to their native styling of the `<details>` element, with a
+few of our spacing and font styles.
+
+#### Browsers which don't support `<details>`, `type=module` or feature queries
+
+https://browsersl.ist/#q=%3E0.0000001%25+and+not+supports+details+and+not+supports+es6-module+and+not+supports+css-featurequeries&region=GB
+
+This is largely IE 8 - 11.
+
+We can account for IE by styling them like inset text, via a `@media screen\0`
+hack that no other browser supports.
+
+#### Browsers that support feature queries, but not `<details>` or `type=module`
+
+https://browsersl.ist/#q=supports+css-featurequeries+and+not+supports+details+and+not+supports+es6-module&region=GB
+
+This is the only gap, as these browsers will get styled to look interactable,
+even though they aren't. This is largely Opera Mini.
+
 ### Marker styling
 
 Firefox uses display: list-item to show the arrow marker for the summary