IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

362PARTAGES

7  3 
Pourrait-on se passer entièrement de JavaScript au profit de HTML et CSS uniquement ?
Non, je ferai forcément appel à JavaScript côté client.
86 %
Oui, je peux me passer entièrement de JavaScript côté client
10 %
Je n'ai pas d'avis.
3 %
Voter 29 votants
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>×</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

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de 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 ?
7  0 
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 13/10/2016 à 1:21
Una Krevets n'est pas un designer mais une développeuse front-end auteur et contributeur de plusieurs projets open-source JavaScript : https://github.com/una?language=java...b=repositories

De plus, il n'a jamais été question de se passer de JavaScript complètement. Le site http://youmightnotneedjs.com/ utilise lui-même du JavaScript... mais seulement avec parcimonie et en étant toujours consultable avec JS désactivé. Le but d'Una est d'informer les développeurs que de nombreux composants UI peuvent être réalisés sans JavaScript, alors lorsque c'est possible, autant s'en passer.

Cela dit, il faut avoir conscience que JS offre généralement beaucoup plus de flexibilité et de fonctionnalités ainsi qu'une plus grande facilité d'intégration et de composition de ces composants. Bien que ces démos pur CSS soient très intéressantes, on peut difficilement reprocher aux développeurs de céder à la facilité lorsque le planning est serré ou lorsque l'on doit respecter les exigences parfois capricieuses de nos clients vis à vis de l'UI.
7  0 
Avatar de
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 ! (<center>, <font...>, align="..." valign="..."........)
4  0 
Avatar de Kearz
Membre expert https://www.developpez.com
Le 13/10/2016 à 10:44
J'ai l'impression que la news pousse trop dans le sens "il ne faut pas utiliser javascript".
Quand on regarde en détail c'est plutôt "il ne faut pas utiliser javascript quand ce n'est pas nécessaire". Ce qui est logique.

D'ailleurs le site qu'il propose est inspiré d'un site disant que JQuery n'est pas obligatoire. Pourquoi prendre JQuery pour un site balançant deux petits AJAX?
Bref, la même logique. Pourquoi utiliser Javascript pour faire de l'affichage peu complexe?

Je suis assez d'accord avec ce constat. Si on t'autorise a développer pour des navigateurs moderne, autant utiliser ce que HTML5/CSS3 propose.
Et utiliser un maximum la logique:
- HTML : Contenu
- CSS : Affichage
- JS : Action

(Par contre pour les animations, utiliser du CSS c'est bien mais bon, encore faut-il qu'on nous laisse le temps de le faire.
Quand le timing est limite, utiliser une librairie JS, c'est quand même pratique.)
4  0 
Avatar de ABCIWEB
Expert éminent sénior 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
3  0 
Avatar de koyosama
Membre éprouvé https://www.developpez.com
Le 13/10/2016 à 9:58
Je pense que le gars a fume une bon coup quand il a dit cela.
Je suis d'accord avec tout ce qui est animation. Je me rappelle quand Google a fait la promotion de HTML 5 qu'on pouvait tout faire en CSS 3 et HTML5. Apres tout les animations sont justes des sequences de CSS et javascript ne fait que des boucles de ces sequences. Mais CSS3 n'est pas encore la. Donc s'il sort CSS 4 pourquoi pas. Apres en train script Javascript et CSS 3, je sais pas si vous avez deja vu les oeuvres sur CodePen, c'est juste illisible pour non designer. Qu'il essaie de faire la clarté avec un fadein avec du css alors que je pond une ligne de code avec jQuery.

Ensuite la Canvas depend vachement de Javascript.
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.

Enfin il veut faire de l'ajax comment ? Il veut encore mettre cela en server-side aussi. On voit qu'il est juste designer, la data cela existe pas quoi.
C'est comme-ci il me disait que je peux faire du WPF, Windows 10 avec seulement du Xaml.
3  0 
Avatar de zyhou
Membre régulier https://www.developpez.com
Le 12/10/2016 à 18:41
http://shouldiuseacarousel.com/
http://shouldiusealightbox.com/
https://www.doisjeutiliser.fr/
etc...
2  0 
Avatar de 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 )
3  2 
Avatar de 1franck
Membre régulier 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 ?
1  0 
Avatar de SpaceFrog
Rédacteur/Modérateur https://www.developpez.com
Le 13/10/2016 à 8:55
Pour les animations je ne dis pas, CSS3 permet beaucoup de choses bien que la syntaxe soit assez complexe et qu'il faille de bonnes notions de trigonométrie.
Mais il y a un certain nombre d'autres choses pour lesquelles JavaScript restera indispensable.
Pour limiter par exemple des requêtes au serveur et pour un confort d'utilisation du site JS permet de réaliser des vérifications complexes sur des chaines ou des numériques.
Je ne vois pas l’intérêt d'aller rajouter une couche au css pour cela.
CSS comme son nom l'indique c'est le Style.

On retombe dans l'éternelle guéguerre entre graphistes et développeurs ...
1  0