Les variables CSS natives ne fonctionnent pas dans les requêtes média

J’essaie d’utiliser des variables CSS dans la requête multimédia et cela ne fonctionne pas.

:root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { } 

De la spec ,

La fonction var() peut être utilisée à la place de toute 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 des valeurs de propriété. (Cela produit généralement une syntaxe invalide, ou bien une valeur dont la signification n’a aucun lien avec la variable.)

Donc non, vous ne pouvez pas l’utiliser dans une requête média.

Et cela a du sens. Parce que vous pouvez définir --mobile-breakpoint par exemple, sur :root , c’est-à-dire l’élément et de là, hériter d’autres éléments. Mais une requête média n’est pas un élément, elle n’hérite pas de , elle ne peut donc pas fonctionner.

Ce n’est pas ce que les variables CSS tentent d’accomplir. Vous pouvez utiliser un préprocesseur CSS à la place.

Comme Oriol a répondu , actuellement, var() , les variables CSS de niveau 1 ne peuvent pas être utilisées dans les requêtes multimédias . Cependant, des développements récents ont permis de résoudre ce problème. Dans quelques années, une fois que le module 1 des variables d’environnement CSS aura été normalisé et implémenté, nous pourrons utiliser les variables env() dans les requêtes multimédias.

Si vous lisez la spécification et que vous avez un problème, ou si vous souhaitez exprimer votre soutien pour le cas d’utilisation media-query, vous pouvez toujours le faire dans GitHub w3c / csswg-drafts # 1693 ou dans tout problème CSS GitHub précédé de [[ css-env-1] ” .


Réponse originale 2017-11-09 : Récemment, le groupe de travail CSS a décidé que les variables CSS de niveau 2 prendraient en charge les variables d’environnement définies par l’utilisateur à l’aide de env() , et elles essaieront de les valider dans les requêtes multimédias . Le groupe a résolu ce problème après que Apple ait proposé pour la première fois les propriétés standard des agents utilisateurs , peu avant l’annonce officielle de l’iPhone X en septembre 2017 (voir également WebKit: «Conception de sites Web pour iPhone X» par Timothy Horton ). D’autres représentants de navigateurs ont alors convenu qu’ils seraient généralement utiles sur de nombreux périphériques, tels que les écrans de télévision et l’impression d’encre avec des bords perdus. ( env() s’appelait constant() , mais elle est maintenant obsolète. On peut encore voir des articles faisant référence à l’ancien nom, comme cet article de Peter-Paul Koch .) Après quelques semaines, Cameron McCormack de Mozilla s’est rendu compte que ces variables d’environnement seraient utilisables dans les requêtes médias, et Tab Atkins, Jr. de Google s’est alors rendu compte que les variables d’environnement définies par l’utilisateur seraient particulièrement utiles en tant que variables racines globales non remplaçables utilisables dans les requêtes multimédias. Maintenant, Dean “Dino” Jackson d’Apple rejoindra Atkins dans l’édition de niveau 2.

Vous pouvez vous abonner aux mises à jour à ce sujet dans le numéro 1693 de w3c/csswg-drafts . (Pour des détails historiques particulièrement pertinents, développez les journaux de réunion incorporés dans les résolutions du fichier CSSWG Meeting Bot et recherchez «MQ», qui signifie «requêtes multimédia».)

Je prévois de mettre à jour cette question à l’avenir lorsque d’autres développements se produiront. L’avenir est passionnant.


Mise à jour 2018-02-08 : Safari Technology Preview 49 prend en charge l’parsing syntaxique de calc() dans les requêtes multimédias, ce qui peut être un prélude à la prise en charge de env() également.


Mise à jour 2018-04-27 : L’équipe Chromium de Google a décidé de commencer à travailler sur env() . En réponse, Atkins a commencé à spécifier env() dans un projet de norme distinct et non officiel: le module de variables d’environnement CSS de niveau 1 . (Voir son commentaire GitHub dans w3c / csswg-drafts # 1693 et son commentaire dans w3c / csswg-drafts # 1817. ) Le brouillon appelle les variables dans les requêtes multimédias comme un cas d’utilisation explicite:

Comme les variables d’environnement ne dépendent pas de la valeur de tout élément tiré d’un élément particulier, elles peuvent être utilisées dans des endroits où il n’y a pas d’élément évident à extraire, comme dans les règles @media , où la fonction var() ne serait pas valide.

Si vous lisez la spécification et que vous avez un problème, ou si vous souhaitez exprimer votre soutien pour le cas d’utilisation media-query, vous pouvez toujours le faire dans GitHub w3c / csswg-drafts # 1693 ou dans tout problème CSS GitHub précédé de [[ css-env-1] ” .

Un moyen de réaliser ce que vous voulez consiste à utiliser les postcss-media-variables paquet npm.

Si vous êtes d’accord avec l’utilisation des paquets npm, vous pouvez consulter la documentation pour les mêmes ici

  • variables-media-postcss

Exemple

 /* input */ :root { --min-width: 1000px; --smallscreen: 480px; } @media (min-width: var(--min-width)) {} @media (max-width: calc(var(--min-width) - 1px)) {} @custom-media --small-device (max-width: var(--smallscreen)); @media (--small-device) {} 

Apparemment, il n’est tout simplement pas possible d’utiliser des variables CSS natives comme ça. C’est l’une des limitations .

Une manière intelligente de l’utiliser est de changer vos variables dans la requête de média, pour avoir un impact sur tout votre style. Je recommande cet article .

 :root { --gutter: 4px; } section { margin: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 16px; } }