TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les media queries

Les "media queries" permettent d'adapter le design selon le périphérique utilisé

On peut ainsi prendre en compte le type de périphérique (screen ou print), les dimesions d'écran pour les tablettes ou les smartphones

Rappels sur les media-queries CSS2

Les types de medias reconnus

  • screen : Ă©cran
  • handheld : pĂ©riphĂ©rique mobile
  • print : impression
  • aural (CSS 2.0) ou speech (CSS 2.1) : synthĂšse vocale
  • braille : pĂ©riphĂ©rique braille
  • embossed : imprimante braille
  • projection : projecteur
  • tty : terminal
  • tv : tĂ©lĂ©vison
  • all : tout pĂ©riphĂ©rique

Utilisation globale

Un media peut concerner la totalité d'une feuille de style externe

Les rÚgles qui y figurent ne seront prises en compte que pour le média concerné

Utilisation locale

Au sein d'une feuille de style certaines rĂšgles peuvent ĂȘtre destinĂ©es Ă  un pĂ©riphĂ©rique particulier

Les rÚgles ci-dessus ne seront appliquées que pour l'impression

Exemples de media-queries CSS3

En CSS3 les critÚres permettant de sélectionner un périphérique se sont affinés

Ce critÚre peuvent porter sur des dimensions précises de la zone d'affichege ou de l'écran, le nombre de couleurs, la résolution

Ces critĂšres peuvent ĂȘtre combinĂ©s par des opĂ©rateurs boolĂ©ens :

  • and : et
  • , : ou
  • not : non
  • only : uniquement
Un div qui s'adffiche différemment selon la largeur de la zone d'affichage
En CSS3 il est possible d'Ă©crire un contenu sur plusieurs colonnes. Pour des pĂ©riphĂ©riques de petite taille il est prĂ©fĂ©rable de s'en tenir Ă  une seule colonne. Ce rĂ©sultat peut bien entendu ĂȘtre obtenu par des mediaqueries appropriĂ©es. Le nombre de colonne peut Ă©galement ĂȘtre conditionnĂ© par l'orientation du pĂ©riphĂ©rique mobile. L'orientation d'un pĂ©riphĂ©rique mobile peut ĂȘtre simulĂ©e par le redimenionnement de la fenĂȘtre d'affichage dans le navigateur sur un Ă©cran d'ordinateur de bureau.

Liste des mediaqueries CSS3

largeur
width largeur de la zone d'affichage dimension
max-width largeur maximale de la zone d'affichage dimension
min-width largeur minimale de la zone d'affichage dimension
device-width largeur de l'Ă©cran dimension
max-device-width largeur maximale de l'Ă©cran dimension
min-device-width largeur minimale de l'Ă©cran dimension
hauteur
height hauteur de la zone d'affichage dimension
max-height hauteur maximale de la zone d'affichage dimension
min-height hauteur minimale de la zone d'affichage dimension
device-height hauteur minimale de l'Ă©cran dimension
max-device-height hauteur maximale de l'Ă©cran dimension
min-device-height hauteur minimale de l'Ă©cran dimension
ratio
aspect-ration rapport largeur/longueur de la zone d'affichage (entier/entier : 16/9) ratio (entier/entier)
max-aspect-ratio rapport maximal largeur/longueur de la zone d'affichage ratio (entier/entier)
min-aspect-ratio rapport minimal largeur/longueur de la zone d'affichage ratio (entier/entier)
device-aspect-ratio rapport largeur/longueur de l'Ă©cran ratio (entier/entier)
max-device-aspect-ratio rapport maximal largeur/longueur de l'Ă©cran ratio (entier/entier)
min-device-aspect-ratio rapport minimal largeur/longueur de l'Ă©cran ratio (entier/entier)
couleur
color nombre de bits utilisés par couleur entier
max-color nombre maximal de bits utilisés par couleur entier
min-color nombre minimal de bits utilisés par couleur entier
color-index nombre de couleurs entier
max-color-index nombre maximal de couleurs entier
min-color-index nombre minimal de couleurs entier
monochrome nombre de bits utilisés pour les périphériques monochromes entier
max-monochrome nombre maximal de bits utilisés pour les périphériques monochromes entier
min-monochrome nombre minimal de bits utilisés pour les périphériques monochromes entier
résolution
resolution nombre de pixels par unité de longueurs (dpi ou dpcm) entier (dpi ou dpcm)
max-resolution nombre maximal de pixels par unité de longueurs (dpi ou dpcm) entier (dpi ou dpcm)
min-resolution nombre minimal de pixels par unité de longueurs (dpi ou dpcm) entier (dpi ou dpcm)
autres
orientation orientation du périphérique lanscape ou portrait
grid teste si le périphérique est en grille comme un terminal 0 (grille) ou 1 (bitmap)
scan balayage de périphériques de type téléviseurs progressive ou interlace

Usage

L'usage le plus courant est l'adaptation de l'affichage des contenus en fonction des dimensions du périphérique, en particulier sa largeur ou son orientation

Les éléments et propriétés fréquement concernés sont :

  • Modification de la taille du texte
  • Ajustement des marges
  • Ajustement des dimensions
  • Les dimensions des contrĂŽles pour en faciliter le pointage au doigt pour les pĂ©riphĂ©rique tactiles
  • RĂ©duction du nombre de colonnes pour les pĂ©riphĂ©riques Ă©troits
  • Affichage ou masquage de certains Ă©lĂ©ments

Compatibilité

Les navigateurs récents pour ordinateurs de bureau et périphériques mobiles reconnaissent les mediaqueries CSS3

Les navigateurs ne reconnaissant pas les mediaqueries CSS3 prennent généralement en compte le premier terme d'une mediaquery (screen, print ...)

Pour les navigateurs plus anciens il existe des alternatives javascript :

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007