Requêtes média.

@media.

Les media query permet d'associer un ensemble d'instructions avec une condition. Elle peut être utilisée au plus haut nieveau de la CSS ou bien être à l'interieur d'un groupe de règles conditionnelles. Elle est composée d'un type de média (optionnel sauf dans le cas d'utilisation d'opérateurs logiques) et des différentes caractéristiques relatives au média. L'attribut @media peut avoir pour type de média : screen, print, speech et all (tous les précédents) et se place après @media séparé d'au moins un espace.

Dans une media query, il est possible d'associer plusieurs déclaration avec un opérateur logique: 'and' 'only' 'not' et ','. Avec 'only', on peut appliquer un style uniquement si 'lintégralité de la requête est vrai. En utilisant 'only', la requête doit oblifatoirement contenir un type de média. La virgule permet de combiner pluisieurs requêtes en une. Si une des requêtes est vérifiée, toute la requête sera vrai. Elle agit comme l'opérateur 'or'.

Les media features, caractéristiques média, elles sont mises entre parenthèses. Les plus utilisées sont 'width' (qui correspond au viewport et qui peut être préfixé par min- et max-), 'height' (idem que 'width'), 'orientation' (landscape et portrait), 'resolution' (densité de pixel du terminal), 'aspect-ratio' (h/w), 'overflow-block' (manière dont l'appareil gère un contenu qui dépasse du viewport selon l'axe de bloc) et 'overflow-inline' (possibilité de faire défiler le contenu si ce dernier dépasse du viewport sur l'axe en ligne). Bon y en a d'autres...

Les media features permettent de cibler des styles en fonction des caractèristiques ci-dessus mais aussi de cibler plus spécifiquement en fonction d'un appareil d'affichage avec ou sans souris, son mécanisme de saisie, sa luminosité, etc.

/* vérifie si le mécanisme de saisie de l'appareil peut survoler les éléments  */
@media (hover: hover) { ... }
								

On peut aussi vérifier l'abscence d'une caratéristique avec 'not' de cette manière et cibler les appareils qui ne permettent pas le survol:

@media (not(hover)) { ... }
								

Par soucis de compatibilité avec les anciens navigateurs, on utilise 'only' pour leur éviter d'appliquer les styles quand ils ne prennent pas en charge les media query. Cela n'impacte pas les nouveaux navigateurs.

@media only screen and (max-width: 1200px) and (orientation: landscape) { 
... 
}
								

En ce qui concerne les media features et les caractéristiques portant sur le viewport (width), l'ajout de barre de défilement n'est pas effective de la même manière sur tous les terminaux ! Le W3C spécifiait que les barres de défilement font parties des dimensions de la page. Mais tous n'en tiennent pas compte comme Chrome par exemple.

/* cette condition sera t-elle vrai si ajout de barre de défilement ? */
/* quelles modifs sur l'apprence de la page ?*/
/* A VERIFIER ! */
@media (max-width: 640px) { ... }

/* autre écriture possible (spe niv 4)*/
@media (width <= 640px) { ... }
								

Combiner les types et les media features.

Exemples avec 'and' et la virgule:

/* pour tout écran dont la taille est inférieur à 1200px
et dont l'orientation et paysage... */	

@media screen and (max-width: 1200px) and (orientation: landscape) { 
... 
}

/* autre écriture possible (spe niv 4)*/
/* pour tout appareil dont la width est comprise entre... */
@media (min-width: 640px) and (max-width: 980px) { ... }

@media (640px <= width <= 980px ) { ... }


/* pour tout appareil dont la height est supérieur ou égal à... 
ou si l'écran est en mode portrait... */

@media (min-height: 680px), screen and (orientation: portrait) { 
... 
}						
									

Avec 'and', les deux conditions doivent être vrai pour appliquer les styles. Par contre dans la dernière requête, elle s'applique aussi bien avec une imprimante dont la page soit d'une dimension supérieur ou égal à 680px qu'à un smatphone avec un viewport de 500px en mode portrait car la deuxième clause était vérifiée.


Important !

Pour une meilleur portabilité, comme avec le zoom sur certains appareils, il est recommandé d'utiliser les valeurs en 'em' dans les media query lors de l'utilisation d'une longueur. 'em' est aussi mieux adapté pour la taille des polices lorsque la taille a été ajustée dans le navigateur.


/* Au niveau le plus haut du code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* plusieurs déclérations */
@media screen and (min-width: 640px) and (max-width: 980px) {
  .bloc {
	background-color: black;
  }
}
	
/* Imbriquée dans une autre règle-@ conditionnelle */
@supports (display: flex) {
  
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
								

Inclure des media query ( A REVOIR en détail !! ):

/* Dans le HTML */
<link rel="stylesheet" media="screen and (color)" href="example.css" />							 		

/* Dans le CSS */
@import url(color.css) screen and (color);		


/* Plus généralement */
<link rel="stylesheet" media="screen and (color), projection and (color)" 
		rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)" 
		rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }					 		
									

Par défaut, si @media n'a pas de type, c'est la valeur 'all' qui sera prise en compte:

@media (orientation: portrait) { … }

/* est équivalent à : */

@media all and (orientation: portrait) { … }						 		
									

Il est possible de combiner en une liste les media query en les séparent par une virgule. Attention ! Si l'une des requête se trouve d'être fausse, alors toute la liste se trouve d'être fausse. Par contre si toutes sont vrai, alors la liste totale sera appliquée. Dans les media query, la virgule fait office d'opérateur logique 'OU' tandis que 'AND' exprime un 'et' logique.

@media screen and (color), projection and (color) { … }				 		
									

Utilisation pratique.

Les principales valeurs de @media sont: 'sceen' et 'print'.

Les principales valeurs conditionnelles utilisées dans @media, sont 'width' (qui peut être préfixée par min- et max-), 'orientation' qui peut prendre deux valeurs, soit 'portrait' ou bien 'landscape', 'resolution' suivit d'une valeur en 'dpi' (et qui peut être préfixée par min- et max-).

Une courte liste des fonctionnalités supprimées, obsolètes ou qui ne seront pas portées: 'device-width' (préfixé ou pas),



Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/11/2020