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 12 octobre 2016 à 17:57, par Olivier Famien

1.1KPARTAGES

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

<!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

<!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

La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.

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

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :