Dépannage CSS

Avez-vous créé du CSS personnalisé pour vos formulaires, mais n’avez pas pu voir ces styles en consultant votre site ? Il existe quelques problèmes courants qui peuvent empêcher le CSS de s’afficher correctement sur un site.

Ce tutoriel vous guidera à travers les options de dépannage pour comprendre pourquoi votre CSS ne fonctionne pas et proposera des solutions possibles.

Mise en cache du navigateur

Les navigateurs mettent souvent en cache ou stockent temporairement les ressources des sites Web que vous visitez pour améliorer la vitesse de chargement. Certains sites utilisent également des plugins pour une mise en cache supplémentaire. Souvent, lorsque vous ne voyez pas vos styles personnalisés sur votre site, c’est parce que le navigateur ou un autre système a mis en cache une ancienne version de votre site.

Voici un tutoriel qui vous guidera à travers les principales étapes pour vider le cache de votre site et de vos plugins.

Si la suppression de la mise en cache de votre navigateur ne semble pas fonctionner, voici quelques stratégies supplémentaires à essayer :

Essayer un autre navigateur

Chaque navigateur conserve sa propre mise en cache des sites que vous visitez. En ouvrant votre site dans un navigateur différent (ou en mode privé proposé par certains navigateurs, comme la fenêtre de navigation privée de Chrome), vous pouvez souvent voir une version non mise en cache de votre site.

Demander à votre hébergeur s’il a une mise en cache

Certains hébergeurs fournissent une mise en cache pour votre site directement sur leurs serveurs, où sont stockés les fichiers de votre site. Si vous n’êtes pas sûr, vous voudrez peut-être contacter votre hébergeur pour lui demander s’il met votre site en cache et, s’il le fait, lui demander de vider ce cache pour vous.

Essayer une source Internet différente

Parfois, le simple fait de charger votre site via une source Internet différente peut aider à contourner une mise en cache existante. Si vous avez un appareil mobile avec des données disponibles, le moyen le plus simple de le faire est de désactiver temporairement le WiFi sur votre appareil et de recharger la page.

Format CSS invalide

Le CSS doit être écrit dans un format spécifique pour qu’un navigateur puisse le comprendre. Il existe de nombreux outils en ligne pour vérifier que votre CSS est valide, y compris le Validateur CSS de W3School. C’est une excellente option si vous avez beaucoup de CSS personnalisé et un peu d’expérience préalable dans la création de CSS.

Si vous n’utilisez qu’une petite quantité de CSS, cependant, il peut parfois être plus facile de faire une vérification rapide du format vous-même. Commençons par examiner un extrait de CSS valide :

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Voici pourquoi ce CSS est valide ou « lisible » par les navigateurs :

• Format de sélecteur correct : Si le sélecteur comprend plusieurs parties, il doit être écrit du « plus grand » au « plus petit ». Dans l’exemple ci-dessus, div.wpforms-container-full est l’élément conteneur le plus grand dans le HTML, tandis que .wpforms-form se trouve à l’intérieur de ce conteneur. Le plus petit élément et le dernier du sélecteur, .wpforms-title, est contenu à l’intérieur de ces deux autres éléments. Dans tout autre ordre, le navigateur ne pourra pas lire ce sélecteur.
• Deux accolades : Il doit y avoir une accolade ouvrante ({) juste après le sélecteur CSS et à la fin de la liste des propriétés et des valeurs. Oublier cette accolade fermante (}) est une erreur courante, et empêchera généralement tout le CSS en dessous d’être affiché dans le navigateur.
• Deux-points et point-virgule : Assurez-vous d’inclure un deux-points (:) entre chaque propriété et valeur CSS, et un point-virgule (;) après chaque valeur afin que le navigateur puisse lire votre CSS (par exemple, font-size: 26px;).
• Utilisation correcte des espaces : Dans la plupart des cas, le CSS n’est pas très regardant sur les espaces (qui incluent les tabulations et les espaces). Une exception à cela, cependant, concerne les unités. 26px fonctionnera, par exemple, tandis que 26 px ne fonctionnera pas.

Pour plus d’informations sur la rédaction de CSS avec une syntaxe correcte, vous pouvez consulter ce tutoriel de W3Schools.

Spécificité CSS

Étant donné que tous les thèmes et la plupart des plugins contiennent leurs propres ensembles de styles, vous constaterez souvent que vos styles personnalisés doivent « concurrencer » les styles existants. Dans de telles situations, le sélecteur CSS le plus spécifique l’emportera presque toujours sur un sélecteur moins spécifique.

Par exemple, voici le CSS par défaut qui définit la taille de la police des titres de formulaire dans WPForms :

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Essayons de remplacer ce CSS pour agrandir la police. Il peut être tentant d’utiliser un sélecteur CSS court comme celui-ci :

.wpforms-title {
    font-size: 40px;
}

Ce CSS est valide, mais ses styles ne seront pas appliqués dans le navigateur. Les styles par défaut seront appliqués à la place car ils ont un sélecteur plus spécifique. Vous devriez plutôt utiliser le même sélecteur plus long que le style par défaut pour votre CSS personnalisé :

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Utilisation de !important en CSS

Dans certaines situations, vous pouvez forcer un extrait de CSS moins spécifique à fonctionner en incluant la règle !important avant le point-virgule. Il est toujours préférable d’essayer d’abord un sélecteur plus spécifique (comme décrit ci-dessus), mais cela peut parfois offrir une solution rapide.

Il est important de noter, cependant, que l’ajout de la règle !important ne fonctionnera pas toujours. Essayons cette approche pour le CSS dont nous avons discuté dans le dernier exemple :

.wpforms-title {
    font-size: 40px !important;
}

Dans cette situation, le navigateur préfère la spécificité du CSS par défaut à la règle !important, donc ce CSS ne sera pas appliqué à votre site.

Examinons un exemple où l’ajout de la règle !important fonctionne *effectivement*. Par défaut, l’astérisque (*) qui marque un champ « requis » dans WPForms sera rouge :

Voici le CSS qui crée ce style (#ff0000 est un code hexadécimal pour la couleur rouge) :

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Nous voulons que ces astérisques apparaissent en bleu à la place. Nous pourrions copier ce sélecteur complet du CSS ci-dessus, ou nous pourrions utiliser un sélecteur court et ajouter la règle !important, comme dans cet extrait de CSS :

.wpforms-required-label {
    color: #007acc !important;
}

Il peut être difficile de savoir si la règle !important fonctionnera ou non, vous devrez donc probablement essayer et tester.

C'est tout ! Nous avons abordé les stratégies de dépannage les plus courantes à utiliser lorsque le CSS ne fonctionne pas. Si vous rencontrez toujours des problèmes pour styliser vos WPForms, veuillez contacter le support afin que nous puissions vous aider.

Ensuite, souhaitez-vous personnaliser davantage vos formulaires ? Consultez notre tutoriel sur la personnalisation des champs de formulaire individuels pour plus de détails et d'exemples.