Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ?

**jojosbiz** · 13/10/2016, 11h55

Envoyé par koyosama

...
Il oublie aussi qu'on utilise Javascript pour faire tout ce qui est structurel. Car l'epoque des page1, page1, page3 sur mon projet HTML, cela date un peu quand meme. Donc aujourd'hui, on utilise les framework MVC et on connait tous les raisons pour ne pas choisir le server-side pour faire cela...

Moi je ne les connais pas ces raisons.

Une petite explication ou lien ?

**ABCIWEB** · 13/10/2016, 18h59

Il y a une foultitude d'exemples. Quand on construit un formulaire, css permettra d'indiquer les champs indispensables à remplir mais c'est parfois mieux de pouvoir contrôler le contenu et dans ce cas seul javascript pourra le faire. On peut par exemple faire une requête ajax onchange sur un champ "login" pour que le visiteur puisse voir en temps réel si le login indiqué dans le formulaire d'inscription est déjà pris ou non. C'est beaucoup plus pratique et rapide pour lui plutôt que de remplir tous les champs et d'attendre ensuite la réponse serveur pour d'éventuelles corrections.

Cela fait dix ans maintenant que les navigateurs supportent ajax et on s'en sert abondamment aujourd'hui, y compris pour faire de la pagination sans besoin de ré afficher toute la page.

Ou encore dans l'ardoise sous mon nom il y a un module d'upload ajax qui permet l'affichage des informations en temps réel, des sauvegardes automatiques pour permettre la reprise d'upload des gros fichiers, des crop (recadrages) d'images avant upload etc., tout cela n'est possible qu'avec javascript.

Envoyé par fdejaigher

c'est une blague ?? Ou ça manque de spécificités qui rendrait JS "indispensable"...

Je me demande s'il est bien raisonnable de mettre une cinquantaine de photos grand format dans une page html, c'est un calvaire à charger et en plus inutile si le visiteur souhaite n'en regarder qu'une ou deux. Ensuite comment savoir qu'une image est chargée dans le DOM avec css, comment programmer les actions d'un menu de navigation avec css etc. Je pensais que l'énoncé de mon exemple était suffisamment parlant pour rendre js indispensable et donnes-moi des liens si tu peux faire l'équivalent de ces fonctionnalités uniquement avec html/css.

**jojosbiz** · 13/10/2016, 20h41

Je ne sais pas si c'est à moi que tu réponds mais si oui :
Je connais tout cela, je code tout cela depuis de longues années déjà, bien avant la mode des framework...

Ce qui m'intéresse c'est le "aujourd'hui, on utilise les framework MVC" (sous entendu "tout le monde") qui l'air de découlé d'une évidence.

**Beginner.** · 13/10/2016, 20h56

Salut,

Comme certains j'ai constaté qu'il y a du JS dans les exemples...

Sans js, comment feriez-vous un éditeur comme par exemple celui qu'on utilise dans ce forum ?

**TiranusKBX** · 13/10/2016, 21h10

Personnellement je n'utilise pas de Framework Js pour plusieurs raisons

J'écris principalement des webapp qui sont des service de la société pour laquelle je travaille
Comme ça doit tourner sur mobile je doit réduire au maximum l'impact énergétique(de très longes sessions connectées)
Bon Ok j'utilise JQuery mais je n'en abuse pas, c'est juste que les query selectors ne sont pas aussi complets que le sélecteur JQuery
les framework ne sont pas forcément suffisamment customizable pour toutes les fonctions à implémenter(ou alors ça demande beaucoup de temps)
Devoir charger plein de fichiers différents(j'ai une page php qui retourne tous le contenus de mes fichiers(20) js en une requête) vide bien la batterie du terminal(vus qu'il y a encore peut de support http/2.0) et j'en revient au point N°2

Bon ensuite il m'arrive aussi de faire des app merdiques à la demande de client et c'est plus rapide à faire sans Framework vus que je suis bien plus rapide sans pour les petits trucs

**danielhagnoul** · 13/10/2016, 21h54

Envoyé par TiranusKBX

[...][*]Bon Ok j'utilise JQuery mais je n'en abuse pas, c'est juste que les query selectors ne sont pas aussi complets que le sélecteur JQuery
[...][/LIST][...]

Je serais curieux de connaître les sélecteurs CSS qui sont utilisables en jQuery et pas en Vanilla JS.

Car document.querySelctor() et document.querySelectorAll() me permettent de faire tout ce que je faisais avant en jQuery (abandonné depuis plus d'un an), inclus les sélecteurs complexes du style querySelectorAll( "td", "#maTable > tbody" ). Que j'utilise sous la forme k$() et k$all(), voir mon blog.

C'est logique, puisque $( selector ) n'est que du sucre syntaxique JS qui utilise querySelector() et querySelectorAll() en priorité depuis plusieurs versions.

**SylvainPV** · 13/10/2016, 23h31

@daniel: il y a tout un paquet de sélecteurs spécifiques à jQuery, bien que la plupart ont un équivalent en CSS3 (dont la spec s'est largement inspirée de jQuery). Mais la syntaxe est plus courte et ils bénéficient d'un meilleur support navigateur. Personnellement je n'utilise plus du tout jQuery, mais certains sélecteurs comme :visible ou :has ont tendance à me manquer.

@TiranusKBX: ok pour réduire l'impact énergétique, mais le raccourci framework = énergivore me paraît un peu précipité. Ce sont les échanges réseau qui consomment le plus, or une SPA avec de bons mécanismes de cache et du JSON diffing fait des économies énormes en requêtes réseau par rapport à un site traditionnel. Seulement faire ce genre d'applications sans framework, c'est compliqué ! Je pense qu'il ne faut pas exclure complètement les frameworks, mais plutôt opter pour des frameworks centrés sur la performance et la taille réduite. Si "framework" est un gros mot, au moins un template de projet avec une toolchain. La présentation de Pokedex.org m'avait fait forte impression à ce propos.

**TiranusKBX** · 14/10/2016, 06h41

@danielhagnoul
j'ai un exemple pour toi
imaginons que tu ai des balises comme ce qui suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class="tp1" attr1="val1" attr2="val2"></div>
<div class="tp1" attr1="val1" attr2="val3"></div>
<div class="tp1" attr1="val4" attr2="val5"></div>
<div class="tp2" attr1="val6" attr2="val7"></div>
<div class="tp2" attr1="val6" attr2="val8"></div>

donc trions
'.tp1[attr1="val1"]' ça passe
'.tp1[attr1="val1"][attr2="val3"]' la ça ne marche pas et pourtant pour css c'est parfaitement valide(en fait ça le supporte sur la plupart des navigateurs depuis 3 à 6 mois mais je doit tenir compte des terminaux non à jour)

il y a aussi pour les chose du genre '.tp1[attr1="val1"], .tp2[attr1="val6"][attr2="val8"]'

**danielhagnoul** · 14/10/2016, 11h58

Envoyé par TiranusKBX

@danielhagnoul
j'ai un exemple pour toi [...]

Évidemment, pour les navigateurs obsolètes (genre IE9-) $( selector ) reste la solution pratique.

Pour les navigateurs dignes de ce nom et se mettant à jour automatiquement, il n'y a pas de problème :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="tp1" attr1="val1" attr2="val2">a12</div>
<div class="tp1" attr1="val1" attr2="val3">b13</div>
<div class="tp1" attr1="val4" attr2="val5">c45</div>
<div class="tp2" attr1="val6" attr2="val7">d67</div>
<div class="tp2" attr1="val6" attr2="val8">e68</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
klog( k$( ".tp1[attr1='val1'][attr2='val3']" ).textContent );
 
for( let elem of k$all( ".tp1[attr1='val1'], .tp1[attr1='val4'][attr2='val5']" ) ){
  klog( elem.textContent );
}

**danielhagnoul** · 14/10/2016, 16h21

Envoyé par SylvainPV

[...] certains sélecteurs comme :visible ou :has ont tendance à me manquer. [...]

Pour :hidden c'est simplement height = 0 et width = 0 et si ce n'est pas :hidden c'est automatiquement :visible.

Pour :has :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ko n0">
  Hello hors p
</div>
<div class="ok n1">
  <p>Hello dans p</p>
</div>
<div class="ok n2">
  Hello hors p
  <p>Hello dans p</p>
</div>
<div class="ok n3">
  Hello hors p
  <div class="ok n4">
    <p>Hello dans p</p>
  </div>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 // $( selector ).has( "p" );
const
  selectorHas = ( has, selector ) => {
    return Array.from( document.querySelectorAll( selector ) ).filter( ( item, i ) => {
      return item.contains( item.querySelector( has ) );
    });
  };
 
// debug
for( let elem of selectorHas( "p", "div" ) ){
  console.log( elem.classList );
}

EDIT 2016-10-15 11:06

Je ne sais pas pourquoi ni comment, mais ci-dessus la signature de la fonction est inversée.
Il est préférable de suivre l'ordre donné par le nom de la fonction et de donner une valeur par défaut : const selectorHas = ( selector = "div", has = "p" ) => { ... }.

**shenron666** · 21/10/2016, 11h20

Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ?
Un designer pense que cela est possible, quel est votre avis ?

Sériously...

Invité · 21/10/2016, 11h53

Bon.
Comme je l'ai dit dans mon 1er message, la question est mal posée.

Mauvaise question -> mauvaises réponses -> mauvais sondage -> résultat du sondage sans intérêt

Elle aurait certainement dû être :

"Pour le design (mise en page, animations,...), pourrait-on se passer entièrement de JavaScript au profit de HTML et CSS uniquement ?

Ca aurait évité beaucoup de blabla inutile...
Et tout le monde aurait été d'accord sur le fait que, si possible et tant que faire se peut, il est préférable de privilégier CSS.

J'aurais aimé voir et avoir plus d'exemples concrets, où le CSS permet de se passer de JavaScript.
Ca aurait été plus constructif.

**Asdra** · 23/04/2018, 14h51

Je propose que l'on arrête de faire du C / C++ mais qu'on utilise des jpeg et gifs animés à la place.

Merci

Affichage des résultats du sondage: Pourrait-on se passer entièrement de JavaScript au profit de HTML et CSS uniquement ?

Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ?

JavaScript

Discussions similaires

Partager

Partager