28111 sujets

CSS et mise en forme, CSS3

Méthode Checkbox ou Ajax Jquery ?




Bonjour à tous,

Grâce à Grafikart j'ai découvert qu'on pouvait remplacer le OnClick du JS par des checkbox cachées.

Description du processus pour ceux qui connaissent pas :
Plutôt que de créer un script JS pour dire "Si je clique ici, ouvrir ça" on remplace en HTML la balise A (lien) par un Label. Lors du clic sur ce Label, on coche une checkbox cachée (grâce à l'attribut For). Et en CSS on dit "Par defaut, cacher l'élément" et "Si cette élément est situé à côté de la checkbox coché, alors l'afficher". Cette méthode implique d'avoir tous les éléments en HTML inclus dans le même fichier et un long fichier CSS(J'espère que j'ai bien décris le truc ^^ sinon je réexplique)

J'utilise cette méthode pour remplacer mes appel en Ajax avec JQuery.
Sauf que maintenant il me viens cette question : Qu'est-il le plus performant entre une longue feuille HTML et CSS avec pleins d'input cachés et un Appel Ajax avec JQuery ?
Hello,
je trouve ton sondage un peu complexe : pour moi, ça dépend des situations.
Par exemple, pour un petit bout de texte, je préfère l'avoir directement dans ma page, ça m'evite de lancer une requête et un traitement script alors que l'élément à afficher est très light. A l'inverse, pour un élément dynamique, je préfère utiliser utiliser de l'ajax. Etc.

Après, j'aime bien utiliser les checkbox cachées pour afficher/cacher mes éléments, bien que je me demande si c'est vraiment top niveau accessibilité.

Voilà, ça ne t'aide pas trop pour ton sondage Smiley confused .

Bye
J'ai fait le sondage à l'arrache x)

Ca confirme ce que je pensais. Après viens aussi la question de compatibilité entre les navigateurs et les différents supports (Mobiles, Mac, Tablette). Laquel des 2 méthodes est plus 'responsive' et mieux pris en charge ? Je connais le site JSFiddle pour comparer des scripts JS. Est-ce qu'il existerait la même chose mais pour voir le temps de chargement de la page, les performances nécéssaires ...etc ?
Modérateur
Bonjour,

burnout293 a écrit :
Cette méthode implique d'avoir tous les éléments en HTML inclus dans le même fichier et un long fichier CSS(J'espère que j'ai bien décris le truc ^^ sinon je réexplique)

Je ne vois pas en quoi l'HTML ou le CSS devraient être spécialement longs?

burnout293 a écrit :
J'utilise cette méthode pour remplacer mes appel en Ajax avec JQuery.

Cette méthode ne permet pas de remplacer de l'Ajax pourtant, seul js peut faire de l'ajax.

burnout293 a écrit :
Sauf que maintenant il me viens cette question : Qu'est-il le plus performant entre une longue feuille HTML et CSS avec pleins d'input cachés et un Appel Ajax avec JQuery ?

La performance je n'en sais rien et je m'en fout un peu. Par contre cette technique est très mauvaise et à éviter pour les raisons suivantes:

- Un input c'est pour récolter des données, pas pour créer des interactions sur la page.

- Ce système utilise le fait que le label active/désactive au click la checkbox. Si ce comportement est très répandu, il ne fait partie d'aucun standards. C'est libre au user-agent de faire ce qui leur semble bien du label. Certains navigateurs mobiles ne l'implémentent pas ainsi par deéfaut (ios jusqu'à 7 en tout cas). On repose l'interaction sur le bon vouloir du navigateur.

- En jQuery, une ligne de js pour régler tous les cas d'une page suffit. Avec un aria-controls qui va bien sur le HTML. Le boutton sera: un <button>, éventuellement un <a>.

- Eviter du javascript superflu pour de la misen en page avec du CSS c'est bien. Tordre le cou de l'HTML et du CSS pour obtenir une bricole qui permet de se passer de js pour ce à quoi il sert, c'est mal.
kustolovic a écrit :

Je ne vois pas en quoi l'HTML ou le CSS devraient être spécialement longs?

Un exemple un peu extrême : Pour éviter d'avoir à changer de page, On change juste le contenu du body. Tout le HTML est sur une page.
kustolovic a écrit :

Cette méthode ne permet pas de remplacer de l'Ajax pourtant, seul js peut faire de l'ajax.

Ce que j'entendais par la c'était plutôt que de générer du HTML avec Ajax, il est déjà tout prêt mais juste caché. Évidement ça fonctionne que si le contenu à afficher n'est pas dynamique. Dans mon cas il s'agit d'afficher des formulaires vides et des sous-menu.

Pourquoi serait-il interdit de tricher avec le HTML ? Smiley langue
Quand tu dis que certains navigateurs ne prennes pas en charge le click du label je veux bien te croire j'en sais rien. Mais IE est constamment en train de râler avec les fonctions JS. On doit limite doubler le nombre de ligne ou utiliser de vieilles fonctions pas optimisées. Donc je trouve ça un peu kiff kiff. Smiley confus

J'adore le JS ! C'est puissant et fait exprès pour ce genre de chose je suis entièrement d'accord. Mais c'est également très lourd. Donc j'essai d'en mettre le moins possible.
C'est comme le Nutella. C'est trop bon mais trop gras, donc j'en préfère prendre une barre de chocolat ^^
Modérateur
burnout293 a écrit :

Ce que j'entendais par la c'était plutôt que de générer du HTML avec Ajax, il est déjà tout prêt mais juste caché. Évidement ça fonctionne que si le contenu à afficher n'est pas dynamique. Dans mon cas il s'agit d'afficher des formulaires vides et des sous-menu.

Ok, donc pas du ajax mais du contenu caché que l'on montre. ça se justifie dans certains cas. Même si ce n'est pas top sur le référencement ou l'accessibilité.

burnout293 a écrit :
Pourquoi serait-il interdit de tricher avec le HTML ? Smiley langue

C'est marqué sous le logo: «communauté d'apprentissage des standards du web». Le but sur Alsacréations c'est d'apprendre et de discuter des bonnes façons de faire: interopérabilité, accessibilité, sémantique, etc. Si tu souhaites juste du code «qui fonctionne» la plupart du temps, ce n'est pas par ici que ça se passe.

burnout293 a écrit :
Mais IE est constamment en train de râler avec les fonctions JS. On doit limite doubler le nombre de ligne ou utiliser de vieilles fonctions pas optimisées. Donc je trouve ça un peu kiff kiff. Smiley confus

On n'est plus en 1998. En js pur cacher/afficher ces valeurs se fait en une douzaine de lignes, compatible IE6. Avec du compatible IE 8+ ou du jquery, c'est deux lignes de code.

burnout293 a écrit :
Mais c'est également très lourd. Donc j'essai d'en mettre le moins possible.

Il faut en mettre quand nécessaire, c'est tout. Le moteur d'analyse et d'application des CSS ce n'est pas léger léger non plus. En mettre «le moins possible» c'est juste absurde comme méthode de travail. De plus, quatre interactions click sur une page, tu ne vas pas faire cramer le navigateur de tes visiteurs…