Requêtes média CSS
Types de médias introduits par CSS2
La @mediarègle, introduite dans CSS2, a permis 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 les imprimantes, un pour les appareils portables, un pour les appareils de type télévision, etc.
Malheureusement, ces types de supports n'ont jamais été bien pris en charge par les appareils, autres que le type de support d'impression.
CSS3 a introduit les requêtes multimédias
Les requêtes multimédias dans CSS3 ont étendu l'idée des types de médias CSS2 : au lieu de rechercher un type d'appareil, elles examinent la capacité de l'appareil.
Les requêtes multimédias peuvent être utilisées pour vérifier de nombreux éléments, tels 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 fournir une feuille de style personnalisée aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones mobiles (tels que les téléphones iPhone et Android).
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la @mediarègle.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Syntaxe de la requête multimédia
Une requête multimédia se compose d'un type de média et peut contenir une 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 média spécifié correspond au type de périphérique sur lequel le document est affiché et si toutes les expressions de la requête média sont vraies. Lorsqu'une requête multimédia est vraie, la feuille de style ou les règles de style correspondantes sont appliquées, en suivant les règles de cascade normales.
À moins que vous n'utilisiez les opérateurs not ou only, le type de support est facultatif et le
alltype sera implicite.
Vous pouvez également avoir différentes feuilles de style pour différents médias :
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Types de média CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Media Queries Exemples simples
Une façon d'utiliser les requêtes multimédias est d'avoir une section CSS alternative directement dans votre feuille de style.
L'exemple suivant change la couleur d'arrière-plan en vert clair si la fenêtre d'affichage est large de 480 pixels ou plus (si la fenêtre d'affichage est inférieure à 480 pixels, la couleur d'arrière-plan sera rose) :
Exemple
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
L'exemple suivant montre un menu qui flottera à gauche de la page si la fenêtre d'affichage est large de 480 pixels ou plus (si la fenêtre d'affichage est inférieure à 480 pixels, le menu sera au-dessus du contenu) :
Exemple
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Plus d'exemples de requêtes multimédias
Pour plus d'exemples sur les requêtes multimédias, rendez-vous à la page suivante : Exemples CSS MQ .
Référence CSS @media
Pour un aperçu complet de tous les types de médias et fonctionnalités/expressions, veuillez consulter la règle @media dans notre référence CSS .