Improve galleries for IE11. (#9622)

This PR is a followup to feedback in #7465 (comment).

Notably there is an issue with image cropping in IE11 galleries. Simply, it doesn't really work because IE11 doesn't support object-fit. This means in some situations — for example a 2 column gallery with landscape, portrait, portrait images — the landscape image is skewed.

This PR takes a somewhat radical consequence and simply disables cropping altoghether on IE11. But it works fine in Edge.

This PR does a few other improvements too — it changes the IE11 hack to be a more solid one, using @supports(position:sticky) to augment the CSS for capable browsers, rather than relying on a contrast hack that fails if a user actually uses high contrast mode. In addition, it moves this hack from the editor style to the stylesheet file, so benefits affect both editor and theme.

packages/block-library/src/gallery/editor.scss

@@ -117,16 +117,3 @@
 	left: 50%;
 	transform: translate(-50%, -50%);
 }
-
-// IE11 doesn't support object-fit or flex very well, so we inline-block.
-@media all and (-ms-high-contrast: none) {
-	*::-ms-backdrop,
-	.blocks-gallery-item {
-		display: inline-block;
-	}
-
-	*::-ms-backdrop,
-	.blocks-gallery-item img {
-		width: 100%;
-	}
-}

packages/block-library/src/gallery/style.scss

@@ -3,7 +3,8 @@
 	flex-wrap: wrap;
 	list-style-type: none;
 	padding: 0;
-	// allow gallery items to go edge to edge
+
+	// Allow gallery items to go edge to edge.
 	margin: 0 -8px 0 -8px;
 
 	.blocks-gallery-image,
@@ -19,7 +20,7 @@
 			margin: 0;
 			height: 100%;
 			display: flex;
-			align-items: flex-end;
+			align-items: center;
 		}
 
 		img {
@@ -50,11 +51,16 @@
 	&.is-cropped .blocks-gallery-item {
 		a,
 		img {
-			flex: 1;
+			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
+			// The following rules are for all browsers.
 			width: 100%;
-			height: 100%;
-			object-fit: cover;
 
+			// 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;
+			}
 		}
 	}