Responsive design : les media queries CSS 3 à l'honneur Application aux navigateurs mobiles

Avec la possibilité de tester la largeur de l'écran, nous voici équipés pour attribuer une feuille de style spécifique aux navigateurs mobiles, sur iPhone, Android ou autres.

Les media queries vont donc nous permettre d'affecter, aux écrans mobiles dont la largeur est inférieure ou égale à 480 pixels, une feuille de style spécifique style-mobile.css, grâce à la balise suivante :

<link rel="stylesheet" href="style-mobile.css" 
media="only screen and (max-device-width:480px)"/>
La même syntaxe pourra bien sûr s'appliquer aux règles équivalentes commençant par @import ou par @media.
Le marché de l'Internet mobile étant en pleine croissance et les téléphones mobiles renouvelés plus souvent que les ordinateurs, nous pouvons considérer que cette norme media queries est à présent comprise par la plupart des navigateurs spécifiques à ces appareils.


Astuce Remise à zéro de la feuille de style

Dominique Hazaël-Massieux, spécialiste du Web mobile au W3C, propose une remise à zéro des styles destinés aux mobiles : le fichier de styles styles-ecran.css, adapté aux écrans d'ordinateur, est annulé par un fichier anti-styles-ecran.css pour les terminaux mobiles. Cette technique peut alors s'écrire de la façon suivante :

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

Il reste alors à attribuer aux appareils de poche une feuille styles-mobile.css qui leur sera propre. Ainsi, la mise en page ne sera pas perturbée par le style initial, pour ceux des navigateurs mobiles qui prennent en compte le média screen.

figure 9-3 - le site mobile de la sncf affiché par l'intermédiaire de deux
Figure 9-3 - Le site mobile de la SNCF affiché par l'intermédiaire de deux simulateurs proposés par Opera mini, représentant un téléphone classique à gauche et un smartphone à droite. © Eyrolles
Précédent
Suivant