Holmes : une détection d'erreurs HTML élémentaires, Watson !

FirePrawn · 21/02/2013, 11h11

Une simple feuille de style CSS
Pour mettre en évidence les erreurs de validation des éléments HTML

On a souvent des surprises une fois une page terminée lorsque l'on décide de la passer au validateur W3C.
Vous pouvez maintenant éviter ces surprises en repérant en temps réel les erreurs les plus communes de votre code HTML !

Holmes est une feuille de style CSS qui permet un diagnostic de vos éléments HTML.
Pour utiliser la validation en temps réel rien de plus simple !
Il vous suffit simplement d'inclure la feuille de style CSS et d'ajouter une classe sur votre balise <body> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body class="holmes-debug">

Après ça, vous disposez de trois codes couleur différents : une bordure rouge pour signaler les erreurs, une bordure jaune pour signaler les avertissements (mauvais usage par exemple) et enfin une bordure gris foncé pour signaler les éléments dépréciés.
De plus, un tooltip apparait au survol d'un élément signalé par un des trois codes couleur contenant une explication de l'erreur.

Vous pourrez donc désormais valider vos pages au fur et à mesure du développement.
Attention bien sûr à retirer Holmes lorsque vous publiez votre site en ligne

Télécharger Holmes.

Source : thechangelog.com

Et vous ?

Vous préoccupez-vous de la validation W3C de vos pages Web ?

Avez-vous déjà utilisé une méthode similaire pour simplifier le repérage d'erreurs dans votre code HTML ?

rodolphebrd · 21/02/2013, 11h33

Super!
Je vais tester de ce pas.

Merci.

Torgar · 21/02/2013, 11h36

Pour ma part j'utilise un plugin Firefox pour faire ça : Total Validator.

Bon certes, il m'affiche pas les éléments incriminés directement sur la page mais il permet de voir en temps réel (icônes en bar d'état) les fautes et affiche aussi la cause et un exemple de bonne pratique.

Et quand j'ai besoin d'une vérification supplémentaire j'utilise les services en ligne du W3C. Ainsi, je valide HTML et CSS.

C'est intéressant pour ceux qui n'ont pas de navigateur à plugin ou dont le plugin n'est pas disponible.

rodolphebrd · 21/02/2013, 19h19

Je viens de tester et c'est un gain de temps énorme.

Merci pour la ressource.

21/02/2013, 11h11	#1
FirePrawn Responsable (X)HTML/CSS Sébastien Germez Ingénieur réalisateur Inscription : mars 2011 Messages : 2 646 Détails du profil Informations personnelles : Nom : Sébastien Germez Âge : 25 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 2 646 Points : 20 627 Points : 20 627	Holmes : une détection d'erreurs HTML élémentaires, Watson ! Une simple feuille de style CSS Pour mettre en évidence les erreurs de validation des éléments HTML On a souvent des surprises une fois une page terminée lorsque l'on décide de la passer au validateur W3C. Vous pouvez maintenant éviter ces surprises en repérant en temps réel les erreurs les plus communes de votre code HTML ! Holmes est une feuille de style CSS qui permet un diagnostic de vos éléments HTML. Pour utiliser la validation en temps réel rien de plus simple ! Il vous suffit simplement d'inclure la feuille de style CSS et d'ajouter une classe sur votre balise <body> : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <body class="holmes-debug"> Après ça, vous disposez de trois codes couleur différents : une bordure rouge pour signaler les erreurs, une bordure jaune pour signaler les avertissements (mauvais usage par exemple) et enfin une bordure gris foncé pour signaler les éléments dépréciés. De plus, un tooltip apparait au survol d'un élément signalé par un des trois codes couleur contenant une explication de l'erreur. Vous pourrez donc désormais valider vos pages au fur et à mesure du développement. Attention bien sûr à retirer Holmes lorsque vous publiez votre site en ligne Télécharger Holmes. Source : thechangelog.com Et vous ? Vous préoccupez-vous de la validation W3C de vos pages Web ? Avez-vous déjà utilisé une méthode similaire pour simplifier le repérage d'erreurs dans votre code HTML ? __________________ Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez-moi ! Avant toute chose : lire le mode d'emploi du forum et ses règles. Je ne réponds pas aux questions techniques en MP.
	30

21/02/2013, 11h33	#2
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 611 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 611 Points : 934 Points : 934	Super! Je vais tester de ce pas. Merci.
	00

21/02/2013, 11h36	#3
Torgar Rédacteur/Modérateur Jérémy .B. Développeur Web Inscription : août 2007 Messages : 1 777 Détails du profil Informations personnelles : Nom : Jérémy .B. Âge : 27 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 1 777 Points : 7 042 Points : 7 042	Pour ma part j'utilise un plugin Firefox pour faire ça : Total Validator. Bon certes, il m'affiche pas les éléments incriminés directement sur la page mais il permet de voir en temps réel (icônes en bar d'état) les fautes et affiche aussi la cause et un exemple de bonne pratique. Et quand j'ai besoin d'une vérification supplémentaire j'utilise les services en ligne du W3C. Ainsi, je valide HTML et CSS. C'est intéressant pour ceux qui n'ont pas de navigateur à plugin ou dont le plugin n'est pas disponible. __________________ Je ne suis pas schizophrène, nous sommes unanime !!! ► Pensez à la balise code, au si c'est le cas et au à ceux qui vous ont aidé. ► Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous ! Créer des colonnes de même hauteur en CSS Glossaire CSS Les bordures en CSS3 Les transitions en CSS3
	00

21/02/2013, 19h19	#4
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 611 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 611 Points : 934 Points : 934	Je viens de tester et c'est un gain de temps énorme. Merci pour la ressource.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email