CSS utilisant des variables dans les requêtes multimédias
Utilisation de variables dans les requêtes multimédias
Nous voulons maintenant modifier une valeur de variable dans une requête multimédia.
Astuce : Les Media Queries consistent à définir différentes règles de style pour différents appareils (écrans, tablettes, téléphones mobiles, etc.). Vous pouvez en savoir plus sur les requêtes multimédias dans notre chapitre sur les requêtes multimédias .
Ici, nous déclarons d'abord une nouvelle variable locale nommée --fontsize pour la
.containerclasse. Nous fixons sa valeur à 25 pixels. Ensuite, nous l'utilisons dans la
.containerclasse plus bas. Ensuite, nous créons une
@mediarègle qui dit "Lorsque la largeur du navigateur est de 450 pixels ou plus, changez la valeur de la variable --fontsize de la
.containerclasse en 50px."
Voici l'exemple complet :
Exemple
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
Voici un autre exemple où nous modifions également la valeur de la variable --blue dans la @mediarègle :
Exemple
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la
var()fonction.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Fonction CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |