Version mobile avec les CSS Media Queries

Vincent Bernat

De nom­breux sites pro­posent dé­sor­mais une ver­sion mo­bile, comme Wi­ki­pé­dia, des­ti­née à four­nir le contenu sur des ap­pa­reils avec une faible bande pas­sante et un écran de taille ré­duite. Les CSS Me­dia Que­ries sont une fu­ture re­com­men­da­tion du W3C per­met­tant d’uti­li­ser des feuilles de style dif­fé­rentes se­lon la fa­çon dont le do­cu­ment est af­fi­ché. Cela per­met d’adap­ter l’af­fi­chage d’un site à un écran de té­lé­phone mobile.

Utilisation#

Il y a deux fa­çons dif­fé­rentes de mettre en œuvre les CSS me­dia que­ries. La pre­mière est de four­nir une feuille de style ad­di­tion­nelle qui sera uti­li­sée sous conditions :

<link rel="stylesheet" media="screen and (max-width: 700px)" href="mobile.css">

Quand la lar­geur de l’af­fi­chage est in­fé­rieure à 700 pixels, la feuille de style mobile.​css est alors uti­li­sée. La se­conde fa­çon est de dé­cla­rer une sec­tion à l’in­té­rieur d’une feuille de style existante :

@media screen and (max-width: 700px) {
    #article {
       margin: 0.3em 0.2em;
    }
}

Bien qu’il existe un cer­tain nombre de pro­prié­tés qui peuvent être uti­li­sées dans les condi­tions, les deux plus cou­rantes sont max-width et min-width. Il est pos­sible d’uti­li­ser cette fonc­tion­na­lité pour mo­di­fier cer­tains as­pects de votre site web, comme par exemple ré­duire les marges ou ca­cher cer­tains blocs de na­vigation.

Support dans les navigateurs#

Les na­vi­ga­teurs mo­biles ac­tuels sup­portent les CSS me­dia que­ries: Sa­fari, An­droid et Opera dans leur ver­sion mo­bile com­pren­dront sans pro­blème ces ins­truc­tions sup­plé­men­taires. Ainsi, si le but est de four­nir une pré­sen­ta­tion adap­tée à un té­lé­phone por­table, il n’y a pas grand chose à se soucier.

Il existe des po­ly­fills qui per­mettent d’ac­ti­ver cette fonc­tion­na­lité dans des na­vi­ga­teurs plus an­tiques comme In­ter­net Ex­plo­rer 8. L’un d’eux est Re­spond qui ne com­prend que les mots-clefs min-width et max-width et ajoute leur sup­port dans In­ter­net Ex­plo­rer 6, 7 et 8.

Exemple#

Sur mon site web, j’ai mo­di­fié mes feuilles de style pour ti­rer parti de cette fonc­tion­na­lité. Il est pos­sible de tes­ter le ré­sul­tat dans un na­vi­ga­teur clas­sique en chan­geant la taille de la fe­nêtre. Es­sayez ! Voici quelques uns des chan­ge­ments qui doivent ap­pa­raître pro­gres­si­ve­ment en ré­dui­sant la taille de la fenêtre :

  • La barre la­té­rale se trans­forme en une barre en haut de l’écran plus compacte.
  • La boîte de re­cherche sur le site en haut à gauche disparaît.
  • Les marges sont ré­duites à plu­sieurs endroits.

Voici à quoi cela res­semble avec un na­vi­ga­teur classique :

Vue par défaut avec une largeur usuelle
Vue par défaut avec une largeur usuelle

En ré­dui­sant la taille de la fe­nêtre, on ob­tient ceci :

Vue avec une fenêtre fortement réduite en largeur
Vue avec une fenêtre fortement réduite en largeur

Je­tez un coup d’œil sur mes fi­chiers CSS pour d’autres exemples (il faut re­gar­der vers la fin des fi­chiers). Pour un ar­ticle plus dé­taillé sur les pos­si­bi­li­tés, ren­dez-vous chez CSS Tricks.