Dépannage des CSS

Vous avez créé des feuilles de style CSS personnalisées pour vos formulaires, mais vous n'avez pas pu voir ces styles lorsque vous avez consulté votre site ? Il existe quelques problèmes courants qui peuvent empêcher les feuilles de style CSS d'apparaître correctement sur un site.

Ce tutoriel passe en revue les options permettant de déterminer pourquoi votre CSS ne fonctionne pas et propose 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 afin d'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 le fait de vider le cache de votre navigateur ne semble pas fonctionner, voici quelques stratégies supplémentaires à essayer :

Essayer un autre navigateur

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

Demander à votre hébergeur s'il dispose d'un cache

Certains hébergeurs proposent une mise en cache de votre site directement sur leurs serveurs, c'est-à-dire là où sont stockés les fichiers de votre site. Si vous n'êtes pas sûr, vous pouvez contacter votre hébergeur pour lui demander s'il met votre site en cache et, si c'est le cas, lui demander de vider ce cache pour vous.

Essayer une autre source Internet

Parfois, le simple fait de charger votre site à partir d'une source internet différente peut permettre de contourner un cache existant. Si vous disposez d'un appareil mobile avec des données disponibles, le moyen le plus simple est de désactiver temporairement le WiFi sur votre appareil et de recharger la page.

Format CSS non valide

Les feuilles de style CSS doivent être écrites dans un format spécifique pour qu'un navigateur puisse les comprendre. Il existe de nombreux outils en ligne pour vérifier la validité de vos feuilles de style CSS, notamment le validateur CSS de W3School. Il s'agit d'une excellente option si vous avez beaucoup de feuilles de style CSS personnalisées et au moins un peu d'expérience dans la création de feuilles de style CSS.

Toutefois, si vous n'utilisez qu'une petite quantité de feuilles de style CSS, il peut parfois être plus facile de procéder à une vérification rapide du format. 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 cette feuille de style CSS est valide ou "lisible" par les navigateurs :

• Format correct du sélecteur : Si le sélecteur comprend plusieurs parties, il doit être écrit de "plus grand" à "plus petit". Dans l'exemple ci-dessus, div.wpforms-container-full est le plus grand élément conteneur dans le code HTML, tandis que .wpforms-form se trouve à l'intérieur de ce conteneur. Le plus petit et dernier élément du sélecteur, .wpforms-titleest contenu à l'intérieur de ces deux autres éléments. Dans un autre ordre, le navigateur ne pourra pas lire ce sélecteur.
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• Point virgule et point-virgule : Veillez à insérer 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 l'ensemble, CSS n'est pas très regardant sur l'espace blanc (qui comprend les tabulations et les espaces). Les unités constituent toutefois une exception à cette règle. 26px fonctionnera, par exemple, alors que 26 px ne le fera pas.

Pour plus d'informations sur l'écriture 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 jeux de styles, vous constaterez souvent que vos styles personnalisés sont en "concurrence" avec 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 formulaires 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 parce qu'ils ont un sélecteur plus spécifique. Vous devrez donc utiliser le même sélecteur, plus long, que le style par défaut pour votre feuille de style CSS personnalisée :

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 l'option !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 toutefois important de noter que l'ajout de l'élément !important ne fonctionne pas toujours. Essayons cette approche pour le CSS dont nous avons parlé dans le dernier exemple :

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

Dans cette situation, le navigateur préfère la spécificité de la feuille de style CSS par défaut à celle de la feuille de style CSS par défaut. !important de sorte que ce CSS ne sera pas appliqué à votre site.

Prenons un exemple où l'ajout de l'élément !important règle fait travail. Par défaut, l'astérisque (*) qui marque un champ "obligatoire" dans WPForms est rouge :

Voici la feuille de style 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 le sélecteur complet du CSS ci-dessus, ou nous pourrions utiliser un sélecteur court et ajouter l'élément !important comme dans cet extrait CSS :

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

Il peut être difficile de savoir si le !important fonctionnera, vous devrez donc probablement faire un essai et le tester.

Voilà, c'est fait ! Nous avons couvert les stratégies de dépannage les plus courantes à utiliser lorsque le CSS ne fonctionne pas. Si vous avez toujours des difficultés à styliser vos WPForms, veuillez contacter le support pour que nous puissions vous aider.

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