WordPress.org

Make WordPress Core

Changeset 39495


Ignore:
Timestamp:
12/04/16 23:11:17 (5 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39483 r39495  
    16911691} 
    16921692 
    1693 /* For browsers that support 'object-fit' */ 
    1694 @supports ( object-fit: cover ) { 
    1695     .has-header-image .custom-header-media img, 
    1696     .has-header-video .custom-header-media video, 
    1697     .has-header-video .custom-header-media iframe { 
    1698         height: 100%; 
    1699         left: 0; 
    1700         -o-object-fit: cover; 
    1701         object-fit: cover; 
    1702         top: 0; 
    1703         -ms-transform: none; 
    1704         -moz-transform: none; 
    1705         -webkit-transform: none; 
    1706         transform: none; 
    1707         width: 100%; 
    1708     } 
    1709 } 
    1710  
    17111693.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ 
    17121694    background-color: rgba(34, 34, 34, 0.5); 
     
    17431725    -webkit-transform: translateX(-50%) translateY(0); 
    17441726    transform: translateX(-50%) translateY(0); 
     1727} 
     1728 
     1729/* For browsers that support 'object-fit' */ 
     1730@supports ( object-fit: cover ) { 
     1731    .has-header-image .custom-header-media img, 
     1732    .has-header-video .custom-header-media video, 
     1733    .has-header-video .custom-header-media iframe, 
     1734    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { 
     1735        height: 100%; 
     1736        left: 0; 
     1737        -o-object-fit: cover; 
     1738        object-fit: cover; 
     1739        top: 0; 
     1740        -ms-transform: none; 
     1741        -moz-transform: none; 
     1742        -webkit-transform: none; 
     1743        transform: none; 
     1744        width: 100%; 
     1745    } 
    17451746} 
    17461747 
Note: See TracChangeset for help on using the changeset viewer.