<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[39495] trunk/src/wp-content/themes/twentyseventeen/style.css: Twenty Seventeen: Fix CSS specificity problem with CSS feature query for `object-fit`</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/39495">39495</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/39495","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>davidakennedy</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-12-04 23:11:17 +0000 (Sun, 04 Dec 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/39073">#39073</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyseventeenstylecss">trunk/src/wp-content/themes/twentyseventeen/style.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentyseventeenstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/style.css 2016-12-04 22:06:36 UTC (rev 39494)
+++ trunk/src/wp-content/themes/twentyseventeen/style.css 2016-12-04 23:11:17 UTC (rev 39495)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1690,24 +1690,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateX(-50%) translateY(-50%);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 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%;
- }
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(34, 34, 34, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px solid rgba(255, 255, 255, 0.6);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1744,6 +1726,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateX(-50%) translateY(0);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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%;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Hides div in Customizer preview when header images or videos change. */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> body:not(.has-header-image):not(.has-header-video) .custom-header-media {
</span></span></pre>
</div>
</div>
</body>
</html>