Feuilles de styles, médias CSS et navigateurs mobiles : une astuce pour garantir compatibilité et confort d'utilisation

Victor Brito — Tue, 06 Jan 2009 20:17:00 +0100

Que l'on déplore ou non, le Web sur les mobiles est de moins en moins négligeable, d'autant moins qu'il peut compter sur le succès, entre autres, de l'iPhone. Or, consulter un site Web depuis un mobile peut devenir un casse-tête quand le site consulté utilise des feuilles de style inadaptées aux mobiles ou que le navigateur mobile utilisé implémente mal les différents médias CSS ou n'en reconnaît pas certains.

En effet, une feuille de style destinée à un écran d'ordinateur (utilisant donc le média screen) peut être remplie de règles CSS dont l'objectif est d'afficher tout ou partie du contenu en colonnes (avec les propriétés display et float, notamment), en tenant compte d'une taille d'écran au moins égale à 800 ou à 1024 pixels de large. Or, sur un mobile, une telle feuille de style induira soit la présence d'une barre de défilement horizontale soit le recours à une fonctionnalité permettant de zoomer le contenu auquel on veut accéder, la page Web entière s'adaptant dans un premier temps à la largeur d'écran disponible, réduisant la taille des polices à un niveau tel qu'un problème d'accessibilité se pose.

Heureusement, en HTML 4 et en XHTML, il est possible de préciser le(s) média(s) concerné(s) par la feuille de style lorsqu'on l'appelle au moyen de l'élément link, grâce à l'attribut media. Il en est de même en CSS 2, grâce à la règle @media, d'une part, et à la possibilité de préciser le(s) média(s) concerné(s) par la feuille de style appelée au moyen de la règle @import. Ainsi, on peut créer plusieurs feuilles de styles, dont une ciblant les mobiles en utilisant le média handheld :

<link rel="stylesheet" href="http://blog.britoweb.net/post/2009/01/06/screen.css" media="screen,handheld" />
<link rel="stylesheet" href="http://blog.britoweb.net/post/2009/01/06/handheld.css" media="handheld" />

@import "screen.css" screen;
@import "handheld.css" handheld;

@media screen {
  /* Règles CSS pour les écrans d'ordinateur */
}
@media handheld {
  /* Règles CSS pour les mobiles */
}

Seulement voilà : si certains navigateurs mobiles implémentent le média handheld, d'autres, en revanche, l'ignorent et, qui plus est, iront même jusqu'à ne lire que les feuilles de style ciblant le media screen ! Et je ne me hasarde pas à parler des media queries, un module de CSS 3 qui permettra de cibler plus finement les médias (par exemple, ne cibler que les écrans dont la taille ne dépasse pas 480 pixels de largeur, ce qui donne le code suivant pour l'attribut media et les règles @media et @import : only screen and (max-device-width:480px)) ; mais, ce genre de requête n'est, pour l'instant, implémenté que par Opera et Safari.

Malgré tous ces points délicats, il est possible de fournir à l'ensemble des navigateurs mobiles une feuille de style adaptée au support mobile. A List Apart vient de publier un article indiquant une astuce garantissant à la fois un confort d'utilisation du mobile pour consulter un site et la compatibilité entre navigateurs mobiles.

L'astuce part du principe de deux feuilles de style distinctes, l'une (ecran.css) pour les écrans d'ordinateurs, l'autre (correctifs-mobile.css) pour les mobiles (dont le rôle est d'annuler les règles énoncées par ecran.css qui sont inadaptées aux écrans de mobile). Ces deux feuilles sont appelées par une troisième (noyau.css), qui contient le code suivant :

@import "ecran.css";
@import "correctifs-mobile.css" handheld;
@import "correctifs-mobile.css" only screen and (max-device-width:480px);

Une quatrième feuille de style (mobile.css) apporte des styles supplémentaires pour les mobiles.

Les différentes feuilles de style sont appelées comme suit :

<link rel="stylesheet" href="http://blog.britoweb.net/post/2009/01/06/noyau.css" media="screen" />
<link rel="stylesheet" href="http://blog.britoweb.net/post/2009/01/06/mobile.css" media="handheld, only screen and (max-device-width:480px)" />

Ainsi, les navigateurs mobiles ne tenant compte que du média handheld ne chargeront que la feuille de style mobile.css ; ceux qui tiennent compte à la fois des médias screen et handheld chargeront toutes les feuilles de style, de même pour ceux qui ne tiennent compte que du média screen tout en implémentant le module media queries de CSS 3. Quant à ceux qui ignorent ce module de CSS 3 et qui ne connaissent que le média screen, ils ne chargeront que la feuille de style ecran.css.

Blog - Britoweb - Tag - feuilles de style handheld

Feuilles de styles, médias CSS et navigateurs mobiles : une astuce pour garantir compatibilité et confort d'utilisation