diff --git a/packages/block-library/src/gallery/deprecated.scss b/packages/block-library/src/gallery/deprecated.scss index c72fecd994fdea..e0503e991e2b38 100644 --- a/packages/block-library/src/gallery/deprecated.scss +++ b/packages/block-library/src/gallery/deprecated.scss @@ -29,27 +29,16 @@ figure { margin: 0; height: 100%; - - // IE doesn't support flex so omit that. - @supports (position: sticky) { - display: flex; - align-items: flex-end; - justify-content: flex-start; - } + display: flex; + align-items: flex-end; + justify-content: flex-start; } img { display: block; max-width: 100%; height: auto; - - // IE doesn't handle cropping, so we need an explicit width here. - width: 100%; - - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports (position: sticky) { - width: auto; - } + width: auto; } figcaption { @@ -81,16 +70,9 @@ &.is-cropped .blocks-gallery-item { a, img { - // IE11 doesn't support object-fit, so just make sure images aren't skewed. - // The following rules are for all browsers. - width: 100%; - - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports (position: sticky) { - height: 100%; - flex: 1; - object-fit: cover; - } + height: 100%; + flex: 1; + object-fit: cover; } } diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index e1e8300936b60e..9f2f59213f8af9 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -29,33 +29,20 @@ position: relative; margin-top: auto; margin-bottom: auto; - // IE11 doesn't like the "flex-direction: column;" here. - @supports ( position: sticky ) { - flex-direction: column; - } + flex-direction: column; > div, > a { margin: 0; - - // Avoid applying flex styles to IE11. - @supports ( position: sticky ) { - flex-direction: column; - flex-grow: 1; - } + flex-direction: column; + flex-grow: 1; } img { display: block; height: auto; max-width: 100%; - width: 100%; - - // IE doesn't handle cropping, so we need an explicit width here. - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports ( position: sticky ) { - width: auto; - } + width: auto; } figcaption { @@ -80,22 +67,15 @@ &.is-style-rounded { > div, > a { - // Not supported in IE11. - @supports ( position: sticky ) { - flex: 1 1 auto; - } + flex: 1 1 auto; } figcaption { + flex: initial; background: none; - // Not supported in IE11. - @supports ( position: sticky ) { - flex: initial; - background: none; - color: inherit; - margin: 0; - padding: 10px 10px 9px; - position: relative; - } + color: inherit; + margin: 0; + padding: 10px 10px 9px; + position: relative; } } } @@ -127,24 +107,15 @@ align-self: inherit; > div:not(.components-drop-zone), > a { - display: block; // Thanks to IE11 not supporting object-fit fall back to display: block. - - // Without IE11 object-fit support "display: flex;" here causes distortion of aspect ratio. - @supports ( position: sticky ) { - display: flex; - } + display: flex; } a, img { width: 100%; - - // IE11 doesn't read rules inside this query. They are applied only to modern browsers. - @supports ( position: sticky ) { - flex: 1 0 0%; - height: 100%; - object-fit: cover; - } + flex: 1 0 0%; + height: 100%; + object-fit: cover; } }