Table Des Matières
Introduction
HTML4 a défini un mécanisme pour prendre en charge les feuilles de style dépendantes des médias, adaptées aux différents types de supports. Par exemple, un document peut utiliser différentes feuilles de style pour l’écran et pour l’impression. En HTML, cela peut être écrit comme suit:
CSS a adapté et étendu cette fonctionnalité avec ses règles @media et @import, ajoutant la possibilité d’interroger la valeur des fonctionnalités individuelles:
Media queries peuvent être utilisées avec HTML, XHTML, XML [XMLSTYLE] et les règles @import & @media de CSS.
En ce qui concerne les unités utilisées dans les requêtes médias, eh bien elles sont les mêmes que celles dans les autres parties de CSS, telles que définies dans [CSS3VAL]. Par exemple, l’unité de pixels représente des pixels CSS et non des pixels physiques.
/Les unités de longueur relative (Relative length) dans les requêtes médias sont basées sur la valeur initiale, ce qui signifie que les unités ne sont jamais basées sur les résultats des déclarations. Par exemple, en HTML, l’unité “em” est relative à la valeur initiale de la taille de la police, définie par l’agent utilisateur ou les préférences de l’utilisateur, pas par n’importe quel style sur la page.
Media Query C’est quoi ?
Media query (ou requête média) est une méthode de test de certains aspects de l’agent utilisateur ou du périphérique dans lequel le document est affiché. Les media queries permettent d’adapter la présentation du contenu à une large gamme d’appareils sans changer le contenu lui-même. Dans la majorité des cas, les media queries ne dépendent ni du contenu du document, ni de son style ni de tout autre aspect interne; Ils ne dépendent que des informations “externes” sauf si une autre caractéristique spécifie explicitement qu’elle affecte la résolution des media queries, telles que la règle @viewport.
Les media queries consistent à un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou l’affichage de leurs couleurs. Ajoutées dans CSS3, les Media Queries sont utilisées dans la règle CSS @media pour appliquer conditionnellement des styles à un document et dans divers autres contextes et langues, tels que HTML et Javascript.
La syntaxe d’une requête média consiste en un modificateur de media query optionnel, un type de média optionnel et zéro ou plus de fonctionnalités multimédia: 
Media query est une expression logique vraie ou fausse. Une requête multimédia est vraie si:
- Le type de média, si spécifié, correspond au type de média du périphérique où l’agent utilisateur s’exécute et
- La condition des médias (media condition) est vraie.
Les déclarations concernant les requêtes média dans cette section supposent que la section de syntaxe est suivie. Les requêtes de média qui ne sont pas conformes à la syntaxe sont discutées à la section Gestion des erreurs. la syntaxe aura la priorité sur les conditions et exigences dans cette section.
Les agents utilisateurs doivent réévaluer les media queries en réponse aux changements dans l’environnement utilisateur qu’ils connaissent.
Il n’est jamais nécessaire d’appliquer une feuille de style pour évaluer les expressions,sauf dans le cas où une autre caractéristique spécifie explicitement qu’elle affecte la résolution des media queries.
Media Queries Combinaison
Plusieurs media queries peuvent être combinées dans une liste de media queries séparées par des virgules. Une liste de requêtes médias est vraie (‘true”) si l’une de ses requêtes médias est vraie (‘true”) et fausse (‘false’) si toutes ses media queries sont fausses (‘false’) .
Elle est évaluée comme étant vraie (‘true”) toute list media query vide.
Médias Query Modificateurs
Un modificateur des requêtes média est tout simplement le mot-clé unique qui éventuellement préfixe la requête média pour en modifier la signification.
Négation d’une requête média: le mot-clé ‘not’
Une requête média individuelle peut avoir un résultat négatif en la préfixant par le mot-clé ‘not’. Si la requête média est normalement évaluée à vraie (‘true‘), la préfixer avec ‘not’ cela changera sa valeur logique en Fausse (‘false’)
Cacher une requête média des agents utilisateurs hérités: le mot-clé ‘only’
Le concept de media queries provient de HTML4, cette spécification ne définissait que les types de média, mais avait une syntaxe compatible à l’avance qui permet d’ajouter des concepts futurs comme media features (caractéristiques des médias). Elle consommerait les caractères d’une requête multimédia jusqu’au premier caractère non alphanumérique et interprétera cela comme un type de média, en ignorant le reste. Par exemple, le media query écran et couleur serait tronqué pour ne garder que l’écran.
Malheureusement, cela signifie que les agents utilisateurs existants qui utilisent ce comportement de gestion des erreurs ignorent les fonctionnalités multimédias dans une media query, même s’ils sont beaucoup plus importants que le type de média de la requête. Cela peut entraîner l’application accidentelle de styles dans des situations inappropriées.
Pour cacher ces requêtes multimédias à partir des agents utilisateurs existants, la requête multimédia peut être préfixée par le mot-clé ‘only’. Lemot-clé ‘only’ n’aura aucun effet sur le résultat de la requête médiatique, mais entraînera l’analyse de la requête multimédia par les agents utilisateurs existants, comme spécifier le type de média inconnu ‘only’, et donc être ignoré.
Types de Media
Un type de média est une large catégorie de périphériques utilisateur-agent sur lesquels un document peut être affiché.
Malheureusement, les types de médias se sont révélés insuffisants pour distinguer les appareils ayant des besoins de styles différents. Certaines catégories qui étaient à l’origine assez distinctes, tel que l’écran et le portable, se sont significativement confondu durant les années depuis leur invention. D’autres, comme TTY ou TV, révèlent des différences utiles de la norme d’un écran d’ordinateur complet, et sont donc potentiellement utiles pour être ciblé avec des styles différents, mais définir les types de médias comme étant mutuellement inégales rend difficile la tâche de les utiliser de manière raisonnable; Au lieu de cela, ces aspects exclusifs sont mieux exprimés en tant que caractéristiques des médias tel que ‘grid’ ou ‘scan’.
En tant que tel, les types de médias suivants sont définis pour être utilisés dans les requêtes multimédias:
‘All’ Correspond à tous les périphériques.
‘Print’ Correspond à des imprimantes et des périphériques destinés à reproduire un affichage imprimé, qui sont vus sur des écrans pour “aperçu avant impression“.
‘Screen’ Destiné aux écrans d’ordinateur en couleurs.
‘Speech’ Destiné aux synthétiseurs vocaux. CSS2 possédait un type de média similaire : aural.
En outre, les types de médias dites obsolètes suivants sont définis. Les auteurs ne doivent pas utiliser ces types de média; en contrepartie, il est recommandé qu’ils choisissent des fonctions multimédias appropriées qui représentent mieux l’aspect de l’appareil sur lequel ils tentent de s’opposer.
Les agents utilisateurs doivent reconnaître les types de médias suivants comme étant valides, mais doivent les faire correspondre à rien: ‘tty’, ‘tv’, ‘projection’, ‘handheld’, ‘braille’, ‘embossed’, ‘aural’.
