Alternative IE / Edge aux overlays du Divi Builder

Si vous utilisez le Divi Builder vous connaissez sûrement l’option « Fondu de l’image de fond » (ou « Image blend mode » en anglais) qui permet d’appliquer à un élément (une section par exemple) une couleur de fond en superposition de l’image de fond.

Je l’utilise également pour des projets clients, et elle permet de faire de jolis effets sur des images sans forcément passer par l’étape Photoshop, bien pratique.

Mais avez-vous remarqué que cette option ne s’affiche pas sur les navigateurs Edge et Internet Explorer ?

Outre le fait que l’on perd un élément de style, cela cause surtout de gros problèmes d’accessibilités si des éléments de texte sont placés sur la section.
Par exemple ici, avec un fond noir à 80% d’opacité et le fondu réglé sur « multiplié » mon titre est lisible :

section avec fondu "multiplié"

Mais si l’option n’est plus appliquée, le titre est complètement illisible :

section sans fondu "multiplié"

Et c’est exactement ce qui s’affiche sur les navigateurs Edge et Internet Explorer.
En effet le Divi Builder utilise la propriété CSS background-blend-mode, qui n’est pas supportée par ces deux navigateurs. Résultat, seul le background-image est affiché.

Je n’ai pas trouvé de solutions alternatives sur les Internet, aussi j’ai créé un petit bout de JavaScript qui, sur les navigateurs ne supportant pas la propriété background-blend-mode, va créer un élément HTML supplémentaire et lui appliquer la couleur de fond sélectionnée dans les options du builder.
Le résultat n’est pas exactement le même que celui rendu sur Chrome ou Firefox, mais cela permet de conserver la lisibilité des éléments.

Voici le code JavaScript a insérer dans votre thème enfant :

/* DIVI OVERLAY FALLBACK IE / EDGE */
// detect if background-blend-mode property supported
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
if(typeof supportsBackgroundBlendMode === "undefined") {
     // select all element with background set
    var elementsWithBackground = document.querySelectorAll('.et_pb_with_background');

    if( elementsWithBackground ) {
        // transform as array for loop
        elementsWithBackground = Array.prototype.slice.call(elementsWithBackground);
        // loop on each element with background
        elementsWithBackground.forEach( function( element ) {
            var blendMode = window.getComputedStyle(element).backgroundBlendMode;

            if( typeof blendMode === 'undefined' ) {
                // create empty element
                var overlayDiv = document.createElement('div');
                // give it the overlayDiv class (see CSS)
                overlayDiv.className = "overlayDiv";
                // select the first child of the section
                var theFirstChild = element.firstChild;
                // insert overlay div just before the first child
                element.insertBefore(overlayDiv, theFirstChild);
                // set overlay div background color from the initial overlay backgroun color
                overlayDiv.style.backgroundColor = window.getComputedStyle(element).backgroundColor;
            }
        });
    }
}

Et cette règle CSS à placer dans votre fichier de style :

/* IE / EDGE */
.overlayDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

N’hésitez pas à me faire vos retours en commentaire, est-ce que la solution fonctionne chez vous ?

 

Crédit photo de couverture : Cafepampas sur Pixabay.

Vous avez des questions ?
Contactez-moi :
Me contacter

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nom *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

elementum efficitur. amet, id ipsum sed at