Le CSS et ses règles

Dim 19 Fév 2017 - 0:43

Marie

Age : 35Messages : 2206

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.

*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:

Dim 19 Fév 2017 - 9:36

Sparrow-style

Age : 39Messages : 32055

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^^

Dim 19 Fév 2017 - 11:17

Marie

Age : 35Messages : 2206

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.

Dim 19 Fév 2017 - 11:45

Cheshire Cat

Age : 27Messages : 975

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 :)

Dim 19 Fév 2017 - 11:50

Marie

Age : 35Messages : 2206

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. :)

Dim 19 Fév 2017 - 12:04

Cheshire Cat

Age : 27Messages : 975

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 ^-^

Dim 19 Fév 2017 - 12:11

Marie

Age : 35Messages : 2206

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.

Dim 19 Fév 2017 - 12:14

Cheshire Cat

Age : 27Messages : 975

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

Dim 19 Fév 2017 - 12:20

Nihil Scar Winspeare

Messages : 5244

Dim 19 Fév 2017 - 12:20

Coucou

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

Dim 19 Fév 2017 - 12:21

Cheshire Cat

Age : 27Messages : 975

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 :)

Dim 19 Fév 2017 - 12:28

Marie

Age : 35Messages : 2206

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. ^^

Contenu sponsorisé

Le CSS et ses règles

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée