Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-04-17 09:26:11 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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.

Built from https://develop.svn.wordpress.org/trunk@39495


git-svn-id: http://core.svn.wordpress.org/trunk@39435 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
David A. Kennedy 2016-12-04 23:12:42 +00:00
parent 597627fb92
commit 6f5111d4e7
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
wp-content/themes/twentyseventeen/style.css
View File

@ -1690,24 +1690,6 @@ body:not(.title-tagline-hidden) .site-branding-text {
transform: translateX(-50%) translateY(-50%);
}
/* 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);
border: 1px solid rgba(255, 255, 255, 0.6);
@ -1744,6 +1726,25 @@ body:not(.title-tagline-hidden) .site-branding-text {
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%;
}
}
/* Hides div in Customizer preview when header images or videos change. */
body:not(.has-header-image):not(.has-header-video) .custom-header-media {

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.8-alpha-39494';
$wp_version = '4.8-alpha-39495';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.