iPhone dév. web : astuces HTML et CSS

En ce moment, je suis sur du développement web dédié aux iPhone. C’est plutôt sympathique et tellement plus simple de n’avoir à gérer qu’un seul navigateur ! Qui plus est, Safari est truffé de petites améliorations qui permettent de rendre une interface web agréable à utiliser.

Je profite donc de ce billet pour vous livrer pêle-mêle une petite série de trucs et astuces qui je l’espère vous rendront la vie plus belle vous seront utiles.

Empêcher la mise à l’échelle automatique du texte

Lorsque vous basculez votre précieux entre les modes portraits et paysage, les textes changent de taille. C’est un comportement automatique de Safari qui m’a prodigieusement énervé ne sachant comment le contourner. Pour l’empêcher, ajouter l’attribut CSS suivant à votre sélecteur du body :

body {
	-webkit-text-size-adjust: none;
}

Masquer la barre d’adresse automatiquement

Pour ce faire, il est nécessaire d’exécuter un peu de javascript :

window.scrollTo(0, 1);

Attention ! Ce comportement ne fonctionne pas pour les pages dont la hauteur est inférieure à la zone client. Logique, il n’y a pas de hauteur suffisante pour appliquer un défilement. Solution : appliquer un min-height à 416px = 356px (hauteur de la zone client en mode portrait) + 60px (hauteur de la barre d’adresse).

Appliquer une ellipse en fin de texte

L’effet de texte qui fait rêver tous les développeurs de sites normaux, l’ellipse de texte qui tronque automatiquement la fin lorsque la longueur dépasse le conteneur et ajoute ‘…’ à la place :

h1 {
	overflow: hidden; /* Si vous omettez cette définition, l'effet ne fonctionnera pas ! */
	text-overflow: ellipsis;
	white-space: nowrap; /* idem overflow */
}

Placer un texte par défaut auto-effaçable dans un champ de saisie

On voit très souvent ce genre de chose dans les applications natives : un champs de saisie contient un texte gris clair qui s’efface dès que l’on active le champ. Sous Safari, cette fonctionnalité est disponible sans effort !

<input name="mon_champ" type="text" placeholder="Texte ici...">

Désactiver la majuscule automatique des mots

Lorsque vous tapez avec le clavier sur un iPhone, et que l’option « Majuscules auto. » est activée dans la configuration générale de votre iPhone, pour tout nouveau mot, le clavier active la majuscule pour la première lettre. C’est très pratique dans certains cas, embarrassant dans d’autres. Il est possible de désactiver ce comportement au cas par cas avec un petit attribut :

<input name="mon_champ" type="text" autocapitalize="none">

Désactiver la correction automatique

Même solution que précédemment avec l’attribut « autocorrect » :

<input name="mon_champ" type="text" autocorrect="off">

Utilisez les types de champs de saisie avancés

Le clavier de l’iPhone peut s’adapter au contenu à saisir dans un champ. Pour ce faire il suffit de définir le type de champ, autre que « text ». La liste des types supportés est la suivante :

• text : active le clavier standard,
• email : active le clavier dédié au courriels,
• url : active le clavier adapté aux URL,
• tel : active le clavier téléphonique,
• search : le clavier proposera le bouton « Rechercher » bleu,
• pattern="[0-9]*" : en combinant cet attribut à un type « text » ou « number », le clavier numérique est activé,

Plus de détails sur les formulaires HTML5 : http://diveintohtml5.org/forms.html.

Créer un lien vers un numéro de téléphone

Rien de plus simple :

<a href="tel:0123456789">Appeler</a>

Voilà pour ce billet. Certaines de ces astuces sont des capacités HTML5 et CSS3 et peuvent être appliquées à d’autres navigateurs, mais ce n’est pas le sujet ici. Je vous laisse découvrir tout cela !