Alsacreations.com - Actualités - Archives (décembre 2011)

Les mythes

Avec HTML5, mon site sera plus beau

HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu.

Cela signifie donc que rien ne change par rapport aux précédentes versions de HTML : il vous faudra toujours jongler avec habileté entre CSS, les images issues de la maquette graphique, éventuellement des effets en JavaScript, du SVG, voire Canvas, pour construire le côté visuel d'un document ou d'une page web.

Avec HTML5, mon site sera plus dynamique et réactif

Là aussi, les mêmes arguments de conception entrent en jeu : sans JavaScript et l'API DOM, l'interactivité reste coite. Or, JavaScript et le DOM sont des technologies qui évoluent depuis un moment déjà, sans avoir attendu HTML5. Les diverses optimisations mises en avant par les versions successives des moteurs d'interprétation font chemin commun.

HTML5 apporte donc des fonctionnalités, mais pas de "rapidité" au sens strict du terme. Le code JavaScript sera interprété exactement de la même façon, navigateur par navigateur.

Avec HTML5, je devrai tout réapprendre depuis zéro

HTML5 a été pensé notamment pour rester majoritairement rétro-compatible avec les précédentes versions de HTML, et faciliter le quotidien des intégrateurs avec une syntaxe quelque peu simplifiée. Si bien que la courbe d'apprentissage est très douce pour ceux qui ont déjà des notions générales concernant HTML.

En revanche, concernant toutes les API, il y a beaucoup à découvrir, pour ne citer que certaines d'entre elles : Web Storage, Web Workers, la géolocalisation, Canvas, Offline Web Applications, Drag & Drop, Server-Sent Events, Web Sockets, Web Messaging, History, et toutes celles qui sont en train de mijoter dans les groupes de travail du WhatWG, du W3C et des éditeurs de navigateurs (Apple, Google, Microsoft, Mozilla, Opera).

La présence d'API (interfaces de programmation) dans HTML5 est rendue nécessaire par les nouveaux besoins qui ont émergé ces dernières années, en termes de mobilité, de multimédia, d'interactions avec l'utilisateur. On ne se limite plus à une spécification de balises mais on s'oriente bien vers un langage puissant pour construire des applications web complètes, en synergie avec JavaScript.

Avec HTML5, je suis dans le Cloud

Refondre un site depuis zéro juste pour dire "je suis passé à HTML5" n'est pas significatif. Quel est le gain attendu ? HTML5 n'est pas un ensemble indissociable de fonctionnalités, il permet une transition douce avec des améliorations ponctuelles ne serait-ce qu'en se limitant aux simples balises et en mettant de côté les API : le balisage sémantique (nouvelles balises de section), les nouveaux éléments bien pratiques (video, audio, formulaires, etc), Microdata.

Et si vous changez le doctype par , votre site est virtuellement en HTML5, puisque c'est ainsi que le langage est annoncé au navigateur ; mais n'exploitera aucune des nouveautés avant de plonger les doigts dans le code.

Concernant le fameux nuage, HTML5 dispose bien sûr d'API facilitant la mise en place d'applications web exploitant des données distantes (avec Web Sockets, XMLHttpRequest 2, etc), les stockant localement (avec Web Storage), exécutant des fonctionnalités en mode déconnecté (avec Offline Web Applications), et des traitements variés. Il s'agit donc d'un moyen, mais pas une finalité en soi.

Pour HTML5, je dois faire appel à des startups primées à LeWeb©™

Engouement, espoirs, marketing, font que le mot HTML5 est exploité à toutes les sauces, pour promouvoir des produits et services web, qui ne reposent pas nécessairement sur lui. C'est désormais un terme à la mode, pour regrouper tout et n'importe quoi (y compris ce que l'on peut faire avec JavaScript/CSS/AJAX), tout comme l'a été le fameux "web 2.0" et c'est bien dommage. Il n'est donc pas primordial de passer par une multinationale trempant dans le marketing, ou par une jeune pousse ayant procédé à une levée de fonds de quelques millions. Bien au contraire, ce sont les artisans du web qui sont les mieux informés au quotidien et les plus aguerris avec des situations concrètes. La plupart des intégrations réalisées par l'agence web Alsacreations.fr le sont désormais en HTML5, et ce en toute transparence.

Les grandes conférences où se retrouvent les courageux ayant déboursé un billet d'entrée à quelques milliers d'euros pour se taper dans le dos, tout en disant qu'ils vont révolutionner le monde avec des rationalisations de process en HTML5 sont à des parsecs de la réalité. [Ceci est un point de vue strictement personnel qui n'engage pas l'équipe d'Alsacreations]

Les vérités

HTML5 est une technologie d'avenir 

Durant de nombreux mois, les actualités mentionnaient une date de finalisation officielle de la recommandation W3C pour 2022. Or, il s'agit du même principe que pour les spécifications CSS et tous les autres standards qui ont vu le jour progressivement : rien n'empêche de s'en servir avant la publication finale de la recommandation, pour peu que les navigateurs implémentent les fonctionnalités HTML5, et que celles-ci restent stables à moyen ou long terme. Le processus de normalisation des groupes de travail HTML est long : il comprend de nombreux tests et critères de qualité à remplir avant de déclarer officiellement le langage spécifié en tant que standard.

Il s'agit donc bien - désormais - d'une technologie du présent (que des millions de sites exploitent déjà en production) qui a encore de nombreux tours dans sa poche, et de grandes évolutions en perspective. Il est fort probable que l'échelonnement par versions (4, 5...) soit délaissé au bout d'un moment ou modifié, étant donné la nécessaire réactivité face aux changements du web, ainsi qu'aux nouveaux besoins. C'est un choix qu'a déjà fait le WhatWG pour désigner l'ensemble sous le terme de Living Standard.

HTML5 est vaste

Oui, plus qu'avant, sans compter les compléments apportés par JavaScript et CSS, l'empilement des langages et des concepts à maîtriser s'accroît. Il ne faut plus considérer le web comme une soupe de tags. De gros progrès ont été accomplis. La réalisation d'applications web et de documents HTML réclame de plus en plus d'attention, de professionalisme et d'expériences. Les conséquences en termes de référencement, d'accessibilité et d'utilisabilité sont bien plus que jamais mesurées et ressenties à court terme.

Nous avons toujours évolué dans un univers dans lequel nos métiers (graphiste, intégrateur, développeur, administrateur) s'interpénètrent sans frontière nette, et tant mieux : il est toujours bon d'explorer toutes les voies menant à la réalisation d'un projet complet, de savoir quelles sont les implications de chacun. Ceci va aller en s'accentuant, le dynamisme développé côté client (navigateur) faisant de plus en plus appel à des dialogues avec le serveur, et avec un graphisme riche et dynamique.

HTML5 améliore le référencement

Avec une plus forte présence de la sémantique, avec de nouveaux éléments pour baliser le contenu (

, , ,

Il ne reste plus que quelques heures avant de pouvoir faire la bise au vieux barbu et sabrer le champagne.

Avant que le forum ne soit complètement déserté, je vous souhaite - au nom de tous les contributeurs bénévoles d'Alsacreations.com - de passer d'excellentes Fêtes de fin d'année et de nous revenir en pleine forme pour 2012 !

A l'année prochaine !

(photo par Raphaël Goetter)

C'est aujourd'hui 21 décembre que se termine la troisième opération de partenariat entre Eyrolles et Alsacréations.

Pour rappel, ce partenariat s'effectue sous la forme de livres Eyrolles offerts aux membres "actifs" d'Alsacréations. Le terme "actif" désignant ceux possédant un certain nombre de points Kiwiz (gagnés en publiant articles, tutoriels ou actualités) dans leur besace.

Ce partenariat, devenu dorénavant trimestriel, s'achève aujourd'hui et reprendra au mois de mars sous le même principe. Voici les heureux bénéficiaires de cette Opération n°3 ainsi que leurs gains :

• Igor reçoit "Responsive web design" en échange de 20 kiwiz,
• Geoffrey C. reçoit "Lightroom 3 pour les photographes" et "Photo de portrait" en échange de 70 kiwiz,
• Vaxilart reçoit "HTML5, une référence pour le webdeveloppeur" en échange de 40 kiwiz,
• jojaba reçoit "HTML5, une référence pour le webdeveloppeur" en échange de 40 kiwiz,
• Victor BRITO reçoit "Mémento CSS3" en échange de 20 kiwiz.

Encore un grand bravo à ces bénéficiaires et un grand merci pour leur activité sur Alsacréations. Les ouvrages seront expédiés directement par Eyrolles.

Et à bientôt pour la prochaine édition... gardez vos kiwiz de côté ;)

Et Joyeux Noël !

Les internautes arrivent de plus en plus souvent sur vos sites web depuis un périphérique mobile. Il est donc de plus en plus important de leur offrir une bonne expérience sur le navigateur embarqué. Vous ne pouvez plus vous permettre d’ignorer cette population en leur offrant une version trop dégradée. Dans notre cas, depuis la mise à jour nommée “Mango”, Internet Explorer 9 est arrivé sur Windows Phone. Vous pouvez donc lui fournir du HTML5, CSS3 Media Queries & co pour créer une bonne expérience. Je vous propose alors de voir 4 choses dans cet article :

• Comment récupérer l’émulateur Windows Phone et l’utiliser
• Un point sur les différences entre IE9 Desktop et mobile
• Comment débugger votre code JavaScript avec jsConsole
• Pour finir, comment débugger le trafic réseau entre l’émulateur et le reste du monde grâce à Fiddler

Le but principal de cet article étant de vous faire gagner potentiellement du temps.

L’émulateur Windows Phone

La toute première chose que je vous invite à faire est de télécharger le SDK qui contient l’émulateur ici : Télécharger le SDK Windows Phone . Vous pouvez l’installer sous Windows Vista ou Windows 7.

Il contient également les outils (gratuits) de développement. Si le sujet vous intéresse et que vous souhaitez découvrir cette plateforme, rendez-vous ici : Découvrir la plateforme Windows Phone

Mais revenons au sujet qui nous intéresse. Une fois le SDK installé, vous trouverez l’émulateur dans votre menu démarrer :

Lorsque vous le lancez, vous aurez ce résultat et vous pouvez configurer 2 ou 3 trucs :

Vous pouvez par exemple choisir entre le fait de recevoir par défaut la version mobile du site ou la version bureau.

Détail important à connaitre : pour éviter de taper les URLs avec le clavier virtuel, cliquez dans l’émulateur et appuyer sur la touche “Pause”. Vous devriez ensuite être en mesure de taper avec votre clavier dans l’émulateur.

Voici les autres choses à connaitre sur l’émulateur qui pourront vous aider à créer vos expériences mobiles sur Windows Phone. Gestion de l’orientation présente sur la barre d’options à droite de l’émulateur :

Et voici le résultat :

Autre détail à connaitre, pour que l’orientation s’effectue correctement et soit prise en compte, il faut ré-appuyer sur la touche “pause” si vous l’avez fait précédemment pour utiliser votre clavier. Sinon, vous aurez l’impression de devoir systématique pencher la tête à gauche ou à droite. :)

Vous pouvez aussi simuler de votre position pour la géolocalisation. Prenons par exemple ce site web de démo : IE Test Drive Mobile avec Géolocalisation HTML5 qui utilise justement l’API de géolocalisation.

Voici le résultat par défaut dans l’émulateur :

On vous localise sur Redmond. Donc si vous voulez changer cela (sauf si vous habitez vraiment à Redmond ;-)), vous pouvez le faire en faisant apparaitre une fenêtre supplémentaire. Pour cela, cliquez sur “>>” et mettez une punaise (ou push pin en anglais) à l’endroit souhaité. Voici un exemple où j’en mets un sur la Tour Eiffel et l’application HTML5/JavaScript obtient bien la bonne information :

Cela peut donc être très pratique pour débugger une application HTML5 basée sur la géolocalisation sans forcément vous balader physiquement dans toute la France… voir la planète ! :)

Pour le reste, testez votre site de manière habituelle et observez les différences entre la version desktop et mobile comme avec le site Food Sense par exemple mettant en œuvre intelligemment CSS3 Media Queries :

Vous pouvez voir ci-dessus le résultat sur IE9 sous Windows 7, IE9 sur Windows Phone en mode portrait puis paysage.

Donc si tout cela vous intéresse et que vous souhaitez accueillir dans de bonnes conditions les nombreux acheteurs récents du superbe Nokia Lumia 800, foncez télécharger ici le SDK :

Télécharger le SDK Windows Phone ici

Et testez votre site dessus !

Différences entre IE9 desktop et mobile

Commençons par les choses en moins classées par ordre d’importance selon moi:

• pas de support des fonts téléchargeables comme EOT, TTF/OTF et WOFF. Bien que le tag font-face soit supporté, le navigateur IE9 mobile n’essaiera pas de télécharger la font. La liste des fonts installées et supportées par Windows Phone se trouve ici : Liste des fonts supportées
• pas de support de flux multiples avec la balise audio HTML5
• pas de support de mode de rétro compatibilité avec le mode de document Internet Explorer 8. IE9 mobile rendra les sites forcément avec le moteur de rendu d’IE9.
• assez logiquement, pas de support de communications “cross-window” via JavaScript
• pas de support de VBScript, d’ActiveX, d’extensibilité via les BHO (Browser Helper  Objects) et les barre d’outils, pas de support d’Active Document non plus
• pas de support de vieilles technologies comme les “binary behaviors”, HTCs, HTML+TIME et VML
• pas de compilation JIT

Ainsi, heureusement, la quasi totalité des différences entre la version de bureau d’IE9 et son équivalent mobile représente, je pense, d’excellentes choses.

Dans les choses en plus, nous avons :

• support du GPS pour la géolocalisation HTML5. Windows Phone utilise ainsi la couche de localisation du périphérique et utilise donc le GPS s’il est disponible. La version de bureau d’IE9 s’appuyant sur d’autres méthodes n’utilisant pas le GPS car quasiment aucun PC n’en est équipé.
• support du Viewport. Width, height et user-scalable. Par contre, bien que certaines de ces fonctionnalités soient supportées dans certains navigateurs, les propriétés minimum-scale, maximum-scale et initial-scale sont pour l’instant non supportées
• support de la propriété CSS : -ms-text-size-adjust

Vous retrouverez tout cela un peu plus en détail et en anglais ici : Web Development for Windows Phone

Pour le reste, reportez vous simplement au guide du développeur Internet Explorer 9 qui contient toutes les fonctionnalités supportées par IE9 desktop et donc mobile. J’attire par exemple votre attention sur 2 points importants lorsque vous allez tester du HTML5 ou CSS3 dans IE9 Mobile :

1. Tout comme IE9 Desktop, il faut absolument avoir créé un document HTML5 standard avec donc la balise en tout début de document. Si vous ne la positionnez pas, IE9 Desktop come Mobile basculeront dans un ancien mode de rendu non “compatible” HTML5
2. IE9 Mobile gère une liste de compatibilité des sites comme décrit ici : IE9’s faster, more capable Compatibility View List… now on Windows Phone! . Donc si vous vous apercevez que votre code ne se comporte par comme prévu dans IE9 Mobile, c’est peut-être que votre site est hébergé sur un nom de domaine marqué comme non compatible dans la liste mise à jour toutes les 2 semaines. Et tout comme IE9 Desktop, vous pouvez forcer le mode standard via le meta tag X-UA-COMPATIBLE.

Par exemple, j’ai eu une interaction récente sur Twitter avec @benjamincrozat sur du border-radius qui ne marchait pas sous IE9 Mobile. En regardant depuis IE9 Desktop son URL de test, je me suis aperçu de la chose suivante dans la console de debug (via F12) :

On observe alors que dropbox.com est présent dans la liste de compatibilité, ce qui fait basculer IE9 en mode de compatibilité IE7. Conclusion : n’hésitez pas à tester votre site sous IE9 “normal” avant de tester sous IE9 mobile pour faire une 1ère passe de tests.

Débugger le code JavaScript avec jsConsole

Dans la mise au point d’un site web pour mobile, la partie la plus pénible est souvent de débugger le code JavaScript sur tournant sur le périphérique. Heureusement, l’excellent Remy Sharp a eu la bonne idée de travailler sur un projet permettant de piloter à distance le code JS exécuté sur le périphérique. Le fruit de son travail est le projet jsConsole : http://jsconsole.com .

Mais plutôt que de vous expliquer en détail son usage, je préfère fortement vous inviter à lire l’excellent tutoriel présent sur le site d’Alsacréations : Déboguer son site mobile avec JsConsole . Je ne vois pas trop comment je pourrais mieux faire. ;-)

Par contre, j’ai bien vérifié que cette solution fonctionnait parfaitement avec IE9 sur Windows Phone. Voici un exemple utilisant jsConsole et PhoneGap pour Windows Phone 7 :

Vous pouvez donc compter dessus pour vous aider à tester et corriger votre site sur la version mobile d’IE9.

Attention ! Pour des raisons évidentes de sécurité, attention à bien mettre tout cela en place qu’à des fins de debug et à bien retirer son usage avant la mise en production ! Mais ai-je vraiment besoin de le vous rappeler ?

Débugger le trafic réseau avec Fiddler

Pour finir un peu plus bas dans les couches, nous allons maintenant voir comment capturer le trafic réseau entre l’émulateur Windows Phone et le reste du monde. Voici les étapes à suivre :

1. Installer la dernière version de Fiddler
2. Démarrer Fiddler
3. Aller dans les options via les menus “Tools” –> “Fiddler Options”
4. Ouvrez l’onglet “Connections” et cochez la case “Allow remote computers to connect”.
5. Cliquez sur “OK” pour fermer la fenêtre des options de Fiddler
6. Dans la boite de commandes sous la liste des “Web sessions”, tapez la commande suivante :  prefs set fiddler.network.proxy.registrationhostname HostName où HostName correspond au nom de votre machine
7. Fermer et redémarrer Fiddler
8. Démarrer (ou redémarrer) l’émulateur Windows Phone
9. Ouvrer Internet Explorer et naviguez vers le site à débugger
10. Observez le trafic réseau affiché par Fiddler

Et voici un résultat de capture en naviguant vers le site d’Alsacréations :

Avec notre émulateur gratuit et toutes ces astuces, j’espère que vous serez maintenant correctement armé pour tester et débugger vos sites sur IE9 mobile !

David

En septembre dernier est parue la traduction française (merci Eyrolles) d'un livre de webdesign de référence initialement publié chez A Book Apart : "Responsive Web Design", du célèbre Ethan Marcotte, inventeur de la méthodologie éponyme et que l'on pourrait traduire en français par "Design web adaptable à toutes les résolutions". On se contentera de "Responsive Web Design", bien plus succint :)

Le principe général de l'ouvrage est d'expliquer rapidement (150 pages) et avec un humour décapant comment il est possible de penser et décliner un design web sur en vaste ensemble de résolutions d'écrans, allant du petit smartphone aux écrans larges de bureau de 30 pouces, en passant par les diverses largeurs de tablettes existantes.

Parfait pour débuter !

L'ouvrage est extrêmement bien rédigé, avec des pointes d'humour et des illustrations omniprésentes. Son cheminement est parfaitement tracé et les concepts évoqués sont expliqués en toute clarté.

On y traite des avantages des grilles en pourcentages, des images adaptables à la taille de leur parent et - surtout - de Media Queries CSS3, dont Ethan Marcotte est un grand fan. Le tout décrit à travers un fil rouge sous la forme d'un mini site dédié aux robots qui se prête idéalement au jeu.

Le livre est très intéressant et parfait pour découvrir et comprendre les énormes enjeux et avantages des Media Queries pour la réalisation et production de sites web pour mobiles et dont nous avons déjà dit beaucoup de bien sur Alsacréations. Il me semble même être une base "culturelle" indispensable à tout webdesigner voué à concevoir des pages web à l'avenir. C'est un must, tout simplement !

Quelques faiblesses

Malgré tout l'intérêt que j'ai pu porter à ce livre rapidement dévoré, j'ai tout de même pu y ressentir quelques manques flagrants :

• Le livre est trop court, c'est frustrant ! :)
• La philosophie générale du livre est intégralement basée sur une sacro-sainte trinité établie : "Grille fluide, Images fluides, Media Queries". Selon l'auteur, seul cet assemblage mérite de s'appeler "Responsive".  Cependant, cette recette me paraît quelque peu "figée" (c'est un comble !) et discutable. Par exemple, rien n'empêche de faire un design adaptable basé sur une grille non fluide, en tout cas pas forcément en pourcentages (prônés par l'auteur).
• L'ouvrage ne traite nulle part d'une notion fondamentale dans ce domaine, celle de la performance web : du poids des éléments, des temps de chargement, des requêtes superflues, etc. Cette notion est capitale et peut conduire à de grosses désillusions selon les projets.

Sommaire

• Principes du responsive design
  • Attachez vos ceintures
  • Responsive architecture
  • La voie à suivre
• La grille flexible
  • Composition flexible
  • Créer une grille flexible
  • Marges et espacement flexibles
• Les images flexibles
  • Retour aux (codes) sources
  • Images fluides
  • Mosaïque d'arrière-plan flexible
  • Apprenez à aimer overflow
  • Négociez votre contenu
  • Images et grilles flexibles, tenez-vous bien
• Les media queries
  • Cicatrisation douloureuse
  • Le problème en question
  • Traînasser vers plus de réactivité
  • Un robot plus "responsive"
  • Les media queries en action
  • Au sujet de la compatibilité
  • Pourquoi la flexibilité ?
• Passer au responsive, design
  • Une question de contexte
  • Mobile first
  • Vers un responsive workflow
  • Être "responsive" et responsable
  • L'amélioration progressive revisitée
  • Va et sois "responsive"

Ca y est. Après cinq ans d'attente, Macromates, société créatrice du très apprécié éditeur de code TextMate vient de mettre à la disposition des utilisateurs enregistrés la version alpha de TextMate 2.

Arlésienne des éditeurs pour Mac, TextMate 2 arrive tardivement mais avec son lot de nouveautés. Parmi celles-ci, on notera entre autre la sélection multiple (possibilité de faire plusieurs sélections de code au sein d'un même fichier), une nouvelle interface toujours aussi minimaliste mais avec quelques ajouts (possibilité de naviguer dans l'ensemble du Finder à travers la fenêtre de projet et d'y faire des actions propre à celui comme assigner des labels, d'y paramétrer des favoris...) ou encore rmate qui permet de travailler en SSH avec TextMate depuis un serveur externe sous réserve d'y avoir inséré un petit fichier permettant la connexion.

On compte également beaucoup de nouveautés côté création de Bundles (les plugins de TextMate), ainsi qu'un nouvel éditeur de Bundle dont le design et les fonctionnalités sont encore en chantier, version alpha oblige. L'ajout d'une bibliothèque de bundles directement accessibles et installables à travers la panneau des préférences est une avancée notable : il suffit maintenant d'un clic pour, par exemple, installer un nouveau thème ou permettre à TextMate de travailler avec le C++.

Les sessions sont maintenant restaurées quand l'application est relancée comme le font la plupart des applications sous Lion.

Parmi les fonctionnalités absentes, on regrettera le manque d'une vue splitée qui permet de travailler sur plusieurs fichiers à la fois et le mode plein écran maintenant standard dans la plupart des applications sous Lion. Macromates promet toutefois leur ajout dans une version plus avancée.

La liste complète des changements depuis la version 1.5.10 est disponible sur la page des release notes. Aucune date n'est donnée concernant une éventuelle version beta voir finale mais le projet avance, peut-être en réaction au nombre grandissant d'utilisateurs ayant quitté TextMate pour SublimeText2.

Également appelés les "combinateurs d'adjacence", ces sélecteurs avancés permettent de cibler des éléments proches d'un autre élément.
Il existe à l'heure actuelle deux sélecteurs de ce type : le combinateur d'adjacence directe, et le combinateur d'adjance indirecte.

Le sélecteur d'adjacence directe

Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs.

La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur.
Petite nuance pour Safari qui a un problème d'interprétation lorsqu'on cible le frère d'un élément en hover  jusqu'à la version 5.

Vous pouvez donc vous lâcher et l'utiliser dans vos intégrations.

Syntaxe de base

Pour cibler le frère d'un élément, nous allons avoir besoin du symbole +.
Voici sa syntaxe :

element1 + element2 {
   /* mes styles */
}

Ici les styles seront appliqués uniquement à element2 directement frère de element1.

C'est un bon moyen de cibler un élément dans un cas particulier, comme un p situé juste après un titre, ou pour appliquer des styles à des éléments semblables, sauf le premier de la fratrie.

Quelques exemples d'utilisation

Nous allons reprendre les deux exemples cités précédemment.

Appliquer une marge après un titre

Imaginons que nous souhaitions appliquer une marge suffisante pour espacer un p d'un h2 qui le précède, tout en conservant  un certain rapprochement lorsque h2 est suivi d'un h3 (l'un servant de sous-titre direct à l'autre).
Voilà ce que nous pourrions imaginer :

h2 + p {
   margin-top: 0.8em
}
h2 + h3 {
   margin-top: 0.2em
}

Il faudrait prévoir avant cela une annulation des marges existantes pour les redéfinir, mais cette méthode, avec quelques adaptations, pourrait améliorer le confort de lecture d'un texte fortement hiérarchisé.

Voir l'exemple

Appliquer un style différent au premier élément d'une liste

Deuxième scénario : je veux créer un menu horizontal où chaque élément de liste serait séparé de son frère par une bordure.
Mais voilà, si je dis que tous mes li possèdent une bordure à gauche, je me retrouve avec une bordure indésirable à gauche du premier élément. Si je désigne une bordure à droite, idem mais à l'opposé !

La solution ? Appliquer une bordure à gauche de tous les éléments de liste, sauf le premier.

li + li {
   border-left: 1px solid #aaa;
}

Il est également possible d'appliquer un style à tous les liens de  ce menu, en dehors du premier, en procédant de la même manière.
Cela peut-être utile si vous préférez appliquer les bordures aux liens, au lieu de les appliquer aux li.

Voir l'exemple

li + li a {
   border-left: 1px solid #aaa;
}

Cette technique peut vous permettre de changer de couleur de bordure au survol ou au focus du lien. Ça n'est qu'un exemple.

Le sélecteur d'adjacence indirecte

Le sélecteur d’adjacence indirecte est peu connu en CSS.
Arrivé avec la nouvelle mouture CSS3, ce sélecteur vous permet d'appliquer des styles d’un seul coup à tous les frères d’un élément ciblé répondant à un sélecteur précis.

La prise en charge est plutôt large pour un sélecteur CSS3, puisque Firefox 1+, Safari 3.1+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur.
Petite nuance cependant pour IE7 qui n'aime pas qu'un commentaire HTML vienne s'interposer entre des frères, et pour IE8 qui ne ciblera que les 298 premiers éléments... ça laisse de la marge quand même.

Avec la mort de IE6, vous pouvez déjà vous permettre de l'utiliser !
Voyons voir avec quelques exemples comment l’utiliser et quels sont ses effets.

Syntaxe de base

Le sélecteur, que j’appelle incorrectement siblings du fait de sa ressemblance avec la fonction siblings() de jQuery, utilise le caractère ~ disponible sous PC depuis les touches Alt Gr + 2(é ~) et sous Mac de puis les touches Alt + N.

element1 ~ element2 {
   /* mes styles */
}

Ici les styles seront appliqués à tous les element2 frères de element1, même si un autre frère vient se mêler entre deux element2, par exemple.
Voir l'exemple

Il est important de noter que ce sélecteur ne cible que les frères suivants d’un élément ciblé. En aucun cas les frères précédents ne seront concernés. 

Quelques exemples d’utilisations

L'habitude d’utiliser d’autres techniques avec le combinateur d'adjacence directe m'a un peu bloqué dans la recherche d'exemples.
Cependant, voici quelques idées, probablement non des plus probantes, mais pouvant servir malgré tout.

Cibler les frères non identiques à l’élément de départ

Ce sélecteur d’adjacence indirecte (~) va permettre de combler certaines lacunes du sélecteur d’adjacence directe (+).
Il sera capable de cibler tous les paragraphes qui suivent un titre, par exemple. Chose qui ne fonctionnera pas en faisant h3 + p, mais qui fonctionnera avec h3 ~ p.

Cibler les frères d’un élément survolé, ciblé ou typé

Dans la même logique que précédemment, il est possible de cibler, par exemple, tous les frères d’un li survolé (donc les autres li), ou d’un input typé.

li:hover ~ li {
   opacity: 0.4;
}

Cet exemple provient d’un effet produit sur jq.creativejuiz.fr (avec une solution jQuery), ou sur la récente démonstration de Raphaël Goetter sur un fil d’ariane entièrement conçu en CSS : Breadcrumbs without images.

Ou avec le deuxième exemple :

[type="radio"] ~ input {
   margin-left: 2.6em;
}

Ce qui permettrait, dans un enchaînement de input + label de type radio, d’espacer les choix.

Voir l'exemple

Sélecteur d'adjacence directe négative

Cela n'existe pas... ou du moins, pour sélectionner les frères situés avant un élément, il faudra utiliser un sélecteur CSS3.
Ce sélecteur, ou plutôt cette pseudo-classe s'appelle nth-child().

Nth-child est compatible avec la plupart des navigateurs modernes. Il ne faudra cependant pas compter sur la prise en charge de cette pseudo-classe par IE version 8 et inférieures.
Firefox le comprend depuis sa version 3.5, Safari de puis sa 3.1, Opera depuis sa 9.5 et Chrome depuis la version 2.

 Remarque : Ce qui suit est expérimental, cela devra faire l'objet de votre propre expertise, et ne pourra être utilisé que dans des cas et besoins précis.

Syntaxe de base

Une valeur doit être renseignée entre les parenthèses du sélecteur pour cibler précisément des éléments.
Nth-child() accepte comme valeur une expression numérique, ou les mots-clefs odd et even (pour cibler un élément sur deux).

:nth-child(3n+1) {
   /* mes styles */
}

L'expression numérique comprend sa position (n) qui sera utilisée pour le calcul (ici *3 + 1).
Ici, les éléments sélectionnés seront :

• n vaut 0 : 3 x 0 + 1 = 1 (soit le 1^er élément)
• n vaut 1 : 3 x 1 + 1 = 4 (soit le 4^ème élément)
• n vaut 2 : 3 x 2 + 1 = 7 (soit le 7^ème élément)

Voici visuellement ce que ça peut nous donne : Voir l'exemple

Exemple

Revenons sur le but de l'utilisation de ce sélecteur : simuler un sélecteur d'adjacence négative.

Sélecteur d'adjacence directe négative.

Ce que l'ont veut ? Pouvoir cibler tous les éléments situés avant un élément précis.
En suivant la logique précédent, on peut voir que n s'incrémente. Il va donc nous falloir utiliser le symbole - (moins) pour le faire se décrémenter.

Nous aurons donc un sélecteur sous cette forme :

:nth-chld(-n+3) {
   background: #f3f3f3;
}

Ici nth-child(-n+3) nous permet de cibler tous les frères précédent le 4^ème élément.

Limites

Un exemple, plusieurs limites, en tout cas sur cette manière d'utiliser nth-child().

• Cibler les frères d'un élément non identique ne semble pas possible;
• Par extension, cibler les frères qui précédent un élément détenteur d'une classe ne semble pas possible ;
• Idem pour les frères qui précédent un élément détenteur d'une pseudo-classe ;
• pour cibler le premier et le dernier élément, préférez :first-child à :nth-child(-n+1) et :last-child à :nth-last-child(n+2), qui offrent de meilleures prises en charge par le panel des navigateurs.

Que nous soyons intégrateur HTML, webdesigner ou développeur en langages front ou back-end, nous avons généralement un point commun : un outil d'édition, parfois également appelé IDE (Integrated development environment), pour "Environnement de développement intégré".

Afin de pouvoir se représenter un panel des outils les plus employés au courant de cette année 2011 et éventuellement d'inspirer nos lecteurs, nous vous demandons quel est votre logiciel d'édition préféré au quotidien, quel que soit votre métier dans les monde des standards et votre environnement de travail.

Symfony2 est un framework PHP dont le petit frère, dans sa 1ère version, avait déjà pas mal marqué le développement web professionnel moderne.

Les choses ont évolué et avec le passage avec la version 2, on entre dans un univers presque différent.

Pour vous aider dans cet apprentissage, aidez vous de Symblog-fr. Il s'agit d'un cours pratique sur Symfony2, où l'on construit pas-à-pas un blog. Ce thème un peu classique permet d'ajouter des fonctionnalités que tout le monde connait, en se concentrant sur les thèmes récurrents du développement avec ce framework:

• Utilisation des template avec Twig
• Gestion de base de donnée de manière transparente avec Doctrine2
• Formulaires et validation des données
• Routage dynamique
• Assetic
• Utilisation de bundles externes
• Bonne pratiques de développement, et plus particulièrement pour le web
• Tests unitaires et fonctionnels avec PHPUnit.

... ainsi que d'autres, il est bien difficile de tout lister.

Voici les dernières statistiques des navigateurs observés sur www.alsacreations.com, forum.alsacreations.com et emploi.alsacreations.com sur les 3 derniers mois, en cette fin d'année 2011.

1. Firefox (53,35%) est toujours très présent, représentant l'outil de prédilection pour le développement web.
2. Chrome (26,20%) confirme sa forte progression, et constitue désormais un challenger de poids avec une sérieuse avancée dans le support des nouvelles API et des outils de développement.
3. Internet Explorer (10.34%) stagne quelque peu mais reprend du poil de la bête avec sa dernière version.
4. Safari (7.55%) reste également stable sur le long terme tout en représentant une part importante de visiteurs sur Mac et autres plate-formes Apple.
5. Opera (1.75%) baisse malgré la forte inclinaison du site envers les navigateurs alternatifs.
6. Android (0.32%) arrive en tête des navigateurs mobiles, hors Safari.
7. Mozilla Compatible (0.19%) représente les autres navigateurs alternatifs utilisant le moteur Gecko.
8. Opera Mini (0.07%) reste marginal pour le moment.

Attention : ces chiffres ne sont pas représentatifs du "paysage" moyen francophone, car Alsacreations.com est orienté vers les power-users qui savent maintenir leur navigateur à jour et qui y attachent de l'importance.

L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc).

Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui une partie de plaisir avec Prefixr et PrefixFree.

Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Et enfin, les propriétés de transition et d'animation sont plutôt bien supportées par l'ensemble des navigateurs modernes - et sont promises pour IE10.

Évidemment, le manque de support sur l'ensemble des versions actuelles d'Internet Explorer est le plus grand handicap de ces nouvelles propriétés. Ainsi, nous ne sommes (probablement) pas prêt de délaisser des langages tel que Flash et Javascript pour les animations plus complexes. Mais rien ne nous empêche auhourd'hui d'animer et d'utiliser les transitions/animations sur des éléments non cruciaux de notre interface client. Et surtout, ces modules CSS3 sont déjà largement utilisable en production dans le domaine du Web mobile !

Le sujet des transitions et des animations a déjà été traité par maints auteurs (même ici sur Alsacréations). Cependant, ces deux modules CSS3 comportent plusieurs particularités plus difficiles à saisir; ou à tout le moins, peu connues. Le but de ce tutoriel sera de faire le point sur le fonctionnement des effets de timing des transitions et des animations. En même temps, je m'attarderai à vous faire découvrir deux fonctions CSS3 assez peu connues appelées: cubic-bezier, qui vous permettra de créer vos propres courbes de bézier gérant la fluidité de vos animations, et steps, qui vous permettra de séparer votre transition en plusieurs étapes franches (en "marche d'escalier").

Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Cela est dû au fait qu'une transition aura lieu entre chaque état d'une animation; rendant cette dernière plus fluide.

Survol de l'utilisation des transitions et des animations

Avant toute chose, débutons par un survol de l'utilisation des transitions et des animations. La compréhension du fonctionnement de ces deux modules est évidemment pré-requise à la compréhension de ce tutoriel.

Quelques Références

Transitions:

• Tutoriel: Transitions CSS 3 (Alsacréations)
• La spécification sur les transition CSS 3 sur le w3c

Animations:

• Tutoriel: A master class in CSS animations (en anglais)
• La spécification sur les animations CSS 3 sur le w3c

Transitions

Les transitions permettent de rendre fluide le changement de valeur d'une propriété CSS. Ce changement d'état peut-être déclenché à l'ajout d'une pseudo-classe (:hover, :focus, :active, :target, :checked, etc) ou à la modification d'une ou plusieurs class (ajout/suppression via Javascript).

Les propriétés CSS pouvant subir une transition sont à priori toutes les valeurs numériques. Par exemple: width, margin, padding, color, etc. Une liste (incomplète) de ces propriétés est disponible sur le site du w3c.

Les différentes propriétés de transitions sont:

• transition-property : Définit les propriétés CSS qui subiront une transition (ex: width). Le mot clé all ciblera toutes les propriétés capable de subir une transition. (Obligatoire)
• transition-duration : Définit la durée en temps de la transition en seconde (s) ou milliseconde (ms). (Obligatoire)
• transition-timing-function : Définit un effet de timing à utiliser (le modèle d'interpolation). Nous reviendrons à ces effets dans un autre chapitre. (Facultative)
• transition-delay : Définit l'avance ou le retard que prendra la transition vis à vis de son déclenchement. (Facultative)

Par exemple, le code suivant ciblera toutes les propriétés CSS du sélecteur. La transition aura une durée de 500 millisecondes, commencera lentement et finira plus rapidement (ease-in) et elle commencera une seconde après le déclenchement du changement d'état du sélecteur.

selecteur {
  transition-property: all;
  transition-duration: .5s; /* on aurait pu écrire 500ms également */
  transition-timing-function: ease-in;
  transition-delay: 1s;
}

Remarque: Il est souvent préférable de déclarer la transition sur le sélecteur seul et pas sur un sélecteur avec une pseudo-classe (comme selecteur:hover) puisque dans ce dernier cas de figure, la transition n'aura lieu qu'au moment où la souris survole l'élément, et pas lorsque celle-ci le quittera.

Évidemment, les transitions CSS ont également une syntaxe simplifiée (incroyablement utile avec tous les préfixes navigateurs). Ainsi, on écrira:

selecteur {
  transition:    ;
}

/* Ou en cumulant plusieurs propriétés */
selecteur {
  transition:    ,
     ;
}

Remarque : Les transitions sont encore à l'état d'ébauche au W3C, les préfixes navigateurs seront donc encore de mise. Les navigateurs Gecko comme Firefox (-moz-), les navigateurs Webkit comme Safari, Google Chrome et la majorité des navigateurs mobiles (-webkit-), et les navigateurs Presto comme Opera (-o-) supportent les transitions avec préfixe.

Animations

Les animations CSS3 sont semblables aux transitions. La majeure différence entre les deux est que les animations permettront un contrôle très précis dans le temps de la valeur que prendront les différentes propriétés CSS.

Une animation peut être lancée lors d'un changement de pseudo-classe (:hover, :focus, :active, :target, :checked, etc), lors d'un changement de class via Javascript, ou simplement lors du chargement de la page.

Si l'animation n'est répétée qu'une fois par défaut, elle peut être itérée à souhait.

Pour réaliser une animation CSS, nous avons besoin de deux éléments distincts: une déclaration d'images-clés (keyframe) définie au sein d'une @-rule, et un lien d'un sélecteur vers cette animation au sein d'un bloc de code CSS.

Très rapidement, voilà de quoi pourrait avoir l'air une animation:

@keyframes monanimation {
  0% {
    color: blue;
  }
  100%{
    color: papayawhip;
  }
}
        
selecteur:hover,
selecteur:focus,
selecteur:active{
  animation: monanimation 1.5s ease-in-out;
}

Les animations étant encore à l'état d'ébauche, il vous faudra évidemment ajouter les préfixes navigateurs (présentement, Webkit -webkit-, Gecko -moz- et Opera -o- supportent les animations. Il faudra également pensé à IE 10 -ms-).

Ainsi, nous devrons écrire @-moz-keyframes et -moz-animation afin que nos animations soient comprises sur Firefox. Le même principe s'appliquera aux autres navigateurs.

Les Keyframes

Les keyframes représentent le déroulement de votre animation. Les valeurs en pourcentage représentent un moment temporel précis au cours de la durée de votre animation. Ainsi, 10% représentera la 6ème seconde d'une animation durant une minute.

Remarque : Il est à noter que les keyframes 0% et 100% sont obligatoires et que leur omission empêchera le fonctionnement de votre animation sur certains navigateurs.

Voici quelques remarques en vrac :

• Une transition est effectuée entre chaque keyframe rendant l'animation plus fluide.
• Les keyframes n'ont pas besoin d'être en ordre, le keyframe 100% peut très bien être déclaré avant le keyframe 0%.
• Si plusieurs keyframes ont la même valeur, il est possible de les insérer sur la même ligne en les séparant d'une virgule.

Par exemple, le code suivant serait tout à fait valide :

@-webkit-keyframes bouncing {
40%, 70%, 90%{
  bottom: 0;
  -webkit-animation-timing-function: ease-out;
}
0% {
  bottom: 200px;
  left: 0;
  -webkit-animation-timing-function: ease-in;
}
55% {
  bottom: 50px;
  -webkit-animation-timing-function: ease-in;
}
80% {
  bottom: 25px;
  -webkit-animation-timing-function: ease-in;
}
95% {
  bottom: 10px;
  -webkit-animation-timing-function: ease-in;
}
100% {
  left: 110px;
  bottom: 0;
  -webkit-animation-timing-function: ease-out;
}
}

Fait à noter en lien avec le sujet principal de ce tutoriel, la propriété animation-timing-function est la seule propriété d'une animation à pouvoir être insérée au sein d'une keyframe.

Un exemple de l'animation avec l'utilisation d'un effet de timing. Et la même animation, sans effet de timing. Vous comprendrez sûrement l'importance de bien utiliser ces dernières !

Lancer notre animation

Maintenant que nos keyframes sont créés et référencées par le nom qui leur a été donné, il ne nous reste plus qu'à appeler cette animation à partir d'un sélecteur. Les différentes propriétés d'animation sont les suivantes:

• animation-name: Où on indique le nom de l'animation à utiliser. (obligatoire)
• animation-duration: Où on indique la durée en milliseconde (ms) ou en seconde (s) de l'animation. (Obligatoire)
• animation-iteration-count: Le nombre de fois que l'animation doit être effectué. La valeur devra être un nombre entier ou le mot clé infinite pour que l'animation se répète à l'infinie. La valeur par défaut est de 1. (Facultative)
• animation-direction: Définira si l'animation doit toujours jouer du début à la fin, ou si une fois rendu à la fin, elle doit refaire l'animation en sens inverse. Par défaut l'animation recommencera du début (normal), mais l'utilisation du mot clé alternate alternera la direction de l'animation. Démonstration d'animation-direction (Facultative)
• animation-timing-function: Définit un effet de timing à utiliser (le modèle d'interpolation) entre chaque keyframe. Comme vu précédemment, cette propriété est également modifiable au sein même d'une keyframe. (Facultative)
• animation-delay: Cette valeur définira un délai d'attente avant le début de l'animation, ou dans le cas d'une valeur négative, l'avance que doit prendre l'animation avant de débuter. (Facultative)
• animation-fill-mode: Cette propriété définit l'état de départ et de fin de votre animation. Voici les différentes valeurs possibles:
  • forwards: indique au navigateur de laisser l'élément dans sont état final lors de la dernière itération. (l'élément ne revient donc pas à son état initial)
  • backwards: indique au navigateur de placer l'élément dans son état définit au keyframe 0% au chargement de la page, même si un délais négatif est indiqué.
  • both: appliquera les deux valeurs précédentes.
  • none: indiquera au navigateur de styler l'élément selon son état à la première keyframe visible (dans le cas d'un délais négatif) et de ramener l'animation à la keyframe 0% après la dernière itération. Ceci est le comportement par défaut.

Évidemment, autant de valeurs (avec les préfixes navigateurs en plus) vous créeront vite 21 lignes supplémentaires dans votre bloc de code. Ainsi, nous utiliserons plus souvent qu'autrement la syntaxe simplifiée:

selecteur {
  animation:       ;
}

Ou si vous désirez appliquer plusieurs animations sur un élément:

selecteur {
  animation:        ,
        ;
}

Mettre votre animation sur pause

Et pour clore ce chapitre sur les animations CSS3, il vous est également possible de mettre en pause une animation via la propriété animation-play-state qui prendra l'une des deux valeurs suivantes : running (par défaut) ou paused pour arrêter l'animation.

selecteur:hover {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  animation-play-state:paused;
}

Fonctionnement des fonctions de timing

Comme nous l'avons vu précédemment, autant les transitions que les animations ont recours à des effets de timing. Pour rappel, ces effets sont utilisés en tant que valeur des propriétés suivantes:

• transition-timing-function
• animation-timing-function (dans un bloc de code CSS ou au sein d'une keyframe)

Ces effets de timing permettent de gérer la fluidité d'une transition (entre deux propriétés CSS ou entre deux keyframes). Un effet de timing peut-être représenté sous deux formes: une fonction en escalier (stepping function), ou une courbe de Bézier cubique.

Dans le cas de ces deux fonctions, on pourra se les représenter sur un graphique où l'axe des Y représentera chaque étape entre la valeur initiale et la valeur finale de la propriété CSS subissant une transition et l'axe des X représentera l'avancement dans le temps de la transition (de son début à sa fin).

Dans le cas du graphique précédent (où une courbe de Bézier est utilisée), notre animation commencera lentement et finira lentement.

De base, les navigateurs fournissent quelques fonctions de transitions par défaut. Celles-ci sont:

• ease: décélère légèrement au début et termine sa transition lentement. (cubic-bezier(0.25, 0.1, 0.25, 1.0))
• linear: la transition sera stable sans décélération ni accélération. (cubic-bezier(0.0, 0.0, 1.0, 1.0))
• ease-in: commencera lentement (cubic-bezier(0.42, 0, 1.0, 1.0))
• ease-out: finira lentement (cubic-bezier(0, 0, 0.58, 1.0))
• ease-in-out: commencera et finira lentement (cubic-bezier(0.42, 0, 0.58, 1.0))
• step-start: L'élément prendra la valeur finale de sa transition dès le déclenchement de la transition. Autrement dit, il n'y aura pas de transition visible. (steps(1, start))
• step-end: L'élément prendra la valeur finale de sa transition à la fin de la durée prévue par celle-ci. Autrement dit, on aura l'impression qu'un délai a eu lieu. (steps(1, end))

Remarque: Chaque effet par défaut correspond à une fonction cubic-bezier() ou steps(). J'indique les valeurs de chaque fonction à titre de référence, nous nous attarderons plus en détail à l'utilisation plus poussée des fonctions cubic-bezier() et steps() dans les prochains chapitres.

La fonction CSS cubic-bezier()

Sa syntaxe

Une courbe de cubic-bezier sera définie par quatre points (p0, p1, p2, p3) disposés sur un graphique où les axes X et Y auront pour valeur une échelle entre 0 et 1.

Les points p0 et p3 auront toujours pour valeur de positionnement respective (0,0) et (1,1). En soit, le p0 représente le début de la transition et le p3 représente la fin. Ces deux points sont fixes et ne peuvent pas être modifiés.

Les p1 et p2 en revanche pourront être positionnés selon nos besoins sur le graphique à l'aide de la fonction cubic-bezier.

Ainsi, la fonction cubic-bezier nous sert à définir la position en X et en Y des points 1 et 2. La fonction prendra en paramètre 4 nombres flottants représentant respectivement:

transition-timing-function: cubic-bezier(, , , );    

Remarque : Il faut obligatoirement utiliser un nombre flottant. Ainsi, nous devrons écrire 1.0 en lieu et place de 1, et ainsi de suite.

La valeur de position sur l'axe X (représentant le temps) des deux points doit avoir une valeur située entre 0 et 1. La valeur en Y cependant peut prendre n'importe quelle valeur.

Remarque: La possibilité de donner un valeur non-comprise entre 0 et 1 à la valeur Y est une modification récente aux spécifications du w3c. Ce faisant, cette possibilité est présentement ignoré des navigateurs webkit (à ce jour, Google Chrome en est à sa version 15, et Safari à sa version 5.1). Cependant, ce bug devrait être bientôt réglé, et vu la rapidité de propagation des nouvelles versions sur Chrome et Safari, ce n'est qu'une question de mois avant que cette possibilité soit totalement utilisable. Chez Firefox et Opera, tout fonctionne déjà.

L'intérêt premier de pouvoir spécifier n'importe quelle valeur sur l'axe des Y est de permettre très facilement l'utilisation d'effets de bouncing (rebond) dans divers cas.

Exemple de la fonction cubic-bezier() utilisé pour donner un effet de rebond

Si vous avez remarqué, les courbes de Bézier sont proportionnelles au temps et à l'écart entre la valeur de départ et la valeur finale. Ce faisant, plus la transition est longue, et plus l'écart est grand entre l'état initial et final de notre élément, plus l'effet de timing sera visible.

Outils pour générer ses propres courbes de Bézier

Dit ainsi, toute cette théorie semble peut-être compliquer la grande puissance de la fonction cubic-bezier. Mais rassurez-vous, plusieurs outils en ligne vous permettent déjà de générer vos propres courbes de Bézier dans un environnement simple et efficace.

Les fonctionnalités de la majorité de ces outils étant malgré tout limitées (Opera transition-timing-function), je vous évite la longue liste pour ne me concentrer que sur un site: cubic-bezier.com.

Cet outil a été créé par Lea Verou (en anglais) et permet tout simplement de créer vos propres courbes de Bézier applicable aux effets de timing CSS 3. Plusieurs fonctionnalités de cet outil en font un incontournable. Entre autre:

• Possibilité d'enregistrer et de partager vos propres courbes.
• Possibilité de tester vos courbes en direct et de les comparer.
• Interface graphique permettant une compréhension très simple des courbes de Bézier.
• Un site en HTML5 et canvas très inspirant !

En gros, il ne vous reste plus qu'à le découvrir si ce n'est déjà fait ! (Et si vous ne comprenez pas encore tout à fait la fonction cubic-bézier(), vous y aurez des exemples concrets)

La fonction CSS steps()

La fonction CSS steps() vous permet de définir une transition en "escalier". Cela veut dire que votre transition ne sera pas fluide comme si elle utilisait cubic-bezier, mais passera par des étapes (step) bien tranchées.

La syntaxe de cette fonction est plutôt simple. Elle prendra deux paramètres :

• Premier paramètre: Un nombre entier représentant le nombre de "marche" de la transition.
• Deuxième paramètre: Un mot clé qui définira si la propriété subissant la transition sera modifié au début ou à la fin du délai de chaque marche. Le mot clé sera start (au début) ou end (à la fin).

Ainsi, le graphique représentant les fonctions steps(3,start) et steps(3,end) serait le suivant:

La fonction steps() pourrait être utilisé pour imiter l'action d'une machine à écrire, ou alors pour animer une image.

• Machine à taper (réinterprétation d'un code de Lea Verou)
• Image animé (par Samurai)

Conclusion

Vous voilà, je l'espère, un peu plus éclairé sur l'utilisation des effets de timing, et des transitions/animations en général. Comme nous le constatons de jour en jour, les outils que nous offre CSS3 sont extrêmement puissant et nous n'avons pas encore terminé d'en faire le tour. Mais prenez garde, ce n'est pas parce que les animations existent qu'il faut en mettre partout ! Évitons de retomber dans le web extravagant du début des années 2000...

Entre temps, voici quelques démonstrations et outils pouvant vous inspirer :

• Animatable : une galerie d'animations
• Transitions impressionnantes appliquées aux bordures
• Banque d'animation à utiliser
• Une mise en garde des développeurs de Mozilla

Flux (rss): http://www.alsacreations.com/rss/actualites.xml