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)) {
}
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)) {
}
Réponses:
De la spécification ,
Donc non, vous ne pouvez pas l'utiliser dans une requête multimédia.
Et cela a du sens. Parce que vous pouvez définir
--mobile-breakpoint
par exemple à:root
, c'est-à-dire l'<html>
élément, et de là être hérité à d'autres éléments. Mais une requête multimédia n'est pas un élément, elle n'hérite pas<html>
, donc elle ne peut pas fonctionner.Ce n'est pas ce que les variables CSS essaient d'accomplir. Vous pouvez utiliser un préprocesseur CSS à la place.
la source
Comme Oriol a répondu , actuellement, les variables CSS de niveau 1 ne
var()
peuvent pas être utilisées dans les requêtes multimédias . Cependant, des développements récents permettront de résoudre ce problème. Dans quelques années, une fois que le module de variables d'environnement CSS niveau 1 sera standardisé et implémenté, nous pourrons utiliser desenv()
variables dans les requêtes multimédias dans tous les navigateurs modernes.Si vous lisez la spécification et avez un problème, ou si vous souhaitez exprimer votre soutien pour le cas d'utilisation de la requête multimédia, vous pouvez toujours le faire dans GitHub w3c / csswg-drafts # 1693 ou dans tout problème CSS GitHub préfixé par "[ css-env-1] » .
Réponse originale 09/11/2017 : Récemment, le groupe de travail CSS a décidé que les variables CSS de niveau 2 prendront en charge les variables d'environnement définies par l'utilisateur
env()
et essaieront de les rendre valides dans les requêtes multimédias . Le Groupe a résolu ce problème après qu'Apple ait proposé pour la première fois des propriétés d'agent utilisateur standard , peu de temps 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 appareils, tels que les écrans de télévision et l'impression à l'encre avec des bords perdus. (env()
anciennement appeléconstant()
, mais cela est désormais obsolète. Vous verrez peut-être encore 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édiatiques, 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 racine globales et non remplaçables utilisables dans les requêtes multimédias. Désormais, Dean «Dino» Jackson d'Apple se joindra à Atkins pour éditer le niveau 2.Vous pouvez vous abonner aux mises à jour sur ce sujet dans le
w3c/csswg-drafts
numéro 1693 de GitHub . (Pour des détails historiques particulièrement pertinents, développez les journaux de réunion intégrés dans les résolutions du CSSWG Meeting Bot et recherchez «MQ», qui signifie «requêtes médias».)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 a ajouté la prise en charge de l'analyse
calc()
dans les requêtes multimédias, ce qui peut être un prélude àenv()
leur prise en charge.Mise à jour 27/04/2018 : l'équipe Chromium de Google a décidé de commencer à travailler
env()
. En réponse, Atkins a commencé à spécifierenv()
dans un projet de norme séparé et non officiel: le module de variables d'environnement CSS 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 cas d'utilisation explicite:Si vous lisez la spécification et avez un problème, ou si vous souhaitez exprimer votre soutien pour le cas d'utilisation de la requête multimédia, vous pouvez toujours le faire dans GitHub w3c / csswg-drafts # 1693 ou dans tout problème CSS GitHub préfixé par "[ css-env-1] » .
Mise à jour 2019-07-06 : Le travail se poursuit sur les spécifications. Le numéro 2627 de GitHub et le numéro 3578 de GitHub sont consacrés aux variables d'environnement personnalisées dans les requêtes multimédias.
la source
Ce que vous POUVEZ faire cependant, c'est @media interroger votre instruction: root!
Fonctionne totalement dans Chrome, Firefox et Edge au moins les dernières versions de production à partir de cette publication.
la source
var
, afin de pouvoir l'utiliser dans des calculs ailleurs dans lecss
, cela nécessite toujours de mettre la "valeur magique" (ici, 479px) à deux endroits: la requête multimédia et une déclaration var.Apparemment, il n'est tout simplement pas possible d'utiliser des variables CSS natives comme ça. C'est l'une des limites .
Une manière intelligente 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 .
la source
Une façon d'obtenir ce que vous voulez est d'utiliser le package npm
postcss-media-variables
.Si vous êtes d'accord avec l'utilisation des packages npm, vous pouvez consulter la documentation pour la même chose ici
Exemple
la source
Comme vous pouvez lire d'autres réponses, il n'est toujours pas possible de le faire.
Quelqu'un a mentionné des variables d'environnement personnalisées (similaires aux variables css personnalisées
env()
au lieu devar()
), et le principe est valable, bien qu'il y ait encore 2 problèmes majeurs:la source
Réponse courte
Vous pouvez utiliser JavaScript pour modifier la valeur des requêtes multimédias et la définir sur la valeur d'une variable css.
Longue réponse
J'ai écrit un petit script que vous pouvez inclure sur votre page. Il remplace chaque règle de média par une valeur de
1px
par la valeur de la variable css--replace-media-1px
, les règles par une valeur2px
par--replace-media-2px
et ainsi de suite. Cela fonctionne pour les requêtes des médiaswith
,min-width
,max-width
,height
,min-height
etmax-height
même quand ils sont connectés à l' aideand
.JavaScript:
CSS:
la source