La règle @media, introduite dans CSS2, permettait de définir différentes règles de style pour différents types de médias.
Exemples : Vous pouvez avoir un ensemble de règles de style pour les écrans d'ordinateur, un pour imprimantes, une pour les appareils portables, une pour les appareils de type téléviseur, etc.
Malheureusement, ces types de médias n'ont jamais reçu beaucoup de support de la part des appareils, autres que le type de support d’impression.
Les requêtes multimédias en CSS3 ont étendu l'idée des types de médias CSS2 : au lieu de rechercher un type d'appareil, ils examinent la capacité du appareil.
Les requêtes multimédias peuvent être utilisées pour vérifier de nombreuses choses, telles que :
largeur et hauteur de la fenêtre
largeur et hauteur de l'appareil
orientation (la tablette/le téléphone est-il en mode paysage ou portrait ?)
résolution
L'utilisation de requêtes multimédias est une technique populaire pour proposer un style personnalisé feuille sur les ordinateurs de bureau, les ordinateurs portables, les tablettes et les téléphones mobiles (tels que les téléphones iPhone et Android).
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la règle @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Une requête multimédia consiste en un type de média et peut contenir un ou plusieurs expressions, qui se résolvent en vrai ou en faux.
@media not|only mediatype and (expressions) {
CSS-Code;
}Le résultat de la requête est vrai si le type de support spécifié correspond au type de périphérique sur lequel le document est affiché et toutes les expressions de la requête multimédia sont vraies. Lorsqu'une requête multimédia est vraie, la feuille de style ou les règles de style correspondantes sont appliqué, en suivant les règles normales en cascade.
Sauf si vous utilisez les opérateurs not ou only, le type de média est facultatif et le tous le type sera implicite.
Vous pouvez également avoir différentes feuilles de style pour différents supports :
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Utilisé pour tous les appareils de type média
Utilisé pour les imprimantes
Utilisé pour les écrans d'ordinateurs, les tablettes, les téléphones intelligents, etc.
Utilisé pour les lecteurs d'écran qui « lisent » la page à voix haute
Une façon d'utiliser les requêtes multimédias consiste à disposer d'une section CSS alternative directement dans votre feuille de style.
L'exemple suivant change la couleur d'arrière-plan en vert clair si le la fenêtre d'affichage mesure 480 pixels de large ou plus (si la fenêtre est inférieure à 480 pixels, la couleur de fond sera rose) :
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
L'exemple suivant montre un menu qui flottera à gauche de la page si la fenêtre a une largeur de 480 pixels ou plus (si la fenêtre est inférieure à 480 pixels, le menu sera au dessus du contenu) :
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Pour plus d'exemples sur les requêtes multimédias, rendez-vous à la page suivante : Exemples CSS MQ.
Pour un aperçu complet de tous les types de médias et fonctionnalités/expressions, veuillez consulter le Règle @media dans notre référence CSS.