Certains comportements inattendus sur une enquête Web (affichage incorrect, enquête toujours visible après désactivation, modifications non prises en compte)peuvent être liés à la présence de CSS invalide sur votre site. Cet article vous explique comment le vérifier et y remédier.
Pourquoi le CSS peut-il impacter vos enquêtes ?
Les enquêtes Skeepers s'intègrent directement dans votre site et interagissent avec le code HTML, CSS et JavaScript déjà présents. Si le navigateur rencontre des erreurs CSS importantes, le comportement de certains éléments de la page peut être impacté :
- affichage incorrect des composants ;
- superposition d'éléments ;
- problèmes de rendu ;
- comportements inattendus des campagnes Web.
Les standards CSS évoluent continuellement. Il est donc important de s'assurer régulièrement que les feuilles de style utilisées sur votre site restent conformes aux standards actuels du web.
Un code CSS invalide peut bloquer la mise à jour d'une diffusion et empêcher l'application des dernières modifications, même si la diffusion semble valide. Validez toujours votre code CSS avant de l'ajouter ou de le modifier.
Personnaliser le design d'une diffusion
- Depuis l’onglet Diffusion, sélectionnez la diffusion que vous souhaitez personnaliser en cliquant directement sur la ligne correspondante.
- Cliquez sur
afin d’accéder à l’interface de modification.
-
L’interface de design s’ouvre alors :
- Un menu de personnalisation est affiché sur la gauche.
- Un aperçu en temps réel de vos modifications apparaît sur la droite.
-
Accédez à votre CSS en cliquant sur l'icône
située à droite.
Pour avoir plus d'informations sur la personnalisation du design d'une diffusion, consultez l'article dédié.
Accéder aux styles avancés du connecteur
- Depuis l’onglet Diffusion de votre campagne, sélectionnez la diffusion que vous souhaitez personnaliser en cliquant sur
Editer une diffusion pour ouvrir la diffusion que vous souhaitez personnaliser.
-
Dans l'onglet
, sélectionnez l'action associée à la diffusion.
-
Cliquez sur Paramètres avancés afin d'accéder aux options de personnalisation avancées du format de diffusion (bouton, pop-in, etc.).
Comment vérifier si votre CSS est valide ?
Le W3C met à disposition un outil gratuit de validation CSS : Validateur CSS W3C
Cet outil permet d'identifier les erreurs de syntaxe, les propriétés incorrectes, les valeurs non reconnues et les règles obsolètes ou incompatibles.
Méthode 1: Valider une URL
- Ouvrez le validateur CSS du W3C.
- Sélectionnez Validate by URI.
- Saisissez l'URL de votre page.
- Lancez l'analyse.
- Consultez les erreurs détectées.
Méthode 2: Valider votre code CSS
- Ouvrez le validateur CSS du W3C.
- Sélectionnez Validate by Input.
- Copiez-collez votre CSS.
- Cliquez sur Check.
- Corrigez les erreurs remontées.
Que faire si des erreurs sont détectées ?
- Corrigez les erreurs CSS identifiées.
- Publiez les modifications sur votre site.
- Videz le cache du navigateur si nécessaire.
- Testez à nouveau l'affichage de l'enquête.
- Dans plusieurs cas, la correction des erreurs CSS a permis de résoudre les comportements constatés sur les enquêtes Web.
La correction peut prendre quelques minutes avant d'être appliquée.
Bonnes pratiques
- Vérifier régulièrement la validité du CSS après chaque mise à jour du site.
- Éviter l'utilisation de règles CSS obsolètes.
- Tester les modifications sur un environnement de préproduction avant la mise en production.
- Contrôler les éventuelles erreurs signalées par le validateur W3C.
- Si vous utilisez des environnements de production et de préproduction, créez une diffusion dédiée pour chacun. Cela permet d'éviter les problèmes de mise en cache et de propagation, tout en garantissant des tests plus fiables et des mises en production plus sécurisées.
- Privilégiez la navigation privée pour tester vos diffusions et éviter les biais liés aux données de navigation.
Quand contacter le support Skeepers ?
Si votre CSS est valide et que le problème persiste après vos vérifications, contactez notre équipe en fournissant les éléments suivants :
- l'URL concernée ;
- l'ID de la diffusion ;
- les navigateurs impactés ;
- si possible, des captures d'écran ou vidéos du comportement observé.