From da96d31839a7e39a996bea36c40c3c8197cafc50 Mon Sep 17 00:00:00 2001 From: Brett Kyle Date: Tue, 6 Jun 2023 10:58:47 +0100 Subject: [PATCH 1/3] 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. --- .../src/govuk/components/details/_index.scss | 119 ++++++++++-------- 1 file changed, 64 insertions(+), 55 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss index 739c856dcb..9d2efcfd46 100644 --- a/packages/govuk-frontend/src/govuk/components/details/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/details/_index.scss @@ -11,78 +11,87 @@ // Make the focus outline shrink-wrap the text content of the summary display: inline-block; - // Absolutely position the marker against this element - position: relative; - 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; - } - - &:focus { - @include govuk-focused-text; - } } - // ...but only underline the text, not the arrow - .govuk-details__summary-text { - @include govuk-link-decoration; + .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:hover .govuk-details__summary-text { - @include govuk-link-hover-decoration; + .govuk-details__text p { + margin-top: 0; + margin-bottom: govuk-spacing(4); } - // Remove the underline when focussed to avoid duplicate borders - .govuk-details__summary:focus .govuk-details__summary-text { - text-decoration: none; + .govuk-details__text > :last-child { + margin-bottom: 0; } - // 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; - } + // Fix for older browsers which: + // - support ES6 modules but not the
element (Edge 16 - 18) + // - do not support ES6 modules or the
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 { - // Append our own open / closed marker using a pseudo-element - .govuk-details__summary::before { - content: ""; - position: absolute; + // Absolutely position the marker against this element + position: relative; - top: -1px; - bottom: 0; - left: 0; + // Allow for absolutely positioned marker and align with disclosed text + padding-left: govuk-spacing(4) + $govuk-border-width; - margin: auto; + // Style the summary to look like a link... + color: $govuk-link-colour; + cursor: pointer; - @include govuk-shape-arrow($direction: right, $base: 14px); + &:hover { + color: $govuk-link-hover-colour; + } - .govuk-details[open] > & { - @include govuk-shape-arrow($direction: down, $base: 14px); + &:focus { + @include govuk-focused-text; + } + } + // ...but only underline the text, not the arrow + .govuk-details__summary-text { + @include govuk-link-decoration; } - } - .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:hover .govuk-details__summary-text { + @include govuk-link-hover-decoration; + } - .govuk-details__text p { - margin-top: 0; - margin-bottom: govuk-spacing(4); - } + // Remove the underline when focussed to avoid duplicate borders + .govuk-details__summary:focus .govuk-details__summary-text { + text-decoration: none; + } - .govuk-details__text > :last-child { - margin-bottom: 0; + // 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; + + top: -1px; + bottom: 0; + left: 0; + + margin: auto; + + @include govuk-shape-arrow($direction: right, $base: 14px); + + .govuk-details[open] > & { + @include govuk-shape-arrow($direction: down, $base: 14px); + } + } } } From a1cd5d00c7ce7fd391024bb4072541a70c9e1ea0 Mon Sep 17 00:00:00 2001 From: Brett Kyle Date: Mon, 12 Jun 2023 09:20:27 +0100 Subject: [PATCH 2/3] Style to look like inset text on older browsers --- .../src/govuk/components/details/_index.scss | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss index 9d2efcfd46..9d4ddcc416 100644 --- a/packages/govuk-frontend/src/govuk/components/details/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/details/_index.scss @@ -5,20 +5,38 @@ @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; + } + + > :only-child, + > :last-child { + margin-bottom: 0; + } + } + .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 { @@ -30,17 +48,28 @@ margin-bottom: 0; } - // Fix for older browsers which: + // We wrap styles for newer browsers in a feature query, which is ignored by + // older browsers, which always expand the details element. + // + // Additionally, -ms-ime-align is only supported by Edge 12 - 18 + // + // This ensures we don't use these styles in browsers which: // - support ES6 modules but not the
element (Edge 16 - 18) // - do not support ES6 modules or the
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) { + // 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; @@ -59,6 +88,12 @@ // ...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 { @@ -93,5 +128,9 @@ @include govuk-shape-arrow($direction: down, $base: 14px); } } + + .govuk-details__text { + border-left: $govuk-border-width solid $govuk-border-colour; + } } } From 1084233d977d2babf073556ab302ba6f7f0a8ab1 Mon Sep 17 00:00:00 2001 From: Brett Kyle Date: Tue, 20 Jun 2023 11:10:05 +0100 Subject: [PATCH 3/3] Default to native styling --- .../src/govuk/components/details/_index.scss | 41 ++++++++--------- .../components/details/implementation.md | 44 +++++++++++++++++++ 2 files changed, 63 insertions(+), 22 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss index 9d4ddcc416..8f7e43eec4 100644 --- a/packages/govuk-frontend/src/govuk/components/details/_index.scss +++ b/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
element (Edge 16 - 18) // - do not support ES6 modules or the
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 { diff --git a/packages/govuk-frontend/src/govuk/components/details/implementation.md b/packages/govuk-frontend/src/govuk/components/details/implementation.md index ed982510ff..0d3f6464d9 100644 --- a/packages/govuk-frontend/src/govuk/components/details/implementation.md +++ b/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`, `
` and feature queries + +https://browsersl.ist/#q=supports+details+and+supports+css-featurequeries+and+supports+es6-module®ion=GB + +Previously, we provided a polyfill for older browsers which do not support the +`
` component. Since most browsers now DO support `
`, we've +removed that polyfill, and we need to make sure browsers which don't support +`
` 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 `
` + +https://browsersl.ist/#q=supports+es6-module+and+not+supports+details+and+supports+css-featurequeries®ion=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 `
` but not `type=module` or feature queries + +https://browsersl.ist/#q=supports+details+and+not+supports+css-featurequeries+and+not+supports+es6-module®ion=GB + +These will default to their native styling of the `
` element, with a +few of our spacing and font styles. + +#### Browsers which don't support `
`, `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®ion=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 `
` or `type=module` + +https://browsersl.ist/#q=supports+css-featurequeries+and+not+supports+details+and+not+supports+es6-module®ion=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