• Résolu Validation CSS du blog (W3C)


    Vendredi 27 Mars 2020 à 10:35
    Pipiou

    [j'ai hésité entre "Besoin d'aide" et "Cafétéria", je déplacerai au besoin]

    Bonjour,

    de temps en temps je souhaite valider le CSS via W3C mais je ne finis jamais : si je peux rectifier qqs erreurs, d'autres je n'arrive même pas à les trouver, du coup j'abandonne.

    Si je reprends au début :

    1/ dans la page https://jigsaw.w3.org/css-validator/
    dans les Options > Profil : CSS3 ? CSS3 + SVG ? autre ?

    2/ apparemment les "avertissements" ne sont que des "informations" et pas des "erreurs" (ouf)
    donc on n'en tient pas compte, j'ai bon ?

    3/ côté "erreurs" j'ai réussi à en corriger 1 ce matin (enfin je crois he) mais les autres...
    y'a t'il un mode d'emploi (simple et clair évidement), sur la façon de procéder ?

    4/ le CSS corrigé (proposé par W3C) : c'est pour le copier-coller quelque part "à la place de" ? à la place de quoi ?  Pas de contre-indication/conflit avec le CSS EB ? 
    > le CSS corrigé remplace-t'il "toutes" les feuilles de styles ? 
    chez Pipiou :

                             

    5/ pourquoi y'a des petites feuilles de styles, par exemple la n° 4 avec 1 seule règle ? C'est une règle à part ? 

    6/ c'est déjà pas mal : merci bien aux éclaireurs  smile

     

    Vendredi 27 Mars 2020 à 15:23
    stormalo

    (source éclairage)

    □  Éclairage du 1 à 4 : à mon avis c'est des infos pour mieux faire, avoir un code plus clair et plus propre, éviter les contradictions et doublons. Peut être aider à résoudre des problèmes de mise en page, faire en sorte que les navigateurs soient plus conciliants et comprennent correctement ce qu'ils doivent afficher.

    (à mon avis)> Beaucoup des erreurs signalées sont d'origine Eklablog, mais il doit s'agir plus de mauvaises pratiques que d'anomalies ; les navigateurs les interprètent quand même.

    □  Éclairage du  4 : perso si je devais faire un copié-collé je ne remplacerais au cas par cas que ce qui est dans le thème css, et prudemment, car le parfait W3C et l'usuel Ekla ne cohabiteraient peut être pas bien.

    □  Éclairage du  5 : on est là dans les outils de développement Firefox.
    Les "petites" feuilles de style représentent chacune un couple <style> </style> intégré  à la page HTML ( FF indique <feuille de style intégrée n°  >)

    Principe: le navigateur reçoit 1 page "html"  et 1 page "css" ; avec ça il construit un document virtuel normalisé (sauf mauvaise compréhension : le DOM) en séparant tout ce qui est html et css.  Les codes javascripts agissent ensuite sur ce DOM

    - Infos non garanties et perfectibles - sarcastic

     

    Vendredi 27 Mars 2020 à 15:55
    Colette95

    Coucou vous 2, smile

    Eclairage trop faible, vous êtes perdus dans le noir  ? 

    Pipou tu as 1 feuille de style et c'est celle-ci : 
    http://pipiou.eklablog.com/theme-203813-2269.css

    qui reprend le css de la configuration de ton blog que tu as faite dans les paramètres + à la suite de celui-ci ce que tu as ajouté dans ta feuille de style et puis c'est tout.

    Donc tu passes cette feuille de style au W3C, tu as 1 erreur soulignée en rouge :

    #footer{
      clear: both;
      overflow: hidden;
      text-align: right;
      height: 156px;
      margin-top: 20px;
      margin-undefined: 20px;
      color: #075a01;
      font-weight: normal;
      font-style: normal;
      text-decoration: none;
      font-variant: normal;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      background-repeat: no-repeat;
      background-image: url("http://ekladata.com/0LBZ2wRFAT3whB09X-kjyh6V78g.gif");
      background-position: left top;
      margin-bottom: 0px;
    }

    Cette erreur se situe dans le paramétrage et non dans le css ajouté. Tu devrais donc pouvoir le rectifier facilement. Quoique je me demande comment ça a pu arriver d'avoir un margin-undefined. Peut-être une case non cochée ? Bizarre...

    Ce que tu montres en copie d'écran, c'est le css de la plateforme et non celle de ton blog.

     

    Vendredi 27 Mars 2020 à 16:12
    stormalo

    Re-bonjour Colette95,

     wink2.

    Ce que montre Pipiou c'est, agencé par le navigateur, tout le css qui est lié à la page html reçue, thème-css inclus
    Accès entre autres par la touche F12.

    Sur Firefox, le document initial envoyé par Eklablog (la page web html) est visible par Ctrl+U.
    C'est cette page qui appelle ensuite les autres éléments dont le thème css, les images etc

    Vendredi 27 Mars 2020 à 16:46
    Colette95

    Le Ctrl+U sert sur n'importe quel navigateur à afficher la page html du blog ou du site. Il sert aussi en ce qui nous concerne à accéder aux codes des blogs qui viennent demander de l'aide alors qu'ils ont désactivé le "clic-droit". 

    Et bien sûr comme tu le soulignes c'est cette page qui reprend tous les liens permettant l'affichage d'un blog ou d'un site.

    Maintenant, quant à obtenir la validation W3C pour le html de celle-ci, c'est peine perdue. 

     

     

    Vendredi 27 Mars 2020 à 17:11
    Pipiou

    merci à tous les deux smile

    haaaa, donc ça sert à rien, via W3C,  de passer par "une adresse url", vaut mieux passer par une "saisie directe" et copier-coller la feuille de style "thème" : c'est bien ça ?
    Et pas les autres ? (c'est une question ;) 

    dans le footer  margin-undefined: 20px;  
    > via Apparence, menus EB et CSS ajouté : introuvable.
    > je l'ai trouvé dans la feuille de style intégrée n°6 (FF), j'ai supprimé la ligne, sauf que après : je fais quoi ?

    J'avais remarqué que FF ne montrait pas toujours le même nombre de feuilles de style intégrées numérotées (4, 5, etc.). Je confirme : là y'en a beaucoup plus que ce matin :  

               et  1/4 d'h après :   

    dans le dernier F12  la feuille de style intégrée n° 6 est à 0 règle.  (c'est exactement ce genre de truc qui me fait abandonner mes essais de compréhension frown)

    Truc bien : je n'ai qu'une erreur cool faut juste que j'arrive à la corriger beurk

    Edit : et je relirai tranquillement pour essayer de tout bien retenir wink2

     

    Vendredi 27 Mars 2020 à 18:11
    Colette95

    Ben, c'est pas à partir d'un navigateur que tu peux modifier une feuille style à laquelle tu n'as pas accès.

    C'est uniquement à partir de ton espace administration que tu modifier ce qui est sur ton blog, heureusement d'ailleurs, tu imagines un peu si les codes étaient modifiables à partir des navigateurs ? sarcastic

    Pour régler ce problème d'erreur la solution serait peut-être de copier/coller l'intégralité du code #footer dans la feuille de style (en tenant compte de la correction bien sûr) et ensuite de supprimer dans les paramètres tout ce qui le concerne.

    Puis tu repasses le tout au W3C et si le problème persiste, il ne te reste plus qu'à demander au Staff de rectifier, car ça ne pourra se faire que par son intermédiaire.

    Vendredi 27 Mars 2020 à 22:56
    stormalo

    @Colette95,
    Jusqu’à l'an dernier, moi aussi, j'ai cru qu'en utilisant Ctrl+U, tous les navigateurs affichaient la page web reçue.

     J'ai deux PC, 
    - L'un est équipé de Edge (hérité microsoft). La combinaison Ctrl+U n'affiche pas la page html du blog ou du site, mais les outils de développement. Je n'ai trouvé aucun moyen de l'afficher telle que reçue.
    - Le second est équipé du nouveau Edge (version janvier 2020, sur base chromium). Entre autres évolutions, la combinaison Ctrl+U affiche la page html du blog ou du site.


    @Pipiou
    Ce n'est pas nouveau sur Firefox de voir que la liste des feuilles intégrées varie. Il y a même des situations ou le thème-css à disparu de la liste des styles (le thème css est alors reproduit dans les "feuille de style intégrée").

    J'ai souvent rencontré cette situation immédiatement après avoir fait une action via "Modifier le thème". C'est peut être du au fait que Eklablog fait la modif en temps réel sans renvoyer toute la page, ce qui doit modifier l'analyse du navigateur. Si on touche au css directement dans le code je n'ai pas de souvenir

    Samedi 28 Mars 2020 à 09:34
    Pipiou

    Alors... j'ai fait ce que tu as proposé Colette95 : l'erreur reste là > p'têt un ancien codage de je sais pas quoi et qui veut plus s'en aller ?

    J'ai regardé via Chrome, Edge (Open Source Chromium) et aussi Opéra, au cas où : ils affichent tous le margin-undefined.
    Je demanderai au staff, mais merci pour l'idée de la manip :)

    Ha tu me rassures stormalo :)  Autrement dit le navigateur, il fait ce qu'il veut he Ou plutôt il réagit selon ce qu'il a reçu, tout en affichant ce qu'il reçoit en même temps >  forcément ça bouge ! 

    et au fait... la question 1/  ... ??

     

    Samedi 28 Mars 2020 à 10:01
    stormalo

    la question 1/  ...  clown   c'est comme à la borne du McDo quand on arrive, on fait le choix de ce que l'on préfère (moi j'aime pas mais les petits enfants m'ont expliqué comme ça), sauf qu'au w3c  y a que du code. Je pense qu'on choisit la référence pour l'analyse et ce qui est livré.

    Je n'ai jamais utilisé ce 1/.

     




    Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.