CSS3 : les Media Queries

mediaquery

La Media Queries définit les techniques pour appliquer les feuilles de style en fonction des périphériques utilisés pour la lecture du HTML. Cette pratique permet l’adaptation dynamique du design à l’aide du CSS.

Les Media Queries offrent la possibilité de mieux exploiter les avantages de la séparation de la présentation et du contenu. Le but étant de pouvoir combler les contraintes de résolution, de dimensions ainsi que d’autres critères variés pour une amélioration de l’apparence graphique, l’utilisabilité et la lisibilité d’un site web. Les plateformes les plus concernées sont les écrans à faibles résolutions, les TV, les plages de braille ainsi que les navigateurs mobiles, les synthèses vocales…

Structure des Media Queries CSS3

La Media Queries permet d’offrir un large panel de critères qui est plus précis, mais également plus vaste. Cela à l’aide de valeurs numériques et de propriétés, sans oublier les combinaisons multiples de ces mêmes critères.

Relativement explicite, l’écriture des requêtes Media Queries est toujours égale à une valeur vraie ou fausse. Il suffit ainsi d’associer diverses déclarations possibles avec un opérateur logique pour la définition de l’ensemble des conditions à réunir pour appliquer les styles admis dans le bloc adjacent.
Voici quelques connecteurs logiques les plus utilisés : and, only et not. Concernant l’opérateur logique « ou », il suffit d’énumérer successivement différentes Media Queries sans oublier de les séparer par des virgules. Il suffit que l’une d’entre elles soit valable pour que l’ensemble de la règle soit appliqué.

Les deux exemples suivants ciblent les écrans de largeur inférieure à 640 pixels grâce à la règle max-width de valeur 640px.

Les combinaisons peuvent être multiples. Ici on s’adresse à un écran dont la résolution en largeur est comprise entre 200 et 640 pixels :

Critères

Concernant les fonctionnalités, ces dernières sont préfixées par max- et min- lorsque celles-ci acceptent des valeurs numériques pour la définition des valeurs maximales ou minimales respectées.

color : support de la couleur (bits/pixel)
color-index : périphérique utilisant une table de couleurs indexées
aspect-ratio : ratio du périphérique de sortie (par exemple 4/3)
device-aspect-ratio : ratio de la zone d’affichage
device-height : dimension en hauteur du périphérique
device-width : dimension en largeur du périphérique
grid : périphérique bitmap ou grille (ex :lcd)
height : dimension en hauteur de la zone d’affichage
monochrome : périphérique monochrome ou niveaux de gris (bits/pixel)
orientation : orientation du périphérique (portait ou landscape)
resolution : résolution du périphérique (en dpi, dppx, ou dpcm)
scan : type de balayage des téléviseurs (progressive ou interlace)
width : dimension en largeur de la zone d’affichage

Pour les appareils mobiles

L’utilisation des Media Queries se fait généralement pour les améliorations spécifiques à l’affichage sur les appareils mobiles. En effet, puisque ces derniers sont les plus concernés par les critères sur les dimensions de l’écran, d’espace disponible et sur l’utilisation tactile. Les appareils sous l’iOS d’Apple supportent bien les Media Queries. Ainsi, on trouve le plus souvent les règles pour l’agrandissement de la taille du texte, l’agrandissement de la taille des zones cliquables ainsi que des contrôles, mais également l’affichage d’éléments spécifiques ou le masquage, sans oublier l’ajustement des dimensions et marges ainsi que le passage d’un contenu sur une seule colonne.

Concernant la fonctionnalité orientation, celle-ci est appliquée aux périphériques pouvant être orientés comme les tablettes tactiles. Ainsi, on pourra tout simplement indiquer une feuille de style spécifique pour l’ajustement de l’affichage :

Répondre