Mais ça ne valide pas

J'ai une petite bête d'animaux que je vais partager avec vous. Les nuits où je termine un nouveau didacticiel CSS3 pour Nettuts + - généralement lorsque j'écoute mes chansons préférées de Biebster - je clique sur Publier, puis j'attends de voir le temps que cela prendra avant qu'un lecteur laisse un commentaire contenant la phrase., "Mais ça ne valide pas."


Merci pour l'entrée!

Voici la chose à propos de la validation: c'est un outil. Rien de plus; rien de moins; juste un outil.

Alors voici la chose à propos de la validation: c'est un outil. Rien de plus; rien de moins; juste un outil. À première vue, cependant, cela a du sens, n'est-ce pas? Nous assimilons la validation aux meilleures pratiques, un peu comme JavaScript et JSLint. Dans le même ordre d'idées, pourquoi ne voudrions-nous pas obtenir un score parfait de 100%? Eh bien c'est la chose: nous faisons; cependant, des problèmes se posent lorsque la partition prime sur notre propre logique.


Valider vos dessins

Pour tester votre balisage et vos feuilles de style, vous pouvez visiter:

  • W3C CSS Validator
  • Validation de balisage du W3C

Vous pouvez également installer le module utile Firefox, Web Developer, qui propose, entre autres, les liens pratiques "Validate HTML" et "Validate CSS", ainsi que la possibilité de valider même vos fichiers locaux..



À ce stade, un rapport sera généré, répertoriant tous les les erreurs que le validateur rencontre. Mais c'est là que réside le problème.


La validation est-elle sans importance?

Absolument pas. J'imagine que, en particulier pour ceux qui se lancent dans cette industrie, l'expression "les sites Web ne nécessitent pas de validation" les rend confus..

«La validation est votre système d’alerte rapide qui vous permet d’introduire dans vos pages des bogues susceptibles de se manifester de manière intéressante et difficile à déterminer. Lorsqu'un navigateur rencontre un code HTML invalide, il doit deviner de manière éclairée ce que vous voulez faire. différents navigateurs peuvent proposer différentes réponses. "
- Communauté de développeurs Opera

Cela dit, le score final est, en fait,, sans importance.

Rappelez-vous les jours où nous (ou du moins certains d’entre nous) collions ces boutons de validation au bas de page de nos sites? Comme c'est drôle; pour qui étaient-ils? Les visiteurs du site? Haha; J'espère que non! Mais voici la chose: à l'époque, la validation n'était pas vraiment un la norme. Nan; En fait, si vous avez même pris la peine de valider votre code HTML et CSS, vous étiez un respectant les normes, mec tranchant! Parfois, il est facile d'oublier que les normes Web sont un concept relativement nouveau..

Valider avant de demander

Il y a des années, lorsque je participais auparavant à des forums CSS, cela n'échouait jamais: chaque fois qu'un nouveau membre demandait de l'aide sur un problème de mise en page étrange, notre première réponse était généralement du type "Ynotre site ne valide pas. Corrigez les erreurs, puis revenez nous voir s'il y a encore des problèmes."Souvent, des problèmes de mise en page étranges sont le résultat d’éléments non fermés, comme un div. Dans ces cas, la validation peut être d'une aide précieuse.

Alors qu'est-ce qui a changé? La validation n'est-elle plus nécessaire? Est-ce que HTML5 nous permet d’écrire des balises terribles sans hésiter? Le nouveau doctype HTML5 est-il imprégné de magie? Pas du tout. La validation est un outil utile qui nous permet de localiser les balises fermées manquées, les points-virgules supplémentaires, etc. Cela dit, le score final est, en fait, sans importance. Ce n'est pas un chiffre magique. À 100%, il contacte The Architect dans les coulisses et lui demande d'appliquer des points bonus à votre site Web. Ce score ne sert aucun objectif plus élevé que de vous fournir des commentaires. Il ne contribue ni à l'accessibilité, ni ne met en évidence les meilleures pratiques. En fait, le validateur peut induire en erreur, car il signale les erreurs ce ne sont pas des erreurs, loin de là. Le validateur HTML4 est rapidement devenu obsolète, mais heureusement, le W3C a un nouveau validateur HTML5 (encore expérimental) bien amélioré.

Maintenant, gardez à l'esprit que le balisage bien formé pouvez augmenter le référencement; cependant, il n'y a pas de corrélation spécifique entre le référencement et un score de validation.

HTML5 standardise de nombreuses fonctionnalités prises en charge par certains navigateurs depuis des années, telles que les attributs personnalisés (via le navigateur). Les données- préfixe) et les attributs ARIA, qui échouent au validateur HTML4 du W3C.

Lorsque vous testez de nouveaux modèles, assurez-vous de vérifier les résultats expérimentaux. Validateur HTML5 option. Avec cette option, vous pouvez utiliser les propriétés CSS3 prises en charge, personnalisées Les données- attributs, et plus.


Comment environ 75% ou plus?

Jamais, jamais, jamais compromettre l'utilisation des dernières techniques CSS3 et sélecteurs pour des raisons de validation.

Et si nous visions au moins 75% des points? Je comprends la pensée, comme je le pensais aussi à un moment donné; mais, encore une fois, ce n'est pas pertinent. Lors de la validation, votre objectif principal devrait être de déterminer où vous avez commis des erreurs. La validation n'est pas un jeu. Même s'il peut être amusant de tester vos compétences pour déterminer votre score, gardez toujours à l'esprit que ce n'est pas grave. Et ne jamais, jamais, jamais compromettre l'utilisation des derniers doctype, techniques CSS3 et sélecteurs pour des raisons de validation.

Le secret des navigateurs est qu'ils n'effectuent jamais de validation HTML sur une DTD. Le doctype que vous avez placé en haut du document fait basculer l'analyseur dans un mode de fonctionnement particulier, mais aucune opération ne nécessite le téléchargement du doctype et la vérification de la correspondance du code. Qu'est-ce que ça veut dire? Cela signifie qu'un analyseur syntaxique de base gère le HTML, avec des exceptions spécifiées pour les balises à fermeture automatique et les éléments de blocage par rapport aux éléments en ligne (et je suis sûr que d'autres situations également).
- Nicholas Zakas


Qu'est-ce qui ne valide pas

En fonction des options que vous spécifiez avant de vérifier vos conceptions (HTML4 vs HTML5), le validateur hurle comme un bébé lorsqu'il tombe sur:

  • Hacks du navigateur
  • Préfixe du vendeur
  • Attributs personnalisés
  • Erreurs réelles, telles que des éléments non fermés
  • Rôles ARIA

Ahh, hacks du navigateur… devriez-vous les utiliser? La réponse à cette question a été débattue à mort, et dépasse certainement le cadre de ce tutoriel; Cependant, gardez à l'esprit que, par exemple, l'utilisation de IE6-underscore-hack échouera à la validation..

Pour cette raison, de nombreux concepteurs préfèrent utiliser non-rupture techniques à la place.

Alors:

 / * Échec de la validation * / #myElement _position: relative; / * cible uniquement IE6 * /

Devient:

 / * Validation passée * / * html #myElement position: relative; / * cible IE6 * /

La raison derrière cette ligne de pensée est la suivante: que se passera-t-il si, à l'avenir, Internet Explorer 10 afficherait également les propriétés précédées d'un trait de soulignement? Dans des cas comme celui-là, votre style IE6 uniquement (pensez-vous) sera également appliqué à IE10 et au-delà, vraisemblablement. Or, la vérité est que cela ne se produirait jamais, car cela briserait un grand nombre de sites Web. Cela dit, cette méthode de ciblage par navigateur est en effet un hack. Sauf dans des cas rares ou rares, il est préférable d'utiliser une feuille de style conditionnelle ou une forme de détection de fonctionnalité pour cibler des navigateurs spécifiques..

Préfixes du vendeur

Bien que nous puissions tous convenir que l’application de plusieurs préfixes de fournisseurs à des propriétés, tout cela pour obtenir des angles arrondis, est extrêmement fastidieuse, vous devriez remercier vos chanceux stars que les éditeurs de navigateurs ont expérimentés avec ces technologies avant de les recommander officiellement..

Eu webkit pas expérimenté avec les dégradés CSS, et si Mozilla n’avait pas amélioré la syntaxe suggérée, les dégradés ne seraient pas aussi largement pris en charge par la génération actuelle de navigateurs modernes qu’aujourd’hui. Vous voyez, les navigateurs jouent un rôle important dans l’avenir du Web..

 .box background: # 666; fond: -moz-linear-gradient (haut, noir, blanc); arrière-plan: - webkit-gradient (linéaire, gauche en haut, gauche en bas, de (noir) à (blanc)); fond: linéaire-dégradé (haut, noir, blanc); 

Cela étant dit, l'utilisation de ces préfixes de vendeurs entraînera l'échec de la validation de vos feuilles de style. Mais ça va; ne laissez pas cela vous inquiéter un peu.

Apprenez les règles pour savoir comment les enfreindre correctement.

Malheureusement, même maintenant, de nombreux concepteurs choisissent d’utiliser, dans notre exemple ci-dessus, des images pour créer des dégradés, ne serait-ce que dans le but de ramener leur score de validation à 100%. Si vous tombez dans ce camp: vous le faites mal.


Utiliser la validation…

  • Pour tester des éléments HTML non fermés
  • Pour vérifier les fautes de frappe
  • Pour vous assurer que vous n'avez omis aucun point-virgule
  • Pour la tranquillité d'esprit

  • La validation n'est pas…

    • Un jeu. Ne perdez pas de temps à atteindre un score de 100%, lorsque vous savez exactement ce que vous faites. Cependant, utilisez-le pour signaler vos erreurs.
    • Un tout englobant vérificateur. Même s'il vérifie les erreurs, il ne signale pas les mauvaises pratiques, les problèmes d'accessibilité, etc..
    • A utiliser comme excuse pour ne pas adopter les dernières techniques CSS3. Plus vous vous dites longtemps: "J'utiliserai ceci dans quelques années…" plus vous serez en retard..

    Conclusion

    Si vous ne prenez qu'une chose de cet article, rappelez-vous que la validation est simplement un outil. Dès que vous compromettez votre propre logique et vos propres techniques pour apaiser un validateur et obtenir un score dénué de sens, il cesse d’être un outil. Cela dit, utilisez-le et utilisez-le souvent!