Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - W3C

Coder sur iPhone… encore :p

Hadrien — Fri, 08 Aug 2008 18:13:00 +0200

Regardez ce genre de design :

Pour un navigateur "ancien" (c'est à dire qui ne connaît pas CSS3), réaliser un cadre de ce genre, avec coins arrondis, dégradés, etc, est un très dur labeur. Ça se joue à coup de multiples <div /> imbriqués dont les background sont les coins de l'image savamment découpée, le tout en deux version : une pour IE, la seconde pour les autres… C'est à cause de ça que le web2.0 a beaucoup été designé (du verbe to design :p) à coup d'aplat de couleur.

Et bien avec Safari 3, finie l'usine à gaz ! Une propriété magique, propriétaire pour le moment, mais en cours de validation par le W3C fait des miracles. Il s'agit de -webkit-border-image.

Pour faire une bulle comme sur le screenshot, nous n'avons besoin que d'une image :

Et de la css suivante :

.bulle {
	border-width: 16px 8px 8px 8px;
	-webkit-border-image: url('bubbleWhite.png') 16 8 8 8;
}

Appliqué au XHTML suivant :

<div class="bulle">
	Je suis dans une bulle \o/
</div>

Et c'est tout. La bulle pourra s'agrandir en hauteur et en largeur sans aucun étirement ou décalage.

Comment cela fonctionne-t-il ?

On définit tout d'abord l'épaisseur de chaque bordure du cadre :
border-width: haut droite bas gauche;
Dans mon cas, la bordure du haut sera plus épaisse car il faut y faire rentrer la flèche de la bulle.

Ensuite, on indique quelles zones de l'image de fond seront appliquées dans les bordures :
-webkit-border-image: url('bubbleWhite.png') haut droite bas gauche;
On prends la zone de l'image de 0px du haut à 16px et on la met sur la bordure du haut, la zone de 0 pixel de droite à 8px et on la calle à droite, etc. Tout le reste fait partie du centre du contenant qui s'étirera selon le contenu. Tout ce qui est dans les bordure gardera sa taille initiale.

Les zones rouges sont les parties de l'images qui seront placées en tant que bordure, le reste sera étirée en tant que background :

C'est magnifique !

Coder pour l'iPhone

Hadrien — Fri, 01 Aug 2008 21:09:00 +0200

…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 :

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

XHTML :

<div class="panel" id="panel">
	kikoo
</div>

Javascript :

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

Acid test 3

Hadrien — Thu, 14 Feb 2008 10:51:00 +0100

On va encore se marrer. L'Acid test version 3 a été testé sur tout les navigateurs du marché. Voici ce qui devrait s'afficher sur un navigateur respectant les standards à 100% :

Malheureusement, on est loin du compte. Seule la dernière nightbuild de WebKit atteind un score respectable de 82% :

Et marrons nous devant IE6 et IE7 :

Voilà, avec 70% de navigateurs qui n'arrive même pas à 15% d'un test de standards, le web est mal barré…