Vérifiez le fichier HTML pour les erreurs. Vérification de la validité du CSS à l'aide du service de validation CSS. Vérification des informations de domaine et d'adresse IP

Bonjour à tous!

Il est nécessaire de vérifier la validité du code HTML, car les robots de recherche ne voient que le code HTML. Pour cette raison, il est conseillé de mettre le code du site dans l'ordre complet. Des services en ligne spéciaux qui vérifient le code et signalent spécifiquement les erreurs nous y aideront.

L'un de ces services est validator.w3.org, qui est probablement le meilleur. Il est entièrement en anglais, donc certains peuvent avoir des problèmes pour l'utiliser, mais ne vous inquiétez pas : le validateur vous montrera à la fois le numéro de ligne et l'erreur elle-même.

Un code valide est un code qui répond à toutes les normes.

Pour le cours, vous aurez besoin du matériel suivant :

Le service en ligne mentionné ci-dessus vérifie le code HTML en ligne sur l'ensemble du site. Il vous suffit de spécifier le domaine de votre site et de cliquer sur le bouton « Vérifier », vous commencerez ainsi à vérifier le code HTML du site.

Le validateur fournit également une fonctionnalité très intéressante : vérifier les fichiers du site à partir d'un ordinateur local. À mon avis, cet outil sera utile à ceux qui créent des sites Web personnalisés. Avant de soumettre votre commande, vous devez tout vérifier, car vous voulez que les gens soient toujours satisfaits de votre travail. Vous pouvez vérifier les fichiers en allant dans l'onglet « Valider par téléchargement de fichier » :

Comment corriger les erreurs dans le code HTML ?

Le service W3c Validator m'a montré deux erreurs et m'a donné 8 avertissements. Je vais essayer de les réparer et vous montrer comment procéder.

Correction de l'erreur « Style d'élément non autorisé en tant qu'enfant de l'élément div dans ce contexte. (Suppression d'autres erreurs de ce sous-arbre.) ». Cette erreur m'indique que dans le code HTML, à savoir dans la balise

Il n'est pas nécessaire de spécifier des styles. Par conséquent, les styles écrits dans ce bloc
vous devez le transférer dans le fichier style.css et c'est tout.

Le validateur indique également où se trouve exactement l’erreur :


De cette façon, vous pouvez trouver et corriger les erreurs de code HTML. Mais les sites sont constitués non seulement de code de balisage, mais également de CSS, nous vérifions donc également les feuilles de style en cascade de la ressource Web.

Vérifier la validité du code CSS

Vous pouvez également vérifier la validité du code CSS dans le validateur W3c. Vous pouvez le faire en utilisant ce lien. Le principe de fonctionnement est le même : vous précisez l'URL du site, ou sélectionnez un fichier sur votre ordinateur et cliquez sur le bouton « Vérifier ».

Contrairement au même validateur HTML, le validateur CSS est en russe.

Erreurs et avertissements CSS

Lors de la vérification de la validité du code CSS, le service génère un grand nombre d'erreurs et d'avertissements. J'ai reçu 23 erreurs et jusqu'à 281 avertissements. À première vue, cela peut sembler beaucoup et peut même faire peur, mais la plupart de ces erreurs et avertissements s'affichent uniquement parce que le service ne connaît pas certaines propriétés qui s'appliquent aux différents navigateurs.

Dans mon cas, la plupart des 281 avertissements sont des propriétés CSS pour un affichage normal dans différents navigateurs :

Le service positionne ces balises comme « extension de fournisseur inconnue ». Par conséquent, si, lors de la vérification de vos fichiers CSS, vous constatez un grand nombre de ces erreurs, ne vous inquiétez pas. Tout va bien.

Je n’énumérerai pas les erreurs les plus courantes ni les moyens de les éliminer, car les solutions de chacun peuvent être différentes et vous devez examiner le code HTML lui-même pour comprendre ce qui se passe.

Si vous ne parvenez pas à résoudre une erreur, partagez le problème dans les commentaires de la leçon, nous trouverons peut-être une solution ensemble.

J'espère que les leçons publiées au cours de cette semaine vous ont été utiles et ont aidé à résoudre certains problèmes.

Eh bien maintenant, au revoir !

Article précédent
Article suivant

2016-12-29


Nous animons les boutons et vérifions le site pour la validité du code HTML et CSS

Bonjour cher visiteur !

Aujourd'hui, à l'aide de l'exemple d'une page Web créée, nous verrons comment vérifier la validité d'un site, c'est-à-dire sa conformité aux spécifications établies des langages HTML et CSS.

De plus, avant de tester, nous apporterons quelques modifications à la feuille de style CSS en termes de « revitalisation » des boutons de la barre latérale, où nous transformerons les boutons statiques en boutons interactifs qui changent d'apparence en fonction de leur état - passif, actif et enfoncé.

  • Rendre les boutons volumineux
  • Rendre les boutons interactifs
  • Une validation est-elle nécessaire ?
  • Comment vérifier la validité du code HTML
  • Comment vérifier la validité du code CSS
  • Fichiers sources du site

Rendre les boutons volumineux

Dans l’article précédent, nous avons conçu la zone de contenu principale en parfaite conformité avec la mise en page de la page principale. Dans le même temps, il y a actuellement des boutons dans la barre latérale qui sont statiques et ressemblent à un rectangle brun plat ordinaire avec des coins arrondis.

Vous trouverez ci-dessous un fragment d'une barre latérale avec de tels boutons.

Pour donner vie aux boutons, nous leur donnons d'abord du volume à l'aide de styles CSS. Et nous le ferons en utilisant la propriété de gradient linéaire, qui était auparavant utilisée lors de la conception des blocs de rotation, de recherche et d'abonnement.

On définit les valeurs du gradient linéaire comme suit :

1. Nous allons définir les nuances de couleurs de bas en haut, en commençant par une couleur plus foncée par rapport à la couleur principale du bouton. Pour déterminer quelle couleur utiliser au début du dégradé, nous utilisons un outil d'édition graphique, en l'occurrence Photoshop.

Pour ce faire, avec le document de mise en page de conception ouvert, vous devez sélectionner le « Sélecteur de couleurs », passer le curseur sur la zone requise du bouton, déterminer la couleur principale, puis utiliser les outils « Sélecteur de couleurs » pour sélectionner un couleur plus foncée de la même nuance brune. Dans notre cas, prenons la couleur avec la valeur "653939". La capture d'écran ci-dessous montre clairement comment cela peut être réalisé.


2. Ensuite, nous déterminerons la position d'arrêt du dégradé où la couleur initiale, plus foncée, deviendra la couleur principale. Nous placerons la position d'arrêt approximativement au milieu. En même temps, afin de rendre la couleur plus saturée, déplaçons un peu la position d'arrêt et déterminons sa valeur, disons, 70 % de la hauteur.

3. La dernière chose que vous devez faire pour attribuer des propriétés de dégradé est de définir une couleur plus claire que la couleur principale qui colorera les boutons en haut. Cela se fait de la même manière que lors de la détermination de la couleur initiale du dégradé. Dans ce cas, nous prendrons la valeur de cette couleur comme « b88686 ».

3. Sur la base des données obtenues, nous ajouterons un dégradé linéaire aux propriétés CSS des boutons précédemment générées.

    saisir: {

    hauteur :30px;

    marge inférieure :10px;

    rayon de frontière :5px;

    arrière-plan :#a76d6d;

    aligner le texte :centre;

    poids de la police :audacieux;

    couleur :#fff;

    flotter :droite;

    image de fond

On peut noter que lors de la détermination des couleurs extrêmes, les positions d'arrêt ne sont pas indiquées ici, puisque cela n'est pas nécessaire pour les valeurs 0% et 100%.

Maintenant, actualisons le navigateur et regardons le résultat.

Comme vous pouvez le constater, les boutons ont acquis un léger renflement. Vous pouvez maintenant commencer à les « faire revivre ».

Rendre les boutons interactifs

Afin de travailler pleinement avec les boutons, nous les rendrons interactifs, ce qui reflétera visuellement leurs trois états principaux : passif (le bouton est dans son état initial), actif (le curseur survole le bouton) et enfoncé (pendant que le curseur est en survol, le bouton de la souris est enfoncé et maintenu).

Et nous le ferons en utilisant une combinaison de propriétés d'ombre et de bordure. L'essence de cette technique est qu'en changeant la couleur de l'ombre et des bordures de différents côtés, vous pouvez simuler le changement d'état des boutons.

Nous allons d'abord faire cela pour l'état passif et essayer de le représenter de manière à ce que les boutons s'élèvent au-dessus de la surface.

Nous sélectionnerons les couleurs des bordures et des ombres de la même manière que dans les cas précédents.

Le code CSS après les ajouts appropriés ressemblera à :

    saisir: {

    hauteur :30px;

    marge inférieure :10px;

    rayon de frontière :5px;

    arrière-plan :#a76d6d;

    aligner le texte :centre;

    poids de la police :audacieux;

    couleur :#fff;

    flotter :droite;

    image de fond :gradient linéaire(vers le haut, #653939, #a76d6d 50%, #b88686);

    boîte ombre :2px 2px 4px 0px #422a2a;

    largeur de la bordure :2px;

    style de bordure :solide;

    couleur de la bordure :#ddbebe #241616 #241616 #ddbebe;

Ici, on peut noter que les bordures sont représentées par une combinaison de propriétés qui déterminent l'épaisseur (border-width avec la valeur 2px), style (border-style) avec une valeur spécifiant une bordure unie et des couleurs (border-color) sur chacun des quatre côtés.

Mettons à jour le navigateur et voyons à quoi ressembleront les boutons maintenant.

Comme vous pouvez le constater, les boutons semblent être montés dans cet état.

Essayons maintenant de donner aux boutons l'apparence d'un état enfoncé. Pour ce faire, supprimez l'ombre et changez la couleur des bordures. Dans ce cas, nous utiliserons un sélecteur de pseudo-classe spécial :hover correspondant à l'état actif.

Le code CSS pour l'état actif des boutons ressemblera à ceci.

    saisir: flotter {

    boîte ombre :aucun;

    couleur de la bordure :#a76d6d #a76d6d #a76d6d #a76d6d;

Dans ce cas, nous changerons à nouveau la couleur des bordures et ajouterons une ombre, seulement dans ce cas elle sera interne et sans déplacement. Le sélecteur de pseudo-classe deviendra également :active , correspondant à l'état enfoncé.

Le code CSS pour l'état enfoncé sera le suivant.

    saisir: actif {

    boîte ombre :0px 0px 7px 2px #422a2a encart ;

    couleur de la bordure :#777 #fff #fff #777;

Ci-dessous, à titre de comparaison, le bouton "Rechercher" est affiché, où vous pouvez clairement voir comment il change d'apparence en fonction de son état.


Fig.8 État passif

Avec cela, nous avons complété la mise en page de la page principale et l'avons amenée à une forme qui correspond à la mise en page du design. Et maintenant, nous devons, comme auparavant à chaque étape, vérifier sa compatibilité croisée dans les différents navigateurs. Mais avant cela, vérifions la validation de la page, car l’état du code peut dans une certaine mesure être affecté par la compatibilité croisée. Alors maintenant, effectuons cette opération très nécessaire.

Une validation est-elle nécessaire ?

La validation est le processus de vérification du code pour vérifier sa conformité aux normes établies. Il existe une distinction entre la validation de l'exactitude du code HTML et CSS. Il est clair que dans un cas le code HTML est vérifié, dans l'autre le code CSS.

Beaucoup de gens trouveront probablement étrange de se demander si une validation est nécessaire. Mais si vous regardez sur Internet, vous constaterez que nombreux sont ceux qui pensent qu'un code valide n'est pas nécessaire, que c'est une perte de temps, car les navigateurs fonctionnent bien même en présence de toutes sortes d'erreurs.

Bien sûr, dans de nombreux cas, les sites peuvent bien fonctionner même avec du code invalide, mais la compatibilité croisée dans de tels cas ne peut être garantie. Après tout, il existe des normes pour les langages de programmation eux-mêmes, mais naturellement, une telle norme n'existe pas et ne peut pas exister pour que les navigateurs corrigent les erreurs de la même manière. Par conséquent, différents navigateurs peuvent gérer les erreurs différemment, ce qui peut entraîner un affichage différent des pages.

Et en général, on ne sait pas pourquoi certaines personnes ont une telle attitude paresseuse envers leur travail, selon le principe «ça fera l'affaire». Par conséquent, si quelqu'un pense qu'il n'a pas besoin de vérifier la validité du code, alors c'est son droit, et il est peu probable qu'il puisse être convaincu du contraire, et ce n'est pas nécessaire.

Passons maintenant à la vérification directe de la validité des codes, HTML d'abord, puis CSS.

Comment vérifier la validité du code HTML

Essentiellement, la vérification de validation du code elle-même est assez simple, comme vous pouvez le voir maintenant. Mais éliminer les erreurs prend généralement un certain temps. Bien sûr, si le code se compose de plusieurs lignes, des difficultés ne peuvent survenir ici. Mais s'il y en a des centaines et des milliers, vous devrez peut-être travailler dur ici, tout dépend de la qualité de la compilation du code. Par conséquent, il est préférable de le faire plus souvent et de vérifier conjointement la compatibilité croisée.

Nous examinerons ici l'option la plus simple et la plus courante pour vérifier la validité - il s'agit de l'utilisation du site Web du Consortium W3C, qui, avec le soutien des développeurs de navigateurs, développe des spécifications pour les codes de pages Web.

Pour vérifier le code HTML, suivez simplement le lien https://validator.w3.org/, où une page s'ouvrira avec un champ de saisie pour l'adresse de la page en cours de vérification.

capture d'écran 51


Après avoir cliqué sur le bouton "Vérifier", nous recevrons le résultat du contrôle.


Dans ce cas, le code HTML est valide, mais il est recommandé d'utiliser l'attribut lang avec la valeur "ru", puisque la page utilise le russe.

L'attribut lang est destiné à aider les navigateurs à afficher correctement certains caractères, tels que les guillemets, en fonction de la langue utilisée. Il serait donc tout à fait utile que nous l’incluions dans le code HTML. Et nous ferons cela dans la balise html pour que cet attribut puisse agir sur l'ensemble du document.

La manière de procéder à cet ajout est indiquée dans le tableau suivant.

    "ru" >

    . . .

Et maintenant, si nous revérifions, nous pouvons voir que le code est devenu totalement valide sans aucun commentaire.


Nous avons ainsi vérifié le fichier publié sur Internet. Mais lorsque la page n'est pas encore mise en ligne sur Internet, vous pouvez vérifier sa validité par d'autres moyens, soit en téléchargeant le fichier à l'aide du bouton de révision, soit en utilisant le formulaire pour copier directement le code HTML.

La capture d'écran montre la dernière option, où le code de la page Web est copié directement dans le formulaire de vérification.


Après avoir effectué la vérification, nous obtenons un résultat similaire et le code en cours de vérification sera également affiché ici. Si des erreurs sont trouvées, elles seront mises en évidence pour simplifier la recherche, ce qui simplifie grandement le travail de leur élimination.


Comment vérifier la validité du code CSS

Nous avons examiné la validation du code HTML. Le code CSS est examiné exactement dans le même ordre. Seulement dans ce cas, vous devez utiliser une autre page de validation, qui dans ce cas se trouve à l'adresse http://jigsaw.w3.org/css-validator/.

Ouvrons-le et, comme la fois précédente, saisissons l'adresse de la page à vérifier, puis appuyons sur le bouton "Vérifier".

Le résultat de cette vérification est affiché dans la capture d'écran.


Comme vous pouvez le constater, notre code CSS est entièrement conforme à la spécification sans aucune erreur, ce qui est un bon résultat.

L'ordre des autres méthodes de vérification dans ce cas est complètement identique aux vérifications similaires du code HTML. Nous ne nous répéterons donc pas ici et terminerons notre examen des contrôles de validation.

Après cela, nous vérifierons la compatibilité croisée de notre page et, en nous assurant qu’elle s’affiche de la même manière sur tous les navigateurs, nous terminerons la mise en page de la page principale du site.

Oh, nous le ferons juste après les vacances du Nouvel An.

Et en conclusion, nous pouvons féliciter tout le monde pour la nouvelle année à venir ! Et je vous souhaite santé, amour, joie, prospérité et, bien sûr, beaucoup de succès dans la création de votre propre site Web au cours de la nouvelle année afin de pouvoir travailler avec succès sur Internet !

Fichiers sources du site

Les fichiers sources du site avec les mises à jour effectuées dans cet article peuvent être téléchargés à partir du fichier ci-joint. matériaux additionnels.

Dans l'un des articles précédents dont j'ai parlé. Cependant, tout le monde ne sait pas qu'en plus de validateur pour HTML, Il y a validateur pour CSS également.

Signification Validité CSS identique au HTML : presque sans importance. Même avec HTML si tu écris CSS invalide, alors il n'y aura aucun problème (à moins, bien sûr, qu'il y ait des erreurs graves), cependant, un code valide est toujours bon. Un tel code est clair et structuré, il est facile à comprendre, ce qui est également important, surtout lors de sa correction, et surtout par d'autres personnes. Aussi Validité CSS accélère le processus de traitement et, par conséquent, la vitesse de chargement des pages.

Et enfin, en raison du respect généralement rare de la validité, un code valide impose toujours le respect, ce qui est important si vous le faites de manière professionnelle.

À vérifier la validité CSS, tu dois l'utiliser Service W3: http://jigsaw.w3.org/css-validator/.

Je dirai tout de suite que, contrairement HTML, faire CSS valide beaucoup plus simple, puisqu'il n'y a en principe que des erreurs, à l'exception de , qu'il vaut mieux éviter complètement.

Permettez-moi de résumer. Il n'est pas du tout nécessaire de rendre le code valide, mais je recommande fortement de le faire, car un tel site sera plus facile à indexer par les moteurs de recherche ( Validité HTML), travaillez plus rapidement, plus facilement à éditer et inspirez le respect des professionnels.

Vérifier la validité du code Web, c'est vérifier sa conformité aux normes et certificats du W3C.
Le W3C (World Wide Web Consortium) sont les décideurs techniques du Web qui développent des normes et des lignes directrices pour l'écriture de code. Les certificats et normes W3C sont obligatoires pour toute personne travaillant sur le Web. Des normes communes en matière d'orthographe du code sont nécessaires pour que toutes les applications réseau communiquent dans un espace linguistique unique, dans des langues standard, et se comprennent lorsqu'elles travaillent avec des documents Web.
Le W3C crée non seulement des standards Web, mais promeut également activement leur mise en œuvre.
Le W3C propose des services en ligne pour vérifier la validité du code HTML/XHTML et CSS.
Vérifier la conformité de votre code avec les normes du W3C à l'aide des validateurs du W3C est la meilleure option.

Services en ligne gratuits du W3C pour vérifier la validité du code.
Les validateurs du W3C ont une interface intuitive. Travailler avec eux est facile et simple.
Les services permettent d'effectuer des contrôles selon trois modes et ne disposent donc que de trois boutons :
Vérifier l'URL
(pour vérifier, vous devez indiquer l'adresse de n'importe quelle page du site disponible sur Internet)
Vérifiez le fichier téléchargé
(pour vérifier, vous devez spécifier le chemin d'accès au fichier en cours de vérification)
Vérifiez le texte tapé
(pour vérifier, vous devez copier et coller le code en cours de vérification dans la fenêtre du validateur)

Les deux dernières méthodes sont particulièrement utiles lors de la vérification de documents Web ou de textes situés sur des ordinateurs locaux. Il peut s'agir de pages Web, soit déjà téléchargées depuis Internet sur l'ordinateur local, soit générées par des moteurs situés sur des serveurs locaux, tels que Denver. Dans le cas de Denver, vous devez enregistrer la page via un navigateur en tant que fichier avec l'extension .html, puis la vérifier en tant que fichier séparé, ou copier le code source de la page Web directement depuis le navigateur et vérifier comment le texte est tapé.

Comment utiliser les validateurs en ligne du W3C.
contactez le validateur à :
(http://validator.w3.org/ - pour valider HTML ou XHTML
http://jigsaw.w3.org/css-validator/ - pour vérifier CSS)
dans la fenêtre du validateur qui s'ouvre, sélectionnez l'une des trois méthodes de vérification
(URL de la page du site, fichier local ou texte tapé)
allez dans l'onglet approprié
indiquer l'objet à vérifier
(entrez l'URL de la page Web que vous consultez,
ou le chemin d'accès au fichier sur l'ordinateur local,
ou insérez respectivement le code à vérifier)
Cliquez sur le bouton « Vérifier » et regardez le résultat du test

Les services du W3C vérifient la validité du code et signalent immédiatement les erreurs s'il y en a. Chaque erreur sera commentée. Les commentaires sont malheureusement en anglais. Ainsi, le traducteur Google peut vous aider. Il ne reste plus qu'à corriger le code, si nécessaire, et à en vérifier à nouveau la conformité.
Les validateurs du W3C sont entièrement gratuits et automatisés. Par conséquent, vous pouvez les marteler avec votre travail sur les erreurs pendant longtemps et en toute impunité. C'est pourquoi ces services ont été créés.

Une alternative normale aux validateurs du W3C.
En complément des serveurs en ligne du W3C pour vérifier le code web, l'extension HTML Validator pour le navigateur Mozilla Firefox donne de très bons résultats. La présence d'un tel module complémentaire dans le navigateur facilite le travail du webmaster et prouve une fois de plus que Mozilla Firefox est un navigateur « pilote ».
Vous pouvez télécharger l'extension pour mozilla ici : http://users.skynet.be/mgueury/mozilla/

Vous pouvez installer l'extension comme ceci :
- Lancez Firefox.
Suivant : Menu - Outils - Modules complémentaires - Extensions.
Et faites simplement glisser et déposez le fichier téléchargé (extension xpi) dans la fenêtre qui s'ouvre.
Après cela, l'extension sera installée automatiquement.

ou (deuxième méthode) :
- Lancez Firefox.
Suivant : Menu - Fichier - Ouvrir le fichier - spécifiez le chemin d'accès au fichier téléchargé.
Après cela, l’extension sera à nouveau installée automatiquement.

Une fois l'installation terminée, vous devrez redémarrer le navigateur.
Lorsque vous redémarrez, une fenêtre apparaîtra vous demandant de sélectionner une méthode d'analyse des pages Web :
"HTML Tidy" ou "SGML Parser" ou "Serial"
Nous choisissons la méthode « SGML Parser » comme l'option la plus pratique et la plus acceptable. Cliquez sur le bouton approprié. Maintenant, dans la fenêtre du navigateur, une icône de raccourci pour le module complémentaire sera affichée, et à côté se trouve un bouton pour le menu des paramètres du module complémentaire.
Je l'ai en haut et à droite :

HTML Validator pour le navigateur Mozilla Firefox fonctionne de manière entièrement automatique. Il n'est pas nécessaire de lui montrer quoi vérifier. Il vérifie tous les documents qui seront ouverts dans Mozilla Firefox. C'est très confortable. Il suffit de regarder la couleur de l'étiquette du programme pour comprendre s'il y a ou non des problèmes dans le document ouvert.
Selon les résultats du test, la couleur de l'icône peut être verte, jaune ou rouge, ce qui indique ce qui suit :
vert - « aucune erreur », tout est « OK »
jaune - "pas d'erreurs, mais il y a des avertissements"
rouge - "il y a des erreurs"

Lorsque vous cliquez sur le raccourci, une fenêtre s'ouvrira contenant le code source de la page que vous consultez avec des explications et des commentaires sur les erreurs et les avertissements, le cas échéant.
Quelque chose comme ça.

Bienvenue sur le blog gratuit des webmasters ! La dernière fois, j'ai parlé de la façon de vérifier, et aujourd'hui je propose de continuer le sujet de la validation des pages Web. Vérifions que les feuilles de style en cascade (CSS) et les documents HTML avec des feuilles de style sont conformes aux normes Internet généralement acceptées.

Le développeur du langage de style CSS est le World Wide Web Consortium (en abrégé W3C), une organisation qui développe et met en œuvre des normes technologiques sur Internet.

CSS (de l'anglais Cascading Style Sheets - feuilles de style en cascade) est un langage formel conçu pour décrire l'apparence d'un document à l'aide d'un langage de balisage.

Il existe un service très utile de vérification des styles proposé par le Consortium W3C. Allons sur la page principale du service de validation CSS et vérifions la validité du CSS.

Comme le veut la tradition, je consulterai mon blog à titre d'exemple illustratif. Cliquez sur le lien et une nouvelle fenêtre s'ouvrira qui ressemble à ceci :

Une agréable surprise nous attend ici, tout est en russe ! De plus, il est possible de sélectionner n'importe quelle autre langue parmi plus de 20 disponibles. La page contient des onglets qui vous proposent de sélectionner une option de vérification :

  1. Vérifiez par URI - spécifiez simplement l'adresse de la page ;
  2. Vérifiez le fichier téléchargé - vous devez sélectionner un fichier CSS local ;
  3. Vérifiez le texte saisi - vous devez entrer le code CSS pour vérifier l'exactitude.

Des fonctionnalités supplémentaires vous permettent de spécifier des paramètres d'analyse avancés. Voici un bref résumé de chacun d’eux :

  • Profil : répertorie toutes les fonctionnalités et capacités de mise en œuvre sur une plate-forme spécifique. La sélection par défaut suit la norme de troisième niveau la plus couramment utilisée, CSS3.
  • Avertissements : configuration du détail des rapports : tous les avertissements ou les plus importants, un rapport régulier, sans afficher les avertissements. Le service peut produire deux types de messages : des erreurs et des avertissements. Si le CSS testé n'est pas conforme à la recommandation, il s'agit d'une erreur. Les avertissements diffèrent des erreurs dans le sens où ils ne constituent pas des problèmes de spécification.
  • Environnement : spécifiez l'endroit où les styles sont appliqués, par exemple sur un appareil portable, un écran, un téléviseur ou une page d'impression. Il est recommandé de tester tous les environnements de style.
  • Extensions du fournisseur - il est conseillé de les laisser par défaut, il est possible d'afficher uniquement les erreurs ou uniquement les avertissements. Les fournisseurs de navigateurs implémentent parfois des propriétés CSS expérimentales et utilisent les préfixes suivants pour les prendre en charge : -moz- (pour Firefox), -webkit- (pour Chrome), -ms- (pour Internet Explorer), -o- (pour Opera) et autres.

Je précise l'adresse URL, configure des paramètres de vérification supplémentaires et clique sur le bouton « Vérifier » pour commencer. Hourra! Résultat de la vérification CSS : aucune erreur trouvée !

Malheureusement, nous n'avons pas pu éviter les avertissements liés à une extension de fournisseur inconnu. Ce n'est pas grave, le service de vérification CSS est un utilitaire gratuit, fiable et utile, mais comme tout logiciel, il peut présenter des défauts.

L'essentiel est que les styles ne contiennent pas d'erreurs et que les extensions du fournisseur ne sont probablement tout simplement pas incluses dans la spécification et provoquent des avertissements, mais le navigateur traite les données correctement.

Veuillez noter que la liste des avertissements indique le numéro de ligne dans laquelle la propriété inconnue a été trouvée. Lorsque des erreurs sont détectées, vous verrez un tableau avec la propriété et une description du problème. Par exemple, la page d'accueil de Yandex a ce résultat de vérification :

Vous trouverez ci-dessous des informations sur les CSS vérifiés valides. Ne vous précipitez pas pour le copier et l’utiliser sur votre site Web ! Oui, dans la version donnée du CSS correct, il n'y a pas d'erreurs ni de propriétés dont l'utilisation provoquerait des avertissements, le code passera à 100% la vérification complète. Mais l'effet est obtenu en supprimant ces propriétés, de sorte que le site peut avoir des problèmes d'affichage ou que les attentes peuvent ne pas correspondre à la réalité.

Ce service est hébergé et maintenu sur le serveur du W3C, mais n'est pas en même temps un outil officiel de vérification CSS.

Si vous le souhaitez, utilisez un validateur combiné - il vérifie l'intégralité du document, combinant les résultats de la vérification des validateurs HTML et CSS, ainsi que d'autres outils utiles, sur une seule page.

Lors du développement de sites Web, reportez-vous aux dernières spécifications et références pour les feuilles de style en cascade. Je recommande d'utiliser un validateur CSS et de vérifier votre site, partagez les résultats dans les commentaires !



Avoir des questions?

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :