Le carnet de l'Ombre

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

• La documentation officielle d’Apple pour les iBidules.
• Un article chez ALA très bien fait (comme d’hab) : partie 1 et partie 2^[3].
• L’avis sur l’iPhone et les css par un pro de chez Opera.
• L’affichage sur petit écran chez pompage.
• Les types de media CCS (chez Laurent Denis)