31/10/2018 2 Minutes read Tech 

L'animation pour tous

Les animations CSS3, c'est bien, mais malheureusement lorsqu'un client éprouve le besoin d'avoir un site web encore compatible sur les anciens navigateurs cela devient problématique. Surtout quand ce même site doit être compatible mobile et tablette.
ekino paris Team communication

Il existe alors plusieurs solutions :

  • Tout en javascript : On ne profite pas des nouveautés et des avantages de CSS3 et on fait toutes les animations en JavaScript. Cela peut être assez frustrant pour un développeur, mais surtout on passe à côté des performances sur tablette et mobile.
  • Tout en CSS3 : Tant pis pour les vieux browsers et les développeurs se font plaisir. Mais il va tout de même falloir penser à une dégradation gracieuse pour que le site reste fonctionnel.
  • L’assemblage des deux : On profite des nouveautés et des performances de CSS3 et on assure la compatibilité sur les vieux navigateurs.

C’est sur cette troisième solution que nous allons nous attarder.

Les outils nécessaires

Pour se faire nous avons seulement besoin d’un outil de détection et d’une librairie JavaScript. Dans cet exemple nous allons donc utiliser Modernizr et jQuery.

La méthode

Voyons voir maintenant la mise en place. Tout repose sur la détection grâce aux booléens apportés par Modernizr. Pour chaque animation, on va détecter si la propriété est supportée et nous allons développer pour chacun des deux cas.

Commençons par un exemple simple avec une translation vers la droite dans un menu vertical.

Prenons une liste de liens :

[code lang="html"]<br />&lt;ul&gt;<br /><%%KEEPWHITESPACE%%> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lien 1&lt;/a&gt;&lt;/li&gt;<br /><%%KEEPWHITESPACE%%> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lien 2&lt;/a&gt;&lt;/li&gt;<br /><%%KEEPWHITESPACE%%> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lien 3&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />[/code]

Ajoutons un peu de style :

[css]<br />ul li{<br /><%%KEEPWHITESPACE%%> display: block;<br /><%%KEEPWHITESPACE%%> transition: 200ms ease;<br />}<br />[/css]

À noter que la transition est essentielle pour que l’animation se joue.

Voyons maintenant le javascript :

[code lang="js"]<br />var lis = $('ul li');<br />lis.mouseover(function(){<br /><%%KEEPWHITESPACE%%> if(Modernizr.csstransitions){<br /><%%KEEPWHITESPACE%%> $(this).css({<br /><%%KEEPWHITESPACE%%> marginLeft : 10<br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> }else{<br /><%%KEEPWHITESPACE%%> $(this).animate({<br /><%%KEEPWHITESPACE%%> marginLeft : 10<br /><%%KEEPWHITESPACE%%> }, 200);<br /><%%KEEPWHITESPACE%%> }<br />});<br />[/code]

Ainsi vous disposez d’une animation à la fois compatible sur iPad et sur IE7, tout en ne négligeant pas la performance sur mobile et tablette.

Voici donc une introduction à une méthode simple, ouvrant tout un champ de possibilités pour apporter des animations sur des éléments DOM.