Colorlib
Colorlib.com est un site en langue anglaise qui propose des thèmes WordPress gratuits ou payants. Dans cette article je vais m’attacher à vous expliquer comme corriger une erreur d’affichage dans leur thème phare Sparkling.
Le thème sparkling
Sparkling est un thème en Flat Design gratuit disponible directement sur le répertoire WordPress.org. Ce thème est développé à l’aide du framework Bootstrap 3, il est donc optimisé pour tous les appareils mobiles tels que iPad, iPhone, Android et Windows Phone. De plus, un slider conçu à partir de FlexSlider agrémente la page d’accueil et met le contenu le plus important en avant. Ce thème est facilement personnalisable grace au customizer de wordpress.
Défaut d’affichage du menu sous IE et Edge
Mais malgré tous ces atouts le thème a un problème d’affichage sous IE et Edge. En effet le menu principale du header présente un défaut et ne s’affiche pas correctement. Après avoir cherché pendant longtemps la solution, jusqu’à ce que le thème soit mis à jour, je la partage avec vous ici.
La pseudo class :focus-within
Le thème créé par Colorlib présente un problème de conception majeur : il utilise dans sa dernière version la pseudo class :focus-within. Cette pseudo-classe s’applique lorsqu’un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu’on clique sur un champ d’un formulaire). Cette pseudo-classe s’applique également aux descendants de l’élément ciblé.
Pour plus d’information sur cette pseudo classe je vous conseille la lecture de cet article : La Pseudo Classe :Focus-within.
Comme vous pouvez le constater à la fin de l’article, cette pseudo classe pose un problème de compatibilité avec Edge et IE qui ne fournissent aucun support pour le moment.
Le problème ne serait pas important si IE et Edge se contentaient de pas interpréter le seul sélecteur qui utilise cette pseudo classe. Malheureusement, IE et Edge n’interprètent tout simplement pas le bloc entier des sélecteurs où :focus-within est présent.
Les correction à apporter au thème
La seule solution pour régler le problème d’affichage est donc de séparer le bloc de sélecteur en deux partie, une partie que IE et Edge interprèteront et une autre qui contiendra la pseudo classe :focus-within qu’ils refuseront d’interpréter. Pour cela il faudra créer un thème enfant au thème Sparkling en reprenant dans le fichier styles.css tous les blocs contenant la pseudo classe :focus-within et en les divisant en deux.
Si vous ne savez pas comment créer un thème enfant je vous recommande la fiche explicative de wordpress.org. Mais voici à quoi devra ressembler le fichier fonctions.php
Voici maintenant le fichier style.css avec tous les éléments repris.
Le truc en plus : meilleur gestion des polices Google
Comme vous pouvez le constater, le thème Sparkling fait appel à des polices Google Fonts en bonus voici comment améliorer le temps d’affichage de votre site (vous pouvez utiliser cet outil gratuit pour mesurer votre score : GTmetrix). En effet si vous mesurez votre score sur PageSpeed Insights de Google, vous remarquerez que l’une des recommandation est de « s’assurer que le texte reste visible pendant le chargement des polices Web ». Les polices du thème Sparkling sont chargées par le fichier fonctions.php du thème parent et plus particulièrement par la function sparkling_scripts (lignes 308 à 316 du fichier functions.php)
Voici comment ne pas charger les scripts du thème parent et les remplacer par les scripts du thème enfant en ajoutant au chargement des polices Google le paramètres display=swap. Si vous souhaitez en savoir plus à ce sujet je vous conseille la lecture de cet article concernant le paramètre display des polices en CSS.
Téléchargement du thème enfant
Si vous le souhaitez, vous pouvez télécharger ici les fichiers du thème enfant de Sparkling complet. N’hésitez pas à me laisser vos remarques en commentaires.
