CSS sans douleur avec jQuery

mardi 13 mai 2014
par  Alain BUSSER

L’utilisation de jQuery permet de facilement donner un aspect professionnel à un fichier html, en manipulant les propriétés CSS de celui-ci par programme. C’est ainsi qu’ekoarun représente les degrés des monômes par des classes CSS. L’article ci-dessous est le compte-rendu d’un exposé fait le 22 avril pour la journée académique de l’ISN, mais dans des conditions telles que la démonstration n’était pas très convaincante (vidéoprojecteur non reconnu par l’ordinateur, puis couleur rouge manquante ce qui empêche de voir certaines propriétés CSS, et manque de reconnaissance des animations jQuery par le navigateur internet utilisé)...

Note : En cliquant sur une copie d’écran d’un fichier html, on ouvre celui-ci (le fichier html, pas l’écran) dans le navigateur. Ce qui peut donner des effets inattendus sur certains navigateurs...

Une page web est en général faite de trois sortes d’objets :

  1. le contenu (rédigé en html) ;
  2. l’aspect (le rôle de CSS) ;
  3. le comportement (JavaScript).

En général, il est conseillé de séparer autant que possible ces trois catégories. Par exemple, en plaçant tout le CSS dans un fichier à part, avec l’extension .css. Idem pour le JavaScript, souvent éparpillé dans plusieurs fichiers (extension .js). L’un de ces fichiers, jquery.js, est une bibliothèque permettant de manipuler le fichier html, en listant ses éléments ayant un type donné, puis en leur adressant des messages. On va voir quelques exemples d’utilisation, sur une étude de cas : Un fichier html n’ayant que du contenu, qu’on va enrichir au fur et à mesure.

I/ CSS

Voici un fichier html racontant l’histoire d’un explorateur nommé Dalvik, qui cherche un rubis sacré en pleine jungle :

Triste non (le fichier, pas l’histoire) ? Pour améliorer ce document, on va mettre un peu de couleur dedans :

  • le titre principal (h1) [1] écrit en rouge (red) ;
  • les titres secondaires (h2) écrits en bleu (blue) ;
  • les paragraphes (p) écrits en oblique ;
  • les éléments de listes (li) écrits en vert.

Ce qui s’écrit comme ceci en CSS :

  1. h1 {color: red; }
  2. h2 { color: blue; }
  3. p { font-style: oblique; }
  4. li { color: green; }

Télécharger

Voici le résultat obtenu, déjà un peu plus gai :

Mais on peut avoir à mettre en exergue des éléments spécifiques du fichier html, pas seulement des éléments de type html (h1, h2, p, ul, ol, li, table, div etc.). CSS permet de personnaliser son fichier en créant ses propres classes CSS [2], comme par exemple la classe « encadré », notée avec un point initial : .encadré, et à qui on donne une bordure de 0,2 fois la taille d’un caractère [3], de couleur marron [4] et des coins arrondis (de rayon 0,4 fois la taille d’un caractère), et un peu d’ombre pour les mettre encore plus en exergue :

  1. .encadré { border: 0.2em ridge brown;
  2.     border-radius: 0.4 em;
  3.     box-shadow: 0.5em 0.2em 0.1em gray;
  4. }

Télécharger

Alors, pour qu’un élément soit encadré, il suffit dans la partie html, de lui donner comme attribut la classe « encadré » [5], par exemple, pour encadrer le mot « Java », on l’écrit

<span class="encadré">Java</span>

Enfin, lorsqu’on veut s’adresser à un élement unique, on ne va pas inventer une classe juste pour lui, mais lui donner un identifiant unique, avec quelque chose comme

<span id="leMot">rubis</span>

Comme il n’y a qu’un mot qui ait pour identifiant « leMot », on peut se permettre de lui mettre une couleur de fond (du vert), en précédant son identifiant du symbole # :

  1. #leMot { background-color: green; }

Le fichier obtenu est celui-ci :

Dalvik ne peut pas encadrer les serpents
le fichier avec les mots importants encadrés

II/ jQuery

jQuery est un logiciel libre [6], qui considère le fichier html et sa strucure DOM comme un objet à manipuler. Il permet notamment

  • de faire la liste des éléments ayant un type (ou une classe CSS) donné ;
  • de modifier les propriétés CSS pour des éléments donnés (ou de type donné) ;
  • de modifier la structure du fichier html, en déplaçant certains éléments qu’il contient [7] ;
  • de donner des comportements nouveaux à certains de ces éléments.

Pour utiliser jQuery, il est nécessaire de charger le logiciel, en ajoutant dans l’entête du html quelque chose comme

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Et d’appeler la fonction jQuery, qui est une sorte de magicien omnipotent, en écrivant le symbole $, abréviation de « jQuery ». C’est tout !

Remarque : Dans cet article, au lieu d’écrire les scripts en JavaScript, on utilise une surcouche de ce langage, CoffeeScript, qui est nettement plus concise, et a également l’avantage de ressembler à Python (langage).

Pour commencer, comme le fichier html ci-joint comprend 6 titres de niveau h2, il est aisé de les lister. On commence par essayer un

  1. alert $("h2")

mais la boîte d’alerte n’affiche que

[object Object]

qui ne donne pas beaucoup de renseignements : la liste des « h2 » est un tableau JavaScript (ou « objet » générique)... Mais on peut avoir le nombre de h2 dans le fichier, avec

  1. alert $("h2").length

qui, dans le cas présent, affiche le nombre 6. Ainsi, $("h2") est un tableau contenant 6 éléments. Pour avoir le premier titre, il suffit donc de faire $("h2")[0]. Mais évidemment, en affichant ce titre, on a

[object HTMLHeadingElement]

qui explique simplement que $("h2")[0] est un titre. Pour savoir ce qu’il contient, on lui demande de faire un striptease (montrer son contenu html), avec

  1. alert $("h2")[0].innerHTML

qui, dans le cas présent, donne

1) Le temple

Pour avoir les contenus de tous les titres, on peut créer la liste de ceux-ci et afficher ladite liste [8] :

  1. alert (x.innerHTML for x in $("h2"))

Ceci donne cet affichage dans la boîte d’alerte :

1) Le temple,2) La crypte,3) Le Python,4) La fuite,5) La salle du trésor,6) Le rubis retrouvé

III/ jQuery et CSS

On peut maintenant donner une couleur différente aux h2, mais pour cela CSS suffisait. Par contre, CSS ne permet pas de donner une couleur qui dépende de la parité du numéro du titre ! Avec jQuery, il suffit de demander, à condition que le reste du numéro modulo 2 (numéro%2) soit non nul, de mettre la valeur « magenta » dans la propriété « color » des « h2 » :

  1. $ ->
  2.     $("h2").each (x) ->
  3.         $(this).css "color", "magenta" if x%2

Télécharger

Le fichier obtenu ressemble maintenant à ceci :

Dalvik en voit de toutes les couleurs
alternance des couleurs de titres

Note : On pouvait obtenir le même effet avec la propriété « odd » de jQuery :

  1. $("h2:odd").css "color", "magenta"

On peut aussi colorier en rouge tous les paragraphes contenant le mot « rubis » :

  1. $("p:contains('rubis')").css "color", "red"

On constate alors que seuls les derniers paragraphes parlent du rubis en question :

les rubis sont rouges

IV/Gestion des évènements souris

Il est temps maintenant de parler du comportement de certains éléments. Tout d’abord, faire en sorte qu’à chaque clic sur un élément encadré, son contenu s’affiche dans une boîte d’alerte :

  1. $ ->
  2.     $(".encadré").on "click", ->
  3.         alert $(this).text()

Télécharger

Mais plutôt qu’afficher quelque chose de déjà visible, il vaut mieux afficher des informations complémentaires, comme par exemple des définitions. On peut créer un tableau associatif, liant chaque mot à sa définition, et nommé dico [9], et afficher non pas le mot, mais sa définition, avec

  1. $ ->
  2.     $(".encadré").on "click", ->
  3.         alert dico[$(this).text()]

Télécharger

On dirait du Wordpress :

le fichier et son glossaire

Seulement dans Wordpress, il n’y a pas besoin de cliquer sur un mot pour voir sa définition, il suffit de le survoler [10]. Alors on va donner d’autres effets : Au survol d’un mot encadré, celui-ci se met à gonfler, gonfler, gonfler...

On peut déjà modifier la propriété CSS « font-size » au survol :

  1. $ ->
  2.     $(".encadré").on "mouseover", ->
  3.         $(this).css "font-size", "300%"

Télécharger

Mais l’effet est un peu brutal. Alors autant faire appel aux possibilités d’animation de jQuery en demandant que la croissance dure 8000 millisecondes :

  1. $ ->
  2.     $(".encadré").on "mouseover", ->
  3.         $(this).animate {fontSize: "300%"}, 3000

Télécharger

Encore un autre effet (toujours au survol d’un mot encadré) : Encadrer (ou décadrer, selon), le mot d’identifiant « leMot » au début :

  1. $ ->
  2.     $(".encadré").on "mouseover", ->
  3.         $(this).animate {fontSize: "300%"}, 3000
  4.         $("#leMot").toggleClass "encadré"

Télécharger

Alors rien qu’en regardant « le mot », on connaît la parité du nombre de survols qui ont été faits à la souris. Voici le fichier obtenu (à consulter en ligne) :

lettrines animées avec jQuery
ça commence à bouger avec tous ces serpents qui serpentent

V/ jQuery-UI

Pour rendre le fichier vraiment réactif, jQuery-UI, une extension de jQuery, possède une collection de « widgets » très utiles. Et il suffit, une fois chargé jQuery-UI, de demander aux éléments encadrés d’être mobiles (« draggable ») pour qu’ils le soient :

  1. $(".encadré").draggable()

On peut alors parler de lecture active (ouvrir le fichier ci-dessous dans un autre navigateur) :

mots déplaçables
Dalvik a le mal de mer, ça bouge trop !

Cette technologie a permis par exemple de faire ce fichier...


[1« h » comme « header »

[2c’est d’ailleurs comme cela que les exemples CSS sont syntaxiquement colorés dans cet article, en leur donnant la classe « css »...

[3le choix de cette unité permet de conserver les proposrtions à chaque zoom par Control+ et Control-.

[4normal pour un cadre non ?

[5il n’est pas nécessaire qu’une classe CSS ait un aspect spécial, on peut donc se servir des classes CSS comme éléments réactifs dans le fichier, à l’aide de jQuery. Dans ekoarun, des classes CSS sont utilisées pour spécifier dans quel membre se trouve un terme, et pour le degré de celui-ci. Or un monôme de degré 1 et un monôme de degré 0 ont le même aspect, ce qui signifie que leurs propriétés CSS ne sont pas utilisées

[6techniquement, une bibliothèque écrite en JavaScript

[7Le DOM est une structure arborescente, et « modifier » la structure, revient à effectuer des tailles et des greffes dans l’arbre en question.

[8ici c’est du CoffeeScript, avec ses listes en compréhension

[9parce que c’est dans les faits, un dictionnaire

[10en fait il s’agit juste de la propriété « title » de CSS, le « titre » étant ce qui s’affiche au survol. On n’a donc pas besoin de jQuery pour mettre un glossaire dans du html.


Commentaires

Logo de Seb
mercredi 14 mai 2014 à 07h18 - par  Seb

Que CSS ne permette pas la mise en forme de certains éléments par un sur deux ou que le premier etc. n’est pas exact. Prenons l’exemple de la mise en forme d’un titre h2 sur 2... il y a au moins de solutions :

La première un peu fastidieuse certes, consiste à mettre une classe « pair » sur les h2 à traiter (c’est à dire 1 h2 sur 2)
La seconde utilise le pseudo-format :nth-child(n) qui permet de sélectionner le nieme enfant d’un élément. n est un entier ou alors les mots-clés odd ou even. Voir http://www.w3schools.com/cssref/sel... pour plus de détails.

Navigation

Articles de la rubrique

  • CSS sans douleur avec jQuery