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

Le , par Olivier Famien, Chroniqueur Actualités
Pourrait-on se passer entièrement de JavaScript au profit de HTML et CSS uniquement ?
JavaScript est un langage de programmation qui n’est plus à présenter. Dans presque tous les domaines, ce langage est utilisé pour développer des projets. Avec la grande prolifération d'outils et de langages dérivés de JavaScript, l’on a un grand nombre de projets JavaScript qui sont nés. Du côté frontend comme backend, l’on a diverses solutions JavaScript qui existent et font la joie de nombreuses personnes. Certains ont même poussé l’utilisation de JavaScript et ont par exemple conçu des plateformes de bureau web basées sur JavaScript comme OS.js. D’autres par contre maniant les rouages de langage sont parvenus à mettre en œuvre des outils moins célèbres comme Ransom32, un ramsomware codé en JavaScript.

À lumière de tous ces exemples, l’on peut constater combien de fois ce langage est dominant dans la sphère des développeurs et des possibilités énormes offertes par celui-ci. Toutefois, avec la sortie des nouveaux standards HTML et CSS, certaines implémentations qui étaient l’apanage de JavaScript sont maintenant possibles avec HTML et CSS.

Un développeur a mis en ligne une série d’actions réalisées avec HTML et CSS, alors que celles-ci sont généralement effectuées avec JavaScript. Pour réaliser par exemple un slider, là où les designers utiliseront JavaScript, Una Kravets également designer montre qu’il est possible d’obtenir les mêmes résultats en se servant CSSSlider ou encore Pure CSS Slider. Pour ceux par exemple qui souhaitent concevoir des galeries photo, il est également possible d’utiliser HTML et CSS en faisant appel à l’outil Gallery.CSS au lieu d’utiliser JavaScript.

Pour réaliser par exemple un accordéon, il est possible d’utiliser le code HTML et CSS suivant :

Code HTML : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html> 
	<html > 
	<head> 
	<meta charset="UTF-8"> 
  
	<title>CodePen - CSS Only Accordion: youmightnotneedjs.com</title> 
  
	<style> 
        input[type="radio"] { 
        position: absolute; 
        opacity: 0; 
        } 
        input[type="radio"]:focus + label { 
        color: black; 
        background-color: wheat; 
        } 
         
        label { 
        position: relative; 
        display: block; 
        cursor: pointer; 
        background: #c69; 
        color: white; 
        padding: .5em; 
        border-bottom: 1px solid white; 
        } 
         
        section { 
        height: 0; 
        transition: .3s all; 
        overflow: hidden; 
        } 
         
        #toggle1:checked ~ #content1, 
        #toggle2:checked ~ #content2, 
        #toggle3:checked ~ #content3, 
        #toggle4:checked ~ #content4 { 
        height: 150px; 
        } 
         
        body { 
        font-family: monospace; 
        font-size: 1.5; 
        } 
         
        p { 
        padding: 0 2em; 
        } 
         
        .togglebox { 
        margin: 0 auto; 
        width: 50%; 
        border: 1px solid #c69; 
        } 
         
        </style> 
  
	<script> 
        window.console = window.console || function(t) {}; 
        </script> 
  
	<script> 
        if (document.location.search.match(/type=embed/gi)) { 
        window.parent.postMessage("resize", "*"); 
        } 
        </script> 
  
	</head> 
  
	<body translate="no" > 
  
	<div class="togglebox"> 
	<input id="toggle1" type="radio" name="toggle" /> 
	<label for="toggle1">Label 1</label> 
	<section id="content1"> 
	<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea veritatis cumque unde dolore quasi hic praesentium, in consequatur, incidunt alias iure illum facilis qui odit excepturi tenetur, error eligendi.</span><span>Accusamus quasi eveniet dolorem, nihil cupiditate, facilis id quas consectetur mollitia quod minima excepturi maiores. A, molestias suscipit sunt provident libero magnam quas dolores aspernatur totam tenetur vel quis. Officia?</span></p> 
	</section> 
  
	<input id="toggle2" type="radio" name="toggle" /> 
	<label for="toggle2">Label 2</label> 
	<section id="content2"> 
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tempora quia fugit eveniet nostrum amet quod aliquid repellendus sint. Adipisci voluptas ratione doloremque delectus vel nemo cumque autem beatae minus.</p> 
	</section> 
  
	<input id="toggle3" type="radio" name="toggle" /> 
	<label for="toggle3">Label 3</label> 
	<section id="content3"> 
	<img src="https://unsplash.it/600/150?number=200" alt="" /> 
  
	</section> 
	</div> 
  
	</body> 
	</html>

Pour valider un formulaire par exemple, il est également possible d’utiliser uniquement HTML et CSSS, là où certains se tourneraient vers JavaScript :

Code HTML : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html> 
	<html > 
	<head> 
	<meta charset="UTF-8"> 
  
	<title>CodePen - HTML Form Validation: youmightnotneedjs.com</title> 
  
	<style> 
        body { 
        font-family: monospace; 
        } 
         
        button { 
        background-color: wheat; 
        padding: .5em; 
        border: none; 
        } 
         
        form { 
        width: 50%; 
        display: block; 
        margin: 0 auto; 
        } 
         
        input, 
        textarea { 
        width: 100%; 
        margin-bottom: 1em; 
        } 
         
        </style> 
  
	<script> 
        window.console = window.console || function(t) {}; 
        </script> 
  
	<script> 
        if (document.location.search.match(/type=embed/gi)) { 
        window.parent.postMessage("resize", "*"); 
        } 
        </script> 
  
	</head> 
  
	<body translate="no" > 
  
	<form> 
	<!-- Case insensitive binary choice --> 
	<div> 
	<label for="item1">Would you prefer a banana or a cherry?</label> 
	<input id="item1" pattern="[Bb]anana|[Cc]herry"> 
	</div> 
  
	<!-- Email validation --> 
	<div> 
	<label for="item2">What's your e-mail?</label> 
	<input id="item2" type="email" name="email"> 
	</div> 
  
	<!-- Max length validation --> 
	<div> 
	<label for="item3">Leave a short message</label> 
	<textarea id="item3" name="msg" maxlength="140" rows="5"></textarea> 
	</div> 
  
	<!-- Numeric + Symbol pattern as required field --> 
	<div> 
	<label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/> 
	<input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required > 
	</div> 
  
	<button type="submit">Submit</button> 
	</form> 
  
	</body> 
	</html>

Pour afficher une alerte en cliquant sur un bouton, il est possible d’utiliser le code HTML ET CSS suivant sans faire intervenir JavaScript :

Code HTML : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html> 
	<html > 
	<head> 
	<meta charset="UTF-8"> 
  
  
	<title>CodePen - CSS-Only Modal: youmightnotneedjs.com</title> 
  
	<link rel="stylesheet" href="//codepen.io/assets/reset/normalize.css"> 
  
	<style> 
        .modal { 
        opacity: 0; 
        visibility: hidden; 
        display: -webkit-box; 
        display: -webkit-flex; 
        display: -ms-flexbox; 
        display: flex; 
        -webkit-box-align: center; 
        -webkit-align-items: center; 
        -ms-flex-align: center; 
        align-items: center; 
        -webkit-box-pack: center; 
        -webkit-justify-content: center; 
        -ms-flex-pack: center; 
        justify-content: center; 
        position: fixed; 
        width: 100%; 
        height: 100%; 
        -webkit-transition: 0.3s ease-in-out; 
        transition: 0.3s ease-in-out; 
        } 
         
        button:focus + .modal { 
        opacity: 1; 
        visibility: visible; 
        } 
         
        body { 
        font-family: monospace; 
        display: -webkit-box; 
        display: -webkit-flex; 
        display: -ms-flexbox; 
        display: flex; 
        -webkit-box-align: center; 
        -webkit-align-items: center; 
        -ms-flex-align: center; 
        align-items: center; 
        -webkit-box-pack: center; 
        -webkit-justify-content: center; 
        -ms-flex-pack: center; 
        justify-content: center; 
        min-height: 100vh; 
        } 
         
        button { 
        -webkit-box-flex: 1; 
        -webkit-flex: 1; 
        -ms-flex: 1; 
        flex: 1; 
        background-color: #c69; 
        border: none; 
        padding: 1.5em; 
        max-width: 30%; 
        color: white; 
        -webkit-transition-duration: .25s; 
        transition-duration: .25s; 
        } 
        button:hover { 
        background-color: #993366; 
        } 
         
        span { 
        position: absolute; 
        top: .2em; 
        right: .5em; 
        font-size: 1.5em; 
        cursor: pointer; 
        } 
        span:hover { 
        color: #c69; 
        } 
         
        .modal { 
        -webkit-box-flex: 1; 
        -webkit-flex: 1; 
        -ms-flex: 1; 
        flex: 1; 
        background: wheat; 
        border: 1px solid #c69; 
        border-radius: 3px; 
        height: 120px; 
        max-width: 50%; 
        } 
        .modal p { 
        font-size: 1.5em; 
        } 
         
        </style> 
  
	<script> 
        window.console = window.console || function(t) {}; 
        </script> 
  
	<script> 
        if (document.location.search.match(/type=embed/gi)) { 
        window.parent.postMessage("resize", "*"); 
        } 
        </script> 
  
	</head> 
  
	<body translate="no" > 
  
	<button>Click Me</button> 
  
	<div class="modal"> 
	<span>&times;</span> 
	<p>Hello Beautiful!</p> 
	</div> 
  
	</body> 
	</html>

Plusieurs autres exemples sont encore disponibles afin de monter qu’il est possible d’utiliser CSS et HTML uniquement là où il fallait impérativement recourir à JavaScript.Pour certains, un des avantages mis en avant en mettant de côté JavaScript est que cela permet un rendu uniforme sur tous les navigateurs sans avoir besoin de prendre en compte les spécificités de traitement JavaScript pour chaque navigateur. Par ailleurs, eu égard au fait que le code s’exécute directement avec le navigateur et non un moteur JavaScript, d’autres soulignent que les performances du rendu seront améliorées et les éléments du DOM seront affichés assez rapidement.

Tous ces éléments poussent certaines personnes à affirmer que l’on pourrait se passer de JavaScript pour la réalisation de certaines tâches côté client. D’autres par contre estiment que ces implémentations avec CSS et HTML sont limitées et sont loin de pouvoir supplanter JavaScript que ce soit côté frontend ou backend. Ces derniers soulignent que réaliser deux trois implémentations sans Javascript ne peut aucunement entamer l'omniprésence de JavaScript. Quel est votre avis sur la question ?

Source : Blog Una

Et vous ?

Pensez-vous que ces réalisations avec CSS et HTML puissent permettre d’abandonner JavaScript ?

Voir aussi

Est-il possible de se passer de JavaScript sur la toile ? Après avoir désactivé JavaScript, Klint le réactive pour profiter de ses avantages
Les développeurs abusent-ils des scripts ? Un ingénieur rédige des scripts dès qu'une tâche ennuyeuse lui prend plus de 90 secondes

La Rubrique JavaScript, Forum JavaScript, Cours et tutoriels JavaScript, FAQ JavaScript


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse Signaler un problème

Avatar de nchal nchal - Membre expérimenté https://www.developpez.com
le 12/10/2016 à 18:10
Je pense que si les gens pouvaient (facilement) se passer de JS, ils ne se gêneraient pas vu le merdier que ça devient (et je ne dis pas que CSS est la meilleur alternative )
Avatar de jreaux62 jreaux62 - Rédacteur/Modérateur https://www.developpez.com
le 12/10/2016 à 18:18
Citation Envoyé par Olivier Famien  Voir le message
1/ Tous ces éléments poussent certaines personnes à affirmer que l’on pourrait se passer de JavaScript pour la réalisation de certaines tâches côté client.

2/ D’autres par contre estiment que ces implémentations avec CSS et HTML sont limitées et sont loin de pouvoir supplanter JavaScript que ce soit côté frontend ou backend. Ces derniers soulignent que réaliser deux trois implémentations sans Javascript ne peut aucunement entamer l'omniprésence de JavaScript.

Quel est votre avis sur la question ?

Comme disait Coluche :
"Je ne suis ni pour , ni contre, bien au contraire !"

Plus sérieusement, la question est mal posée (?) , car les deux opinions ne sont pas antinomiques (pas contradictoires) : je suis donc d'accord avec... les deux ! (il manque la case pour voter !)
  • 1/ pour la réalisation de certaines tâches côté client
  • 2/ sont loin de pouvoir supplanter JavaScript


On peut d'ores et déjà réaliser de nombreuses animations / transitions /... en CSS.
Et de nouvelles fonctionnalités vont encore apparaitre dans l'avenir.

Mais jusqu'à présent, le CSS n'est pas en mesure de remplacer toutes les fonctionnalités de JavaScript.
N.B. Si je reprends le 1er exemple, en remplaçant une ligne :
Code css : Sélectionner tout
1
2
3
4
5
6
	#toggle1:checked ~ #content1, 
	#toggle2:checked ~ #content2, 
	#toggle3:checked ~ #content3, 
	#toggle4:checked ~ #content4 { 
	height: auto; /* auto au lieu d'une valeur fixée 150px; */ 
	}
Problème : plus d'animation, ça s'ouvre brutalement.

"C'est peut-être un détail pour vous, mais pour moi ça veut dire beaucoup..."


A mon avis, l'important est surtout de savoir QUAND et COMMENT utiliser les BONS outils, à BON escient.

D'un autre coté, le CSS permet de "styler" le contenu, et a été conçu justement pour séparer le style du contenu.
Je ne suis pas persuadé que lui donner un autre rôle (validation de formulaire,...) soit une bonne idée.

Ou alors, il faut revenir encore plus en arrière, et se passer aussi de CSS en ré-introduisant les vieilles balises et attributs HTML obsolètes ! (
, , align="..." valign="..."........)
Avatar de palnap palnap - Membre actif https://www.developpez.com
le 12/10/2016 à 18:26
Perso, j'aimerai davantage pouvoir me passer de CSS
Avatar de TiranusKBX TiranusKBX - Expert confirmé https://www.developpez.com
le 12/10/2016 à 18:34
La on retourne sur une actus à trolls.
CSS à une usage et JS sert à faire TOUT ce qui est en dehors de l'usage de HTML+CSS.
Vous allez demander à CSS de faire des requêtes Ajax toutes les minutes ?(autant faire une iframe avec une balise meta refresh et encore tu fait des modification que dans l'iframe) ou bien des calculs complexes ?
si oui vous fumez quoi ?
Avatar de zyhou zyhou - Membre régulier https://www.developpez.com
le 12/10/2016 à 18:41
Avatar de gros_bidule gros_bidule - Membre du Club https://www.developpez.com
le 12/10/2016 à 18:47
En même temps un designer qui parle de code...

C'est en récoltant ce genre d'avis illégitime que l'on entend (et que des pseudo-chroniqueurs cyrilhanounesques mettent en avant) des bêtises telles que "les développeurs modernes ne font qu'assembler des librairies, ils ne codent plus". Elle est même passé sur developpez.net si je me souviens bien.

Parcontre ce qui serait vraiment, mais alors vraiment bien, ce serait un support complet d'ES6 dans les navigateurs. Là, tout de suite, si possible avant Half-Life 3
Avatar de 23JFK 23JFK - Membre expérimenté https://www.developpez.com
le 12/10/2016 à 19:03
Moi je suis pour toute initiative qui viserait à éliminer JavaScript. Un bon 90% des sites sont devenus inconsultables sans JS, les modules JS à charger étant devenus obèses, ils pèsent sur les ressources systèmes au point de pouvoir bloquer une machine qui peut attendre indéfiniement qu'un script mal conçu (une banalité dans l'univers JS) s'achève.
Avatar de 1franck 1franck - Membre du Club https://www.developpez.com
le 12/10/2016 à 21:41
hahaha très bonne blague... attends, il est sérieux?!
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 12/10/2016 à 22:48
On peut se passer de javascript au profit de css pour certaines animations assez basiques, pour le reste c'est encore largement insuffisant pour des besoins courants. Je fais comment par exemple pour faire afficher un diaporama d'une cinquantaine de photos grand format avec juste html et css ?

@23JFK Dans 99% des cas (sauf site amateur débutant) ce ne sont pas les lib ni le code javascript qui sont longs à charger mais plutôt les requêtes complémentaires hors domaine comme les pub, les stats google ou autres traceurs, l'intégration de vidéos youtube, etc. Faut pas confondre l'outil et l'usage abusif que certains en font. Sinon c'est comme interdire l'usage du maillet parce que certains s'en servent pour en assommer d'autres. Même sans javascript les sites qui le souhaitent trouveraient bien d'autres moyens pour nous assommer de pub et autres traceurs et au final avec des pages sans doute encore beaucoup plus longues à charger.
Mais vous n'êtes pas obligés de consulter ces sites, et si vous en fabriquez, vous n'êtes pas obligés non plus d'intégrer tous ces éléments. Ce n'est pas la technologie qui est à condamner mais l'usage que certains sites en font. Bien dosé, javascript permet une meilleure expérience utilisateur. Suffit de faire le tri
Avatar de 1franck 1franck - Membre du Club https://www.developpez.com
le 12/10/2016 à 22:57
Effectivement, je crois que l'on pourra remplacer totalement un jour remplacer le javascript par le css pour l'aspect esthétique, mais problamement jamais pour le reste...

Citation Envoyé par ABCIWEB Voir le message
On peut se passer de javascript au profit de css pour certaines animations assez basiques, pour le reste c'est encore largement insuffisant pour des besoins courants. Je fais comment par exemple pour faire afficher un diaporama d'une cinquantaine de photos grand format avec juste html et css ?
Contacter le responsable de la rubrique Accueil