AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Le CSS et ses règles

    Partagez
    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Fév 2017 - 0:43

    Coucou!

    Alors, aujourd'hui j'ai décider de rentrer réellement dans l'exploitation du CSS. J'étais en train de coder mon petit projet quand venu le temps de valider la feuille de CSS, ça me dit: "Erreur il y a un nombre impair de { et de } . Veuillez trouver l'erreur pour que votre forum fonctionne correctement."

    Moi je me dis: "Ha bon? Merde j'ai quand même 1308 lignes à vérifier! Où ai-je déconner!?" Bref, j'ai passer deux jours a éplucher mon CSS jusqu'à ce que je me fatigue et je m'effectue une petite recherche avec mon copinou Google! Je suis tomber sur un excellent site: http://jigsaw.w3.org/css-validator/

    Je met toute ma feuille. Déjà il me trouve 21 erreur dont ma fameuse baliste mal fermer. Je me dis: "Yess! Un truc de gèrer." Mais en épluchant les erreurs, je tombe sur ça:
    Code:

    492    .lastpost-avatar img    all n'est pas une valeur de transform : all
    506    .lastpost-avatar img:hover    all n'est pas une valeur de transform : all
    525    .cadrevava    Propriété erronée : background-repeat no n'est pas une valeur de background-repeat : no repeat

    Alors, que ça me dise que transform: all n'est pas une valeur, j'étais un peu étonnée... scratch Sinon, Cheshire m'a donné une bonne adresse pour les -moz-webkit- et etc mais ce site aussi me les corrige sous forme d'avertissement. J'ai 150 avertissements. Arrow *se cache*

    Mes 150 avertissements (c'est bien il me donne les lignes en plus! Le kiff quoi!)

    Spoiler:
    Code:
    242       La propriété -moz-box-shadow est une extension propriétaire inconnue
    243       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    244       La propriété -o-box-shadow est une extension propriétaire inconnue
    251       La propriété -webkit-perspective est une extension propriétaire inconnue
    252       La propriété -o-perspective est une extension propriétaire inconnue
    253       La propriété -moz-perspective est une extension propriétaire inconnue
    258       La propriété -moz-transform-style est une extension propriétaire inconnue
    259       La propriété -o-transform-style est une extension propriétaire inconnue
    260       La propriété -webkit-transform-style est une extension propriétaire inconnue
    261       La propriété -webkit-transition est une extension propriétaire inconnue
    262       La propriété -moz-transition est une extension propriétaire inconnue
    263       La propriété -o-transition est une extension propriétaire inconnue
    268       La propriété -webkit-transform est une extension propriétaire inconnue
    269       La propriété -moz-transform est une extension propriétaire inconnue
    270       La propriété -o-transform est une extension propriétaire inconnue
    280       La propriété -webkit-transform est une extension propriétaire inconnue
    281       La propriété -moz-transform est une extension propriétaire inconnue
    282       La propriété -o-transform est une extension propriétaire inconnue
    283       La propriété -webkit-transition est une extension propriétaire inconnue
    284       La propriété -moz-transition est une extension propriétaire inconnue
    285       La propriété -o-transition est une extension propriétaire inconnue
    286       La propriété -webkit-backface-visibility est une extension propriétaire inconnue
    287       La propriété -o-backface-visibility est une extension propriétaire inconnue
    288       La propriété -moz-backface-visibility est une extension propriétaire inconnue
    342       Le pseudo-élément ::-webkit-scrollbar est une extension propriétaire inconnue
    347       Le pseudo-élément ::-webkit-scrollbar-track est une extension propriétaire inconnue
    350       Le pseudo-élément ::-webkit-scrollbar-thumb est une extension propriétaire inconnue
    371       La propriété -moz-border-radius est une extension propriétaire inconnue
    372       La propriété -webkit-border-radius est une extension propriétaire inconnue
    383       La propriété -moz-transform est une extension propriétaire inconnue
    384       La propriété -o-transform est une extension propriétaire inconnue
    385       La propriété -htm-transform est une extension propriétaire inconnue
    386       La propriété -webkit-transform est une extension propriétaire inconnue
    388       La propriété -moz-transition est une extension propriétaire inconnue
    389       La propriété -o-transition est une extension propriétaire inconnue
    390       La propriété -htm-transition est une extension propriétaire inconnue
    391       La propriété -webkit-transition est une extension propriétaire inconnue
    406       La propriété -moz-linear-gradient(bottom,black,grey) est une extension propriétaire inconnue
    411       La propriété -moz-border-radius est une extension propriétaire inconnue
    412       La propriété -webkit-border-radius est une extension propriétaire inconnue
    422       La propriété -webkit-text-decoration-line est une extension propriétaire inconnue
    423       La propriété -webkit-text-decoration-style est une extension propriétaire inconnue
    424       La propriété -o-text-decoration est une extension propriétaire inconnue
    432       La propriété -webkit-text-decoration est une extension propriétaire inconnue
    441       La propriété -webkit-text-decoration est une extension propriétaire inconnue
    449       La propriété -webkit-text-decoration est une extension propriétaire inconnue
    493       La propriété -moz-transform est une extension propriétaire inconnue
    494       La propriété -o-transform est une extension propriétaire inconnue
    495       La propriété -htm-transform est une extension propriétaire inconnue
    496       La propriété -webkit-transform est une extension propriétaire inconnue
    498       La propriété -moz-transition est une extension propriétaire inconnue
    499       La propriété -o-transition est une extension propriétaire inconnue
    500       La propriété -htm-transition est une extension propriétaire inconnue
    501       La propriété -webkit-transition est une extension propriétaire inconnue
    507       La propriété -moz-transform est une extension propriétaire inconnue
    508       La propriété -o-transform est une extension propriétaire inconnue
    509       La propriété -htm-transform est une extension propriétaire inconnue
    510       La propriété -webkit-transform est une extension propriétaire inconnue
    512       La propriété -moz-transition est une extension propriétaire inconnue
    513       La propriété -o-transition est une extension propriétaire inconnue
    514       La propriété -htm-transition est une extension propriétaire inconnue
    515       La propriété -webkit-transition est une extension propriétaire inconnue
    625       La propriété -moz-transform est une extension propriétaire inconnue
    626       La propriété -o-transform est une extension propriétaire inconnue
    627       La propriété -htm-transform est une extension propriétaire inconnue
    628       La propriété -webkit-transform est une extension propriétaire inconnue
    630       La propriété -moz-transition est une extension propriétaire inconnue
    631       La propriété -o-transition est une extension propriétaire inconnue
    632       La propriété -htm-transition est une extension propriétaire inconnue
    633       La propriété -webkit-transition est une extension propriétaire inconnue
    641       La propriété -moz-transform est une extension propriétaire inconnue
    642       La propriété -o-transform est une extension propriétaire inconnue
    643       La propriété -htm-transform est une extension propriétaire inconnue
    644       La propriété -webkit-transform est une extension propriétaire inconnue
    646       La propriété -moz-transition est une extension propriétaire inconnue
    647       La propriété -o-transition est une extension propriétaire inconnue
    648       La propriété -htm-transition est une extension propriétaire inconnue
    649       La propriété -webkit-transition est une extension propriétaire inconnue
    681       La propriété -moz-border-radius est une extension propriétaire inconnue
    682       La propriété -webkit-border-radius est une extension propriétaire inconnue
    683       La propriété -o-border-radius est une extension propriétaire inconnue
    684       La propriété -khtml-border-radius est une extension propriétaire inconnue
    685       La propriété -ms-border-radius est une extension propriétaire inconnue
    694       La propriété -moz-border-radius est une extension propriétaire inconnue
    695       La propriété -webkit-border-radius est une extension propriétaire inconnue
    696       La propriété -o-border-radius est une extension propriétaire inconnue
    697       La propriété -khtml-border-radius est une extension propriétaire inconnue
    698       La propriété -ms-border-radius est une extension propriétaire inconnue
    700       La propriété -moz-transition est une extension propriétaire inconnue
    701       La propriété -webkit-transition est une extension propriétaire inconnue
    702       La propriété -o-transition est une extension propriétaire inconnue
    703       La propriété -ms-transition est une extension propriétaire inconnue
    704       La propriété -khtml-transition est une extension propriétaire inconnue
    743       La propriété -moz-transform est une extension propriétaire inconnue
    744       La propriété -o-transform est une extension propriétaire inconnue
    745       La propriété -htm-transform est une extension propriétaire inconnue
    746       La propriété -webkit-transform est une extension propriétaire inconnue
    748       La propriété -moz-transition est une extension propriétaire inconnue
    749       La propriété -o-transition est une extension propriétaire inconnue
    750       La propriété -htm-transition est une extension propriétaire inconnue
    751       La propriété -webkit-transition est une extension propriétaire inconnue
    758       La propriété -moz-transform est une extension propriétaire inconnue
    759       La propriété -o-transform est une extension propriétaire inconnue
    760       La propriété -htm-transform est une extension propriétaire inconnue
    761       La propriété -webkit-transform est une extension propriétaire inconnue
    763       La propriété -moz-transition est une extension propriétaire inconnue
    764       La propriété -o-transition est une extension propriétaire inconnue
    765       La propriété -htm-transition est une extension propriétaire inconnue
    766       La propriété -webkit-transition est une extension propriétaire inconnue
    906       La propriété -moz-border-radius est une extension propriétaire inconnue
    907       La propriété -webkit-border-radius est une extension propriétaire inconnue
    972       La propriété -webkit-transition est une extension propriétaire inconnue
    984       La propriété -webkit-transition est une extension propriétaire inconnue
    991       La propriété -webkit-transition est une extension propriétaire inconnue
    995       La propriété alpha(opacity=0) est une extension propriétaire inconnue
    1011       La propriété -webkit-transition est une extension propriétaire inconnue
    1012       La propriété alpha(opacity=100) est une extension propriétaire inconnue
    1033       La propriété -moz-box-shadow est une extension propriétaire inconnue
    1034       La propriété -o-box-shadow est une extension propriétaire inconnue
    1035       La propriété -htm-box-shadow est une extension propriétaire inconnue
    1036       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    1073       La propriété -moz-box-shadow est une extension propriétaire inconnue
    1074       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    1075       La propriété -o-box-shadow est une extension propriétaire inconnue
    1078       La propriété -moz-border-radius est une extension propriétaire inconnue
    1079       La propriété -webkit-border-radius est une extension propriétaire inconnue
    1080       La propriété -o-border-radius est une extension propriétaire inconnue
    1171       La propriété -moz-border-radius est une extension propriétaire inconnue
    1172       La propriété -webkit-border-radius est une extension propriétaire inconnue
    1173       La propriété -o-border-radius est une extension propriétaire inconnue
    1175       La propriété -moz-box-shadow est une extension propriétaire inconnue
    1176       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    1177       La propriété -o-box-shadow est une extension propriétaire inconnue
    1188       La propriété -moz-border-radius est une extension propriétaire inconnue
    1189       La propriété -webkit-border-radius est une extension propriétaire inconnue
    1190       La propriété -o-border-radius est une extension propriétaire inconnue
    1192       La propriété -moz-box-shadow est une extension propriétaire inconnue
    1193       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    1194       La propriété -o-box-shadow est une extension propriétaire inconnue
    1209       La propriété -moz-border-radius est une extension propriétaire inconnue
    1210       La propriété -webkit-border-radius est une extension propriétaire inconnue
    1211       La propriété -o-border-radius est une extension propriétaire inconnue
    1244       La propriété -moz-border-radius est une extension propriétaire inconnue
    1245       La propriété -webkit-border-radius est une extension propriétaire inconnue
    1246       La propriété -o-border-radius est une extension propriétaire inconnue
    1288       La propriété -moz-box-shadow est une extension propriétaire inconnue
    1289       La propriété -webkit-box-shadow est une extension propriétaire inconnue
    1290       La propriété -o-box-shadow est une extension propriétaire inconnue
    1293       La propriété -moz-border-radius est une extension propriétaire inconnue
    1294       La propriété -webkit-border-radius est une extension propriétaire inconnue

    Mais j'aimerais bien qu'on m'explique pourquoi la valeur all de transform il me met ça en erronée... scratch

    De plus, je voulais voir faire partager ma petite perle! :hug: :ange:
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 19 Fév 2017 - 9:36

    Hello !

    Super l'astuce pour repérer les erreurs ! Je pense même que ça pourrait être listé dans des "liens utiles" tout ça :hum:

    Pour les erreurs qu'il te donne, est-ce que tu n'as pas confondu "transform" et "transition" ? Car "all" est plutôt une valeur de "transition". Les transitions sont les animations, les transformations changent la taille, le sens ou déforme un élément (ou maintenant change aussi les colorations d'image).

    Pour les autres erreurs, il est possible que le site se base sur les navigateurs à jour, et les préfixes ne sont plus utiles, en tout cas beaucoup d'entre eux ne le sont plus. Ca peut rester intéressant de les avoir pour les navigateurs anciens, non mis à jour (depuis loooongtemps^^) mais d'un autre côté 150 lignes de css ça alourdi le css, même si globalement des feuilles rapides à changer, une ligne reste une ligne^^



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Fév 2017 - 11:17

    Coucou!

    Je vais aller le proposer dans les liens utiles alors. :)

    Possible que je me sois tromper. :hum: C'est une animation donc je me suis fortement tromper. même. :hum: Bah merci de m'avoir expliquer la différence. :)

    Mais en quoi 150 lignes alourdit la feuille de CSS ? :hum: Après j'ai un pc de compet' donc, je ne vois pas trop de différence pour le moment.



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 19 Fév 2017 - 11:45

    Ce n'est pas le problème de ton PC en fait, mais le chargement de la page qui prendra plus de temps. Plus le code est long, plus il est long à charger. Les performances de ton PC sont plutôt indépendantes de ça.
    C'est pour ça qu'il est mieux d'alléger ses codes au possible pour avoir un chargement de page optimal :)



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Fév 2017 - 11:50

    Hum... Pas faux! Quand je vois comment ma le fond de ma PA met du temps à afficher (bon 5 secondes après la page soit ouverte).

    Merci pour la réponse que tu as apporté Cheshire. :)




    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 19 Fév 2017 - 12:04

    Ca dépend également de si ta PA est ajoutée via une balise iframe ou non. Par exemple, les iframes ce sont juste des moyens d'afficher des éléments d'une autre page. Du coup, pour ton index, ça fait deux pages à charger et pas une seule et c'est sûrement pour ça que ça prends du temps ^-^



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Fév 2017 - 12:11

    Ha oui c'est par iframe. Je n'aime pas le nouveau truc qu'ils ont mis qui fout en vrac toute mes balises.



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 19 Fév 2017 - 12:14

    Bah c'est pour ça alors Very Happy
    T'inquiètes pas j'aime pas du tout non plus xD



    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Dim 19 Fév 2017 - 12:20

    Coucou :hudada:

    J'ai l'impression que le sujet devient un peu plus une résolution de problème de code (comme Marie avait simplement inversé transition et transform) qu'une discussion. Du coup je propose de déplacer dans Problème avec mon code (ou Problème résolus même ?) ? (ou bien il y a autre chose sur une discussion en général ? :o)


    Dernière édition par Nihil Scar Winspeare le Dim 19 Fév 2017 - 12:22, édité 1 fois

    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 19 Fév 2017 - 12:21

    Bah en gros j'expliquais juste le pourquoi du comment parce que ça me semblait se prêter à la discussion ^-^
    Je sais pas, c'est à toi de voir à mon avis :)



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Dim 19 Fév 2017 - 12:28

    Bah c'était pas un problème en soit et de plus je propose aussi un lien utile, je crois qu'il peut rester ici non? Puis, on m'a expliquer la différence en transform et transistion. ^^ Ce n'était pas un soucis en soi mais juste un questionnement au départ. ^^



    /

    Kit fait par Arpège. Merci! :love:
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 16:57