Webkit…c'est fantastique. Je parle de web dev pour Safari Mobile, pas du SDK Cocoa touch.

Quand on dev du web de façon classique, c'est à dire en privilégiant IE, puis Firefox, et éventuellement si on a le temps, Safari et Opéra, on est obligé d'utiliser les même technos de 5 ans d'âge, de passer du temps à faire des version différentes pour IE qui ne respecte rien, même pas ses propres standards proprios. Obligé de faire des design laids, car IE6 ne sait pas gérer le PNG24, impossible de s'amuser avec les fantastiques CSS3 que seul Safari gère pour le moment.

L'iPhone utilise donc Safari, le navigateur le plus en avance technologiquement. En plus des CSS3, il inclue des propriétés CSS (propriétaires, ok, mais proposées au W3C pour compléter CSS3) très pratiques qui permettent de gagner un temps fou pour faire des choses, qui nécessitent l'utilisation de grosses librairies Javascript pompant la CPU sur les autres navigateurs.

Parmi celles-ci, on trouve -webkit-transition-property et -webkit-transition-duration. Ces deux propriétés CSS permettent de réaliser des transitions en une seule ligne de code JS. Sur les autres navigateurs, il faut définir des intervalles qui vont éxécuter les étapes de l'animation toute les 10 millisecondes, procédé chiant à coder (heureusement il y a des librairies qui aident à faire ça facilement). Avec Safari, il suffit de préciser dans la feuille de style quelle est la propriété qui devra produire une animation et sa durée. Ensuite, dès que cette propriété est modifiée par javascript (par changement de la variable style ou par changement de classe), la propriété subira une transition d'une fluidité parfaite.

Exemple : CSS :

  1. .panel {
  2. 	width: 100px;
  3. 	-webkit-transition-property: width;
  4. 	-webkit-transition-duration: 1s;
  5. }

XHTML :

  1. <div class="panel" id="panel">
  2. 	kikoo
  3. </div>

Javascript :

  1. document.getElementById('panel').style.width = '500px';

Le conteneur va s'agrandir progressivement de 100px à 500px en 1 seconde, avec une parfaite fluidité.

Pour conclure, c'est vraiment très agréable de pouvoir utiliser les dernières technologies web sans se prendre la tête en voyant un résultat tel qu'on l'a imaginé dès le premier jet, sans retouche. Si Safari était le navigateur le plus utilisé, le métier de web développeur serait tellement beau…

Plus d'infos et des exemples