Requêtes média CSS
Types de médias introduits par CSS2
Le @media La règle, 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 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 le @media règle.
| Propriété | |||||
|---|---|---|---|---|---|
| @médias | 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 pas|seulement type de support et (expressions) {
Code CSS ;
}
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
all le type sera implicite.
Vous pouvez également avoir différentes feuilles de style pour différents médias :
Valeur
Description
tous
Utilisé pour tous les appareils de type média
imprimer
Utilisé pour les imprimantes
filtrer
Utilisé pour les écrans d’ordinateur, les tablettes, les téléphones intelligents, etc.
discours
Utilisé pour les lecteurs d’écran qui « lisent » la page à haute voix
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
Écran @media et (min-width : 480px) {
corps {
couleur de fond : vert clair ;
}
}
Essayez-le vous-même »
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
Écran @media et (min-width : 480px) {
#leftsidebar {largeur : 200px ; flottant : gauche ;}
#main {marge-gauche : 216px ;}
}
Essayez-le vous-même »
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.
#Requêtes #média #CSS