Media queries


Les media queries attribuent une feuille de style CSS à un support de sortie et déterminent ainsi comment un fichier HTML associé doit être affiché sur différents périphériques de sortie. Des variantes optimales de mise en page pour différents appareils comme les téléphones mobiles, les tablettes ou différents formats d'écran peuvent être sélectionnés selon certains critères notés dans les feuilles de style.

Informations générales

Les media queries sont un élément important du CSS3, qui permet aux programmeurs d'établir des sites web adaptatifs qui s'affichent correctement sur des écrans de différentes tailles. Par "correctement", on entend que le contenu n'est pas modifié mais que c'est le type de sortie ou la présentation qui sont modifiés. Avec la diffusion sur les appareils mobiles, les formats d'affichage ont également fondamentalement changé. Les écrans des smartphones sont nettement plus petits que ceux des ordinateurs. Les tablettes, les assistants personnels numériques et les netbooks présentent également différentes tailles d'écrans.

Pour assurer un balisage optimal pour tous les formats d'affichage avec le CSS, toutes les informations média sont consultées par les media queries avant le chargement d'un site web. Il n'est pas nécessaire de noter la taille de l'écran pour chaque appareil mais il est possible de renseigner les types d'appareils, les supports média ainsi que les points d'arrêts. Le terminal télécharge ensuite automatiquement la bonne partie du fichier CSS et affiche le contenu tel que la grandeur de l'écran le permet.

Fonctions

Les media queries reposent principalement sur un type de média et, optionnellement, sur plusieurs caractéristiques média comme la largeur, la taille ou la couleur pour déterminer les caractéristiques de sorties spécifiques pour différents médias. Les media queries peuvent être intégrées au document HTML avec la balise <link/> pour différents types d'appareils. Pour cela, en plus des indications standards nécessaires, la valeur screen doit être notée avec l'attribut media. Si rien n'est spécifié ici, la valeur par défaut est appliquée pour all.

<link rel="stylesheet" type="text/css"
      href="style.css" media="screen" /> 

Valeurs possibles

  • all : tous les appareils
  • handheld : assistants personnels numériques ou téléphones mobiles avec petits écrans
  • print : imprimantes
  • tv : téléviseur ou appareils similaires
  • aural : navigateur vocal qui lit à voix haute le texte de la page Web. (Il existe aussi des commandes pour braille ou des imprimantes braille) .
  • projection : projecteurs ou appareils similaires
  • screen : écran d'ordinateur traditionnel

En outre, des requêtes média peuvent être écrites dans un fichier CSS séparé. Les règles générales et différentes du CSS sont définies ici avec @media print {} ou @media handheld{}. L'avantage de cette variante réside dans le fait que le terminal de l'utilisateur ne doit charger qu'un seul fichier CSS. Il est de toute façon recommandé de séparer le HTML et le CSS l'un de l'autre.

Breakpoints

Un autre concept est celui des points d'arrêts. On ne renseigne pas ici les types de média mais la taille des pixels qui offre un point de fuite pour l'affichage sur différents terminaux. Si l'appareil utilise un certain nombre de pixels, le contenu sera affiché en conséquence. De 320 à 759 pixels, une configuration en une colonne est choisie, laquelle peut être également affichée sur les téléphones portables, tandis que pour les tablettes de 760 à 979 pixels, deux colonnes s'affichent.

C'est le programmeur qui décide combien de points d'arrêts doivent être utilisés. On peut mettre des points d'arrêts dans un fichier HTML ainsi que dans un fichier CSS.

Importance pour l'optimisation des moteurs de recherche

Les media queries sont essentielles pour couvrir un nombre maximum d'utilisateurs. Les utilisateurs utilisent de nos jours différents appareils pour surfer sur la toile, faire des achats en ligne ou pour utiliser divers services. Les media queries font partie intégrante de l'optimisation mobile car elles affichent correctement le contenu d'un site web responsive. Si ce n'est pas le cas, les utilisateurs sont réticents et quittent rapidement le site qu'ils ont essayé de visiter avec leur appareil mobile.

Liens web