Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 mars 2013 6 16 /03 /mars /2013 15:42

Un petit article (deux, en fait) pour répondre aux questions de débutant que je me suis posées, pas davantage, pour clarifier tout ce qui va sans dire. Je suppose tout de même que vous n'êtes pas ignare en CSS et que vous utilisez un navigateur pas trop antique (IE 9 et précédents : aucun espoir).

Je souhaite que rien ne soit faux, mais je suis sûr que rien n'est complet ! Vous trouverez bien plus de détails dans les liens en fin d'article.

De quoi parlons-nous ?

Révisons d'abord nos classiques.

Soit une page Web quelconque – celle que vous êtes en train de lire, par exemple. Ce qu'elle affiche (son 'contenu') dérive directement de son code source HTML, la manière dont elle l'affiche dérive des diverses feuilles de style CSS qui s'y appliquent.

Soit un élément particulier de cette page, un lien par exemple. À peu près partout dans le Web, un lien change d'aspect quand on le survole avec le curseur de la souris – dans le présent blog, toujours par exemple, un lien dans un article prend un fond de couleur un peu plus sombre. Voilà un lien vers le début de cet article pour vous montrer la chose, survolez-le. Fin de la révision.

Ce changement d'aspect peut être provoqué par un survol, un clic de souris, un programme JavaScript… peu importe : il a lieu. Jusqu'à l'apparition de CSS3 ce changement était instantané – sauf emploi d'un navigateur véreux sur une bécane poussive… Depuis CSS3 ce changement peut être progressif et décrit dans la feuille de style CSS. Pour vous en donner une première idée revoici un lien vers le début de cet article : la couleur de fond apparaît en 4 secondes et disparaît à la même vitesse. On peut évidemment fouiller davantage, on va voir ça.

Soyons concret

Je vous ai fabriqué un exemple très laid, comme je les aime, mais expressif. Voici le source HTML :

 <div class="emballage"> <div class="bouh">Bouh !</div> </div> 

Rien de bien extraordinaire : un div d'emballage que nous ne toucherons pas (classe emballage) et, à l'intérieur, un div pour s'exercer (classe bouh).

Voici le CSS correspondant :

 /* Le style de l'emballage est fixé une fois pour toutes */ .emballage {height: 10em; border: 1px dotted gray; padding-top: 1em} /* L'encadré Bouh ! au repos */ .bouh {margin: 0 auto;width: 4em; padding: 0; text-align: center; color: black; background-color: white; border: 1px solid black;} /* L'encadré Bouh ! au survol */ .bouh:hover {padding: 2em; font-size: 2em; font-family: monospace; color: white; background-color: black; border: 5px dashed orange;} 
Bouh !

Et voici le résultat. Survolez le 'Bouh !' pour voir ce que ça donne – je vous avais prévenu : c'est laid !

Comme d'habitude, le changement est instantané.

 
Bouh !

Voici maintenant une version pas plus jolie mais… (survolez le 'Bouh')

Qu'est-ce qui a changé ? J'ai ajouté UNE propriété à la description de la classe bouh :

 .bouh {margin: 0 auto;width: 4em; padding: 0; background-color: white; color: black; text-align: center; border: 1px solid black; transition: all ease 3s ;} 

Examen détaillé de cette nouvelle ligne :

transition
le nom de la nouvelle propriété CSS
all
le(s) nom(s) de la(des) propriété(s) affectée(s) par la transition. Ici toutes.
linear
le type de transition. Ici la transition est linéaire, les changements sont proportionnels au temps écoulé
3s
la durée totale de la transition

C'est rigolo, non ? Faites joujou encore une ou deux fois et reprenons la conversation.

Réfléchissons un peu

Qu'avez-vous remarqué ? L'effet de transition, de changement progressif, est censé s'appliquer à toutes les propriétés CSS qui changent entre .bouh et .bouh:hover. Dans l'ensemble c'est vrai : toutes les dimensions changent en douceur (padding, largeur de la bordure), la taille des caractères aussi (font-size) et même les couleurs (du texte, du fond, de la bordure) car une couleur se définit par un nombre.

Mais certains détails persistent à changer brutalement : dans notre exemple, le style de la bordure (de continu à tireté) et la police de caractères. Ce n'est pas complètement surprenant : on comprend bien qu'une déformation progressive des caractères, d'une police à l'autre, serait un énorme travail de calcul. Pour le style de la bordure, quand on sait que seul le border-style solid (trait continu) est rendu de la même manière par tous les navigateurs (encore heureux…), on pressent que définir un changement valable pour tous les navigateurs n'est pas réaliste.

Bref : certaines propriétés CSS se prêtent à une transition, d'autres non, il ne s'agit pas d'un bug. Avec un peu de jugeote on les trouve très bien soi-même, sinon on peut se reporter à ce que dit le W3C.

Et puis quoi d'autre ? Ben… on doit pouvoir être un peu plus précis que all, non ? Indiquer quelles propriétés on veut changer en douceur et pas quelles autres ? Oui, on peut. On doit pouvoir aussi avoir une transition autre que linéaire ? Bien sûr. Peut-être même qu'on peut ne pas faire commencer la transition tout de suite ? Ne pas donner la même transition, le même rythme de changement, à toutes les propriétés ? Ouiiiii, on peut !

Sans prétendre tout dire, je vais essayer de vous en montrer un peu plus, histoire de vous donner envie… de lire le deuxième article !

Varions

Bouh !

Commençons par du facile (je ne montre ici que les modifications de transition, le reste du CSS est identique) :

 transition: all ease 3s ; 

En comparant, vous verrez qu'ici le changement est un peu plus rapide au début et plus lent vers la fin – un atterrissage en douceur. Il y a d'autres possibilités, on peut même définir sa propre loi de variation si on connaît un peu les courbes de Bézier : je vous renvoie aux lectures complémentaires pour approfondir le sujet. Notez seulement que ease est la valeur par défaut.

Développons

Là, ça sera un peu long. Vous patientez jusqu'au prochain article ?

Petite synthèse

Tout ça est appétissant mais peut causer bien des confusions. Voici, en espérant vous rendre service, quelques points avec lesquels j'ai eu du mal :

  • avant d'écrire 'transition' un peu partout, décrivez calmement et complètement les deux états concernés ;
  • rappelez-vous que transition est une nouvelle propriété de CSS et pas un complément des propriétés existantes. On écrit par exemple transition : margin-left linear 2s; et pas margin-left: 5em, transition (linear 2s) ;
  • écrivez la propriété transition dans la description de l'élément au repos et pas dans celle de l'élément :hover, sinon vous aurez des surprises (on y reviendra dans le prochain article) ;
  • rappelez-vous enfin que vous ne définissez pas 'la manière de faire un :hover' mais 'la manière dont ça change', et cela quelle que soit la cause du changement et quel que soit le sens du changement. Conséquence : si vous faites joujou avec Firebug ou la barre Webdev ou un autre outil analogue, les transitions joueront aussi ;
  • autre conséquence : si la transition d'un élément est déjà pilotée par du JavaScript, mieux vaut ne pas se lancer tout de suite dans l'ajout d'une transition CSS3 à cet élément. Dans un blog OB, mieux vaut laisser tranquilles le menu 'Plus' des articles ou la manière dont s'ouvrent et se ferment les diablogs.

Bonnes lectures

Si vous pensez avoir compris tout ce que je raconte, vous pouvez aller voir ces deux sites :

  1. CSS 3 files (en anglais). Très bonne initiation aux nouveautés de CSS 3 : les transitions bien sûr, mais aussi les coins arrondis, ombres, fonds dégradés, couleurs semi-transparentes, etc.
  2. La spécification du W3C. Bien qu'elle ne soit pas encore officiellement une norme (c'est un  Working Draft , un travail en cours) elle est déjà bien au point et largement supportée par les navigateurs récents.

commentaires

evelyne 22/03/2013 17:30

c'est vrai? tu t'y connais en mécanique??? parce que... justement... Mais, bon, là j'abuse, peut-être! sinon, "qui semait la grouille"? c'est du parisien ou du web-language? :-)

AïmD ! 22/03/2013 18:20



Tant que la mécanique marche je ne crains personne ! En cas de panne, euh...


Quant à "semer la grouille", je crois bien que c'est du provincialo-suranné - très élitiste, par conséquent :-)



evelyne 19/03/2013 18:30

enfin, je constate quand même qu'il n'y a que Greeen qui comprend ce français! faut dire que j'ai le même réflexe d'incompréhension quand mon garagiste essaie de m'expliquer pourquoi ma voiture est
en panne.... mais, c'est promis j'essaierai de ne plus faire de commentaires stupides et inutiles! un peu de sérieux! que diantre!!!

AïmD ! 22/03/2013 16:06



Je devrais peut-être me reconvertir dans la mécanique auto ? ?


Comme les commentaires stupides appellent des réponses vaseuses, et que j'adore ça, me voilà donc parfaitement heureux ! Surtout ne touche à rien !



evelyne 19/03/2013 09:49

c'est en quelle langue???? :-)

Aïe mes doigts ! 19/03/2013 15:03



Du français, pour l'essentiel ;-) Ce blog est très varié....



Geeeen 18/03/2013 21:54

oui génial

Geeeen 16/03/2013 21:09

Super Bren, comme pour toutes tes créations,

regardes le résultat obtenu sur ce lien, tu descends sur le concours :
http://lemiroirauxessences.e-monsite.com

Je garde ce précieux code dans mes fichiers,
et te remercie encore,

Bonne soirée Bren,

Aïe mes doigts ! 18/03/2013 21:20



Hé bien maintenant, tu n'as plus qu'à lire la fin :-)



Geeeen 16/03/2013 20:08

Bonsoir Bren !

Merveilleux, une belle entrée en matière pour mon concours ! je vais essayer de la mettre en place,
avec ton lien bien sûr ! pour les explications,

Bonne soirée,
merci pour tes partages,
Bien amicalement,
Geneviève

Archives