Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ?
Pourrait-on se passer de JavaScript au profit de HTML et CSS uniquement ?
Un designer pense que cela est possible, quel est votre avis ?
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:
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:
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:
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 ?
:fleche: Pensez-vous que ces réalisations avec CSS et HTML puissent permettre d’abandonner JavaScript ?
Voir aussi
:fleche: 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
:fleche: 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
:fleche: La Rubrique JavaScript, Forum JavaScript, Cours et tutoriels JavaScript, FAQ JavaScript
