Changeset 39495

Timestamp:

12/04/2016 11:11:17 PM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Fix CSS specificity problem with CSS feature query for object-fit

Previously, the theme's CSS feature query for object-fit overrode styles it shouldn't have on interior pages.

This moves the feature query farther down in the stylesheet so it takes precedence in the cascade in supported browsers, and applies the appropriate selector for the interior pages. In browsers that don't support feature queries or object-fit, the fallback styles are still applied. The problem was that the rules had the same specificity, so this way, the cascade takes over properly. The transforms and position changes for fallbacks are still needed in browsers that don't support object-fit and feature queries.

Props peterwilsoncc, davidakennedy.

Fixes #39073.

File:

• trunk/src/wp-content/themes/twentyseventeen/style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1691 +1691 @@
 }
 
-/* For browsers that support 'object-fit' */
-@supports ( object-fit: cover ) {
-    .has-header-image .custom-header-media img,
-    .has-header-video .custom-header-media video,
-    .has-header-video .custom-header-media iframe {
-        height: 100%;
-        left: 0;
-        -o-object-fit: cover;
-        object-fit: cover;
-        top: 0;
-        -ms-transform: none;
-        -moz-transform: none;
-        -webkit-transform: none;
-        transform: none;
-        width: 100%;
-    }
-}
-
 .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
     background-color: rgba(34, 34, 34, 0.5);
@@ -1743 +1725 @@
     -webkit-transform: translateX(-50%) translateY(0);
     transform: translateX(-50%) translateY(0);
+}
+
+/* For browsers that support 'object-fit' */
+@supports ( object-fit: cover ) {
+    .has-header-image .custom-header-media img,
+    .has-header-video .custom-header-media video,
+    .has-header-video .custom-header-media iframe,
+    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
+        height: 100%;
+        left: 0;
+        -o-object-fit: cover;
+        object-fit: cover;
+        top: 0;
+        -ms-transform: none;
+        -moz-transform: none;
+        -webkit-transform: none;
+        transform: none;
+        width: 100%;
+    }
 }