Les variables natives CSS peuvent-elles être utilisées dans les requêtes multimédias ?

Utilisation de variables natives CSS dans les requêtes multimédias

Les variables natives CSS sont un outil puissant pour contrôler les styles en fonction des valeurs des variables définies dans le CSS. Cependant, il existe une limitation à l'utilisation de ces variables dans les requêtes multimédias.

Le problème survient lorsque vous tentez d'utiliser des variables CSS dans les requêtes multimédias. Par exemple, considérons le code suivant :

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Ce code vise à définir une requête multimédia qui applique des styles lorsque la largeur de la fenêtre d'affichage est inférieure ou égale à la valeur stockée dans la variable --mobile-breakpoint. Cependant, cette approche ne fonctionne pas car les variables CSS ne peuvent pas être utilisées dans les requêtes multimédias.

La spécification CSS indique explicitement que la fonction var(), utilisée pour accéder aux variables CSS, ne peut être utilisée que dans les valeurs de propriété. Il ne peut pas être utilisé dans les noms de propriétés, les sélecteurs ou les requêtes multimédias. Cette limitation est imposée pour garantir que les variables CSS sont utilisées dans le but prévu de contrôler les valeurs de style, plutôt que de modifier la structure ou les fonctionnalités du document CSS.

Pour résoudre ce problème, on peut utiliser un préprocesseur CSS comme Impertinent ou moins. Ces préprocesseurs permettent l'utilisation de variables dans les requêtes multimédias en traduisant le code en CSS valide. À l'aide d'un préprocesseur, le code précédent pourrait être réécrit comme :

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

En utilisant un préprocesseur, la variable $mobile-breakpoint peut être utilisée dans la requête multimédia, permettant le comportement de style souhaité en fonction du défini variable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!