Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
@media Requête
Considérons l'utilisation réelle de toute la fonctionnalité @media
.
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>
La valeur la plus typique du type de média est screen
, car généralement, nous créons des pages web pour des appareils avec des écrans. Voyons comment l'utiliser :
@media screen and (min-width: 768px) {
.container {
background-color: purple;
}
}
Avec l'aide de cette règle, nous avons indiqué au navigateur que si l'appareil de l'utilisateur a un écran et que sa largeur est de 768px ou plus, alors l'élément avec le nom de classe container
a la propriété background-color
avec la valeur purple
.
Nous spécifions la largeur de l'écran pour laquelle nous voulons définir certaines règles css. Considérons les exemples suivants :
/* 1st example */
@media screen and (max-width: 1200px) {
.container {
color: aliceblue;
}
}
/* 2nd example */
@media screen and (min-width: 1680px) {
.container {
color: gainsboro;
}
}
Dans le premier exemple, nous avons indiqué au navigateur que pour tous les appareils avec une largeur d'écran inférieure ou égale à 1200px, appliquer la propriété color
avec la valeur aliceblue
à l'élément avec le nom de classe container
.
Dans le deuxième exemple, nous avons informé le navigateur que si la largeur de l'écran de tout appareil dépasse ou est égale à 1680px, la propriété color
avec la valeur gainsboro
doit être appliquée à l'élément avec le nom de classe container
.
Les opérateurs sont facultatifs et sont spécifiés entre le type de média et la caractéristique de média.
and
indique au navigateur que toutes les caractéristiques présentées doivent être satisfaites.
@media screen and (min-width: 380px) and (max-width: 840px) {
.link {
text-decoration: overline;
}
}
Cette règle indique au navigateur que l'élément avec le nom de classe link
doit avoir la propriété text-decoration
avec la valeur overline
uniquement si l'utilisateur a un appareil avec un écran ET que la largeur de l'écran est égale ou supérieure à 380px ET que la largeur de l'écran est égale ou inférieure à 840px.
En utilisant l'opérateur ,
, nous pouvons indiquer un groupe d'expressions qui, si l'une d'elles est satisfaite, déclenchera l'exécution d'une requête média.
@media screen and (min-width: 960px), (max-width: 540px) {
.link {
text-decoration: overline;
}
}
Avec l'aide de cette règle, nous avons indiqué au navigateur que l'élément avec le nom de classe link
doit avoir la propriété text-decoration
avec la valeur overline
si la largeur de l'écran de l'utilisateur est supérieure à 960px ou égale à 960px OU si la largeur de l'écran de l'utilisateur est inférieure à 540px ou égale à 540px.
Merci pour vos commentaires !