Mot-clé - handheld

Fil des billets - Fil des commentaires

iPhone, iPod Touch, pda, gsm et les css

Actuellement de plus en plus d’appareils portables et ultra portables comme les pda et les gsm propose un navigateur web intégré. Sur les modèles de marque Nokia, c’est bien souvent un navigateur basé sur le WebKit d’Apple, ce programme n’a pas l’air mauvais mais on se rabattra avec bonheur sur le navigateur Opera Mini qui connaît un succès grandissant dû à ces grandes qualités techniques (entres autres : les images sont réduites en taille en passant par un serveur chez Opera avant d’être affichée, facilitant ainsi la navigation si on a une petite connexion). Les machines d’Apple, elles, utilisent une version simplifiée de Safari, ce qui permet, vu la taille de l’écran et l’ergonomie de l’engin, de voir des pages entières «?comme à la maison?» et de zoomer à loisir sur la page pour afficher l’information intéressante. Pour les autres PDA et GSM, il ne fait aucun doute que Opera Mini est le meilleur navigateur. Il existe également un autre excellent navigateur : Minimo de la fondation Mozilla, mais il est toujours en version beta.

Petit rappel sur les CSS

Jadis pour faire de la mise en page web on utilisait des tableaux (dans d’autres tableaux) et on calait les cellules des tableaux (pour ne pas qu’elles bougent) avec des images transparentes à la taille désirée. Cette manière était évidemment mauvaise : vous imaginez créez une mise-en-page dans votre traitement de texte préféré en créant des colonnes avec des tableaux et créant des titres manuellement en surlignant le texte et en donnant à chaque fois la taille, la couleur, etc?? Non. Vous définiriez les colonnes dans les propriétés du document et vous créeriez les style dont vous avez besoin pour vos titres, puces, etc. D’autant plus que pour changer la mise en forme de votre texte, il suffit de modifier le style et tout change dans le document.

C’est ainsi que certains ont envisagé l’utilisation de feuille style pour les pages Web et sont nées les CSS : Les feuilles de styles pour les pages html. En changeant un paramètre dans une feuille css commune à toutes les pages du site, on modifie l’aspect du site en une seule opération. Ceci fonctionnera d’autant mieux si vos pages respecte la sémantique html. La philosphie de la combinaison html+css est de séparer le contenu de la présentation.

Mais, il y a mieux (et là on s’approche du sujet de ce billet) : on peut définir une feuille de style par média :

  • screen : pour un écran standard
  • print : pour l’impression
  • handheld : pour les appareils portables
  • projection, etc…

Exemple de code pour les pages de ce site[1] :

<style type="text/css" media="screen">
@import '/dotclear2/themes/lombre/style.css';
</style>
<style type="text/css" media="handheld">
@import '/dotclear2/themes/lombre/handheld.css';
</style>
<style type="text/css" media="print">
@import '/dotclear2/themes/lombre/print.css';
</style>

Vos pouvez admirer l’effet de la feuille de style print en faisant un aperçu avant impression dans votre navigateur. Tout ce qui est annexe (menu, tag, etc) a été effacé pour l’impression[2].

CSS et les navigateurs pour portables

Opera Mini

Opera Mini respecte complètement les standards et gère le media handheld lorsqu’il le rencontre sur les pages visitées. Il n’est donc pas nécessaire de faire une seconde version du site (quelle horreur!) : si votre site est bien construit, il suffit de lui adjoindre une deuxième feuille de style avec le bon média.

Safari

Safari aussi respecte les standars mais… À sa façon bien particulière : il utilise un sélecteur CSS3 (toujours en beta, les versions actuelles des CSS sont à 2.1). Voici le code utilisé sur ce site :

<style type="text/css" media="only screen and (max-device-width: 480px)">
@import '/dotclear2/themes/lombre/handheld.css';
</style>

Vous remarquerez que j’ai utilisé la même feuille de style pour les iBidules et les handheld. Dans un premier temps, cela restera comme ça, mais il est tout à fait possible de faire une feuille de style spécifique.

Les autres

Sur les machines équipées de Windows Mobile, c’est bien souvent Internet Explorer qui est proposé. Je vous conseille grandement de passer à Opéra Mini, vous y gagnerez énormément. Pour les Nokia avec le WebKit, apparemment c’est aussi un bon navigateur mais je ne sais pas s’il reconnaît le média Handheld quand il est présent. Avec Minimo non plus je ne sais pas si cela est possible.

Conclusion

En créant des sites en suivant les standards et de manière sémantique, il est tout fait possible de l’adapter automatiquement avec le media désiré sans devoir créer de multiple version d’un même contenu mais en le présentant différemment suivant le media. C’est là toute la puissance des CSS. Dans le cas de l’iPhone et de l’Pod Touch, si on ne veut pas refaire un nouveau design, il suffit d’utiliser le même fichier CSS que pour le handheld, ça vous fera gagner du temps. ;-)

Source

Notes

[1] La syntaxe particulière (et valide) de la règle @import utilisée ici permet de faire sauter la feuille de style pour IE5 Mac qui a disparu des statistiques. L’utilisation de @import par rapport à l’élement <link> permet quant à elle de désactiver les styles sur les vieux navigateurs (IE4, Netscape 4) qui ont un support partiel des CSS. Ces navigateurs verront donc le site nu, sans mise-en-page, mais il sera parfaitement utilisable (pour voir le site nu, dans Firefox allez dans le menu Affichage/Style de la page/Aucun style). ;)

[2] Il s’agit de la feuille de style print livrée avec Dotclear2 légèrement modifiée

[3] À noter que Safari reconnaît le microformat hcard et crée un lien automatiquement sur les numéros de téléphone pour les composer d’un clic