Pur Css / une odysée sans JavaScript
Dans les pages Web affichées par votre navigateur (i.e. Firefox, Chrome, Edge...), JavaScript est souvent utilisé pour réaliser des boutons, des menus, des diaporamas, et un tas d'autres fonctionnalités. Nous allons voir dans cet article que pour la plupart de ces fonctionnalités, JavaScript n'est pas indispensable.
Que fait Javascript ?
Une page Web est constituée de blocs (HTML) et de directives pour styliser ces blocs (CSS):
- la partie HTML contient du texte et des références à des médias (images, sons et vidéos)
- la partie CSS définit la police d'écriture, les mesures ,les couleurs et parfois des images à utiliser en arriérer plan
Un fois copiée sur votre ordinateur (c'est ce commence par faire le navigateur ), la page est interprétée avec ces informations. À cette étape, le contenu de la page Web est fixe, c'est à dire qu'aucun bloc de texte ne peut subitement apparaître.
Pourtant il est commun de naviguer sur des sites dont les pages sont partiellement rechargées, par exemples les chats (=ＴェＴ=) , qui affichent le temps passé sur la page, ou encore font apparaître des évènements lorsqu'on clique sur la souris. Dans ce cas, la page contient des directives dans un language plus permissif que le CSS.
JavaScript est ce langage. Le navigateur lit le script et peut sur ordre du script changé le contenu de la page ou faire de nouvelles requêtes sur le Web liées à votre comportement.
Pour des raisons d'anonymat, ou pour éviter des popups, une partie (minoritaire peut-être) des internautes utilise des bloqueurs de script (tels que NoScript).
C'est pour éviter de pénaliser ces personnes, qu'on va essayer de faire des sites qui n'utilent pas (obligatoirement) JavaScript.
Pour marquer l'interaction, les scripts ont souvent pour effet de rendre un élément actif, en indiquant que l'élément en question appartient à la classe CSS "active". L'élément aura sera alors affiché d'une manière particulière.
Certains éléments HTML n'ont pas besoin de JavaScript, pour avoir des états similaires.
- presque tous les éléments ont un état lié au survol de la souris, ou à la focalisation au clavier
- les liens ont en plus de cela des états : visité; en cours de clic
- les cases à cocher ont deux états : coché, décoché
- les boutons "radio" ont des états exclusifs si ils portent le même nom
C'est donc avec ces éléments qu'on va jouer pour créer l'interactivité.
La première chose à comprendre pour ajouter des évènements en CSS3, est qu'il est impossible de cibler un élément HTML précédent ou parent. Comme rappelé par son nom Cascading Style Sheet, CSS est prévu pour faire les choses dans un ordre et un seul. On va donc faire attention à placer les éléments HTML au bon endroit et les sélecteurs CSS dans le bon ordre.
On va commencer par un cas simple et répendu avec les cases à cocher. Une case à cocher peut-être associée à plusieurs étiquettes. Cela permet de changer l'état de la case à cocher sans cliquer sur la case.
HTML
<input type="checkbox" id="bouton-0"/>
<label for="bouton-0">L'élément est activé</label>
<label for="bouton-0">Cliquer ici pour activer l'élément</label>
CSS
input[id^="bouton-"]:checked ~ label {
display:none;
cursor:pointer;
border: 1px solid gray;
width:36ch;
text-align:center;
padding: 1ch;
background: whitesmoke;
border-radius: 5px;
}
input[id^="bouton-"]:checked + label,
input[id^="bouton-"]:not(:checked) + label + label {
display:inline-block;
}
Ici, le CSS décrit le comportement qui est de cacher l'étiquette qui ne correspond pas à l'état. Dans le même principe, on peut cacher de paragraphes, des mots, ou des blocs.
L'alternative aux étiquettes (label) serait de placer une case à cocher invisible au dessus d'autres éléments. Le prérequis de cette méthode est de calculer en détails la position et la taille de chaque élément. C'est ce qu'on fait dans l'exemple suivant. Remarquons le troisième bloc, qui, après avoir coché la case, sort de la zone cliquable. L'utilisation d'une zone cliquable s'oppose à l' qui permet de cocher ou décocher la case depuis n'importe quelle zone de la page.
Passons à la partie technique. Voici un tableau regroupant des fonctionnalitées souvent réalisées en JavaScript:
| Composant | Action | Possible sans JavaScript |
|---|---|---|
| Boutons | Au clic sur un bouton, un élément apparaît dans la page. | Oui. |
| Menus déroulants et accordéons | Il s'agit de déplier un famille d'éléments. Au clic, les élément enfants apparaissent. | Oui |
| Diaporamas | On fait défiler des images, avec ou non la possibilité pour l'utilisateur de controler leur apparition | Oui |
| Smooth-Scrolling | Lorsqu'on clique sur un lien interne à la page, le navigateur fait bouger la page pour donner l'impression qu'elle glisse vers sa destination | Non, il n'est pas possible d'avoir d'impact précis sur le défilement de la page sans JavaScript. |
- L'ajout de classes CSS sur des éléments HTML ciblés. Lorsque que l'élément aura ou perdra la classe, le navigateur lui appliquera le style qui lui est associé.
- L'appel à des fonctions spécifiques, permettant de faire défiler des éléments dans la pages.
- L'ajout et la suppression des blocs HTML.
En fait, à part le cas du Smooth-Scrolling, ces effets visuels sont réalisables sans JavaScript. Dans la partie suivante on ne va pas détailler comment faire chacune de ces choses mais seulement poser les principes de bases.
Pour la réalisation d'un chat (=ＴェＴ=), dans des applications faisant des calculs plus ou moins complexes, pour des évènements qui nécessite de déplacer la page, ou de charger dynamiquement des vidéos parmis des centaines de vidéos... dans tous ces cas, JavaScript est indispensable.
Dés lors que des choses peuvent être construite en série de manière automatique, il est intéressant d'utiliser JavaScript. Un script de 20 lignes, pollura moins le réseau internet que 200 lignes d'éléments de formulaire. Si l'on veut ajouter une fioriture en JavaScript, on peut toujours prévoir une balise <noscript>.
