Pourquoi mes variables CSS ne fonctionnent-elles pas dans les requêtes multimédias ?

Problème : les variables CSS ne fonctionnent pas dans les requêtes multimédias

Lorsque vous tentez d'incorporer des variables CSS dans les requêtes multimédias, elles restent inefficaces. Le code suivant sert d'exemple :

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

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

}

Explication :

Selon la spécification CSS :

"La fonction var() peut être utilisé à la place de n'importe quelle partie d'une valeur dans n'importe quelle propriété d'un élément. La fonction var() ne peut pas être utilisée comme nom de propriété, sélecteur ou autre chose que la propriété. valeurs."

En d'autres termes, même si des variables peuvent être incorporées dans les valeurs de propriété, elles restent incompatibles avec les requêtes multimédias. Cela est dû au fait que les requêtes multimédias ne sont pas des éléments HTML et ne peuvent donc pas hériter de l'élément racine où les variables sont généralement définies.

Alternatives :

Pour obtenir un résultat similaire fonctionnalité, les développeurs peuvent envisager d’utiliser un préprocesseur CSS. Les préprocesseurs étendent CSS en permettant l'écriture de code personnalisé, qui peut être utilisé pour créer des requêtes multimédias dynamiques basées sur des valeurs variables.

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!