OUJOOD.COM
Propriété CSS @media
La propriété CSS @media est utilisée pour cibler des styles en fonction des médias tels que l'écran, l'impression, et la parole. Elle permet de définir des styles spécifiques pour différents types de supports de sorte que votre contenu soit adapté à la plateforme utilisée pour le consulter.
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 ?)
L'utilisation de requêtes multimédias est une technique populaire pour fournir une feuille de style personnalisée (conception Web réactive) aux ordinateurs de bureau, ordinateurs portables, tablettes et téléphones mobiles.
Vous pouvez également utiliser des requêtes multimédias pour spécifier que certains styles sont uniquement destinés aux documents imprimés ou aux lecteurs d'écran (type de média : impression, écran ou parole).
En plus des types de médias, il existe également des fonctionnalités multimédias. Les fonctionnalités multimédias fournissent des détails plus spécifiques aux requêtes multimédias, en permettant de tester une fonctionnalité spécifique de l'agent utilisateur ou du périphérique d'affichage. Par exemple, vous pouvez appliquer des styles uniquement aux écrans dont la largeur est supérieure ou inférieure à une certaine largeur.
Syntaxe générale
La syntaxe générale de la propriété @media est la suivante:
@media <condition de média> {
/* règles de style */
}
La condition de média peut être une expression qui définit le type de support cible, comme "screen" pour les écrans d'ordinateur ou "print" pour l'impression. Vous pouvez également inclure des conditions supplémentaires telles que la taille de l'écran ou la résolution pour cibler de manière plus précise.
Valeurs possibles
Les valeurs possibles pour la condition de média incluent:
- screen: utilisé pour les écrans d'ordinateur et les appareils mobiles
- print: utilisé pour l'impression de documents
- speech: utilisé pour les synthèses vocales
- all: utilisé pour tous les types de supports
Il existe également des valeurs plus spécifiques telles que "tv" pour les télévisions et "handheld" pour les appareils mobiles.
Conseils et astuces pour l'utilisation
- Tester votre contenu sur différents types de supports pour vous assurer que vos styles s'affichent correctement
- Utiliser des règles de style génériques pour les médias qui ne nécessitent pas de styles spécifiques pour améliorer les performances
- Toujours tester vos styles pour les différentes résolutions d'écran pour une meilleure expérience utilisateur
- Utiliser la propriété @media pour créer une version imprimable de vos pages en incluant uniquement les éléments importants pour une impression efficace
En utilisant judicieusement la propriété CSS @media, vous pouvez améliorer considérablement l'expérience utilisateur de votre site web en fonction des supports utilisés pour le consulter. Assurez-vous de tester vos styles sur différents types de supports pour garantir une présentation cohérente et fonctionnelle.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 21 | 9.5 | 3.5 | 4 | 9 |
Exemples
1- Exemple Changez la couleur d'arrière-plan de l'élément
en "bleu clair" lorsque la fenêtre du navigateur mesure au maximum 600 pixels de large :Exemple : 📋 Copier le code
@media only screen and (min-width: 600px) {
body {
background-color: lightblue;
}
}
Voir aussi notre tutoriel sur CSS3 Media Queries