J'essaie d'utiliser des variables CSS dans media query et cela ne fonctionne pas.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}Réponses
Trop de publicités?
De la spec ,
El
var()peut être utilisée à la place de toute partie d'une valeur dans n'importe quelle propriété d'un élément. L'adressevar()ne peuvent pas être utilisés comme comme noms de propriétés, sélecteurs, ou quoi que ce soit d'autre que des valeurs de propriétés. (Cela produit généralement une syntaxe invalide, ou une valeur dont le nom de la fonction 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 c'est logique. Parce que vous pouvez définir --mobile-breakpoint Par exemple, pour :root c'est-à-dire le <html> et, à partir de là, être transmis à d'autres éléments. Mais une requête média n'est pas un élément, elle n'hérite pas de <html> donc ça ne peut pas marcher.
Ce n'est pas ce que les variables CSS essaient d'accomplir. Vous pouvez utiliser un préprocesseur CSS à la place.
jschoi
Points
643
Como Oriol a répondu actuellement, Variables CSS Niveau 1's var() ne peut pas être utilisé dans les requêtes média . Toutefois, des développements récents permettront de résoudre ce problème. Dans quelques années, une fois Variables d'environnement CSS Module Niveau 1 est normalisée et mise en œuvre, nous serons en mesure d'utiliser env() dans les requêtes média dans tous les navigateurs modernes.
Si vous lisez le spécification et que vous avez un problème, ou si vous voulez exprimer votre soutien au cas d'utilisation de media-query, vous pouvez toujours le faire en GitHub w3c/csswg-drafts#1693 ou dans tout problème de CSS sur GitHub préfixé par "[css-env-1]". .
Réponse originale 2017-11-09 : Récemment, le Le groupe de travail CSS a décidé que Variables CSS Le niveau 2 prendra en charge les variables d'environnement définies par l'utilisateur à l'aide des éléments suivants env() et ils essaieront de les rendre valides dans les requêtes média. . Le Groupe a résolu ce problème après qu'Apple ait proposé pour la première fois des propriétés standard pour les agents utilisateurs , peu avant l'annonce officielle de l'iPhone X en septembre 2017 (voir aussi . WebKit : "Concevoir des sites web pour l'iPhone X" par Timothy Horton ). D'autres représentants de navigateurs ont ensuite convenu qu'ils seraient généralement utiles sur de nombreux appareils, tels que les écrans de télévision et les impressions à l'encre avec bords perdus. ( env() s'appelait autrefois constant() mais cette fonction est désormais obsolète. Vous pouvez encore voir des articles qui font référence à l'ancien nom, tels que cet article de Peter-Paul Koch .) Après quelques semaines, Cameron McCormack de Mozilla a réalisé que ces variables d'environnement seraient utilisables dans les requêtes média, et Tab Atkins, Jr. de Google a alors réalisé que les variables d'environnement définies par l'utilisateur seraient particulièrement utiles en tant que variables Root globales, non modifiables, utilisables dans les requêtes média. Maintenant, Dean "Dino" Jackson, d'Apple, rejoindra Atkins. dans l'édition du niveau 2.
Vous pouvez vous abonner aux mises à jour sur ce sujet dans w3c/csswg-drafts Problème GitHub #1693 . (Pour des détails historiques particulièrement pertinents, développez les journaux de réunion intégrés dans le site Web de l Réunion du CSSWG Résolutions de Bot et recherchez "MQ", qui signifie "media queries").
Je prévois de mettre à jour cette question à l'avenir, lorsque de nouveaux développements auront lieu. L'avenir est passionnant.
Mise à jour 2018-02-08 : Aperçu technologique de Safari 49 a ajouté un support pour l'analyse syntaxique calc() dans les requêtes média, ce qui peut être un prélude à la prise en charge de l'option env() en eux aussi.
Mise à jour 2018-04-27 : L'équipe de Chromium chez Google a décidé de commencer à travailler sur env() . En réponse, Atkins a commencé à spécifier env() dans un projet de norme séparé et non officiel : la Variables d'environnement CSS Module Niveau 1 . (Voir son commentaire GitHub dans w3c/csswg-drafts#1693 y son commentaire dans w3c/csswg-drafts#1817 .) Le projet fait des variables dans les requêtes média un cas d'utilisation explicite :
Comme les variables d'environnement ne dépendent pas de la valeur de ce qui est tiré d'un élément particulier, elles peuvent être utilisées dans des endroits où il n'y a pas d'élément évident à tirer, par exemple dans
@mediarègles, où levar()ne serait pas valide.
Si vous lisez la spécification et que vous avez une inquiétude, ou si vous voulez exprimer votre soutien au cas d'utilisation de media-query, vous pouvez toujours le faire en GitHub w3c/csswg-drafts#1693 ou dans tout problème de CSS sur GitHub préfixé par "[css-env-1]". .
Sean
Points
21
Ce que vous pouvez faire cependant, c'est @media query votre déclaration :Root !
:root {
/* desktop vars */
}
@media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}Cela fonctionne parfaitement dans Chrome, Firefox et Edge, du moins dans les dernières versions de production au moment de cette publication.
Cohars
Points
1986
Apparemment, il n'est pas possible d'utiliser des variables CSS natives de cette manière. C'est l'une des limitations .
Une façon astucieuse de l'utiliser est de changer vos variables dans la requête 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;
}
}
pradeep1991singh
Points
3614
Une façon d'obtenir ce que vous voulez est d'utiliser le paquet npm. postcss-media-variables .
Si l'utilisation des paquets npm vous convient, vous pouvez consulter la documentation correspondante ici.
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) {}- Réponses précédentes
- Plus de réponses
