web-dev-qa-db-fra.com

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

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

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

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

}
cssmedia-queriescss-variables
63
user7122183

De la spec ,

La fonction var() peut être utilisée à la place de n’importe quelle partie d’une valeur dans toute propriété sur un élément. La fonction var() ne peut pas être utilisée en tant que noms de propriété, sélecteurs ou autre chose que les valeurs de propriété . (Cela produit généralement une syntaxe non valide ou une valeur dont le sens 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 ex. à :root, c'est-à-dire l'élément <html>, et à partir 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 de <html> et 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.

55
Oriol

Comme Oriol a répondu }, à l’heure actuelle, la fonction var() des variables CSS de niveau 1 ne peut pas être utilisée dans les requêtes multimédia . Cependant, des développements récents ont permis de résoudre ce problème. Dans quelques années, une fois que module de variables d'environnement CSS niveau 1 sera normalisé et mis en œuvre, nous pourrons utiliser les variables env() dans les requêtes multimédia de tous les navigateurs modernes.

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 de la requête multimédia, vous pouvez le faire dans GitHub w3c/csswg-drafts # 1693 ou dans tout problème CSS GitHub préfixé par «[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 prendront en charge les variables d'environnement définies par l'utilisateur à l'aide de env(), et essaieront de faites-les être valides dans les requêtes média. Le Groupe a résolu ce problème { après que Apple ait proposé les propriétés d'agent utilisateur standard standard }, peu avant l'annonce officielle de l'iPhone X en septembre 2017 (voir aussi WebKit: "Conception de sites Web pour iPhone X" de 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 à l'encre avec bords perdus. (env() s'appelait constant(), mais il est maintenant obsolète. Vous pouvez toujours voir des articles faisant référence à l'ancien nom, tels que 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 multimédia 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 global variables racine non remplaçables utilisables dans les requêtes sur les médias. Maintenant, Dean «Dino» Jackson d’Apple rejoindra Atkins } en édition de niveau 2.

Vous pouvez vous abonner aux mises à jour sur ce sujet dans w3c/csswg-drafts numéro GitHub # 1693 . (Pour des détails historiques particulièrement pertinents, développez les journaux de réunion incorporés dans les résolutions du bot du réunion du CSSWG et cherchez "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 désormais en charge l'analyse de calc() dans les requêtes multimédia, ce qui peut être un prélude à la prise en charge de env() également.

Mise à jour 2018-04-27: L'équipe Google Chrome de 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: 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 des variables dans les requêtes multimédia comme une utilisation explicite Cas:

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 à des endroits où il n’existe aucun élément évident, 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 de requête multimédia, vous pouvez le faire dans GitHub w3c/csswg-drafts # 1693 ou dans tout numéro CSS GitHub préfixé par “[css-env-1]”) .

35
jschoi

Un moyen d’atteindre ce que vous voulez consiste à utiliser le package npm postcss-media-variables.

Si vous êtes d'accord avec l'utilisation des packages npm, vous pouvez consulter le même document 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) {}
4
pradeep1991singh

Ce que vous POUVEZ cependant faire, c’est @media interroger votre déclaration: racine!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

Totalement fonctionne dans Chrome, Firefox et Edge au moins les dernières versions de production à compter de cette publication.

2
Sean

Apparemment, il n’est tout simplement pas possible d’utiliser ce type de variables CSS natives. C'est l'une des limitations .

Une façon intelligente de l’utiliser est de modifier vos variables dans la requête multimédia afin d’affecter tout votre style. Je recommande cet article .

:root {
  --Gutter: 4px;
}

section {
  margin: var(--Gutter);
}

@media (min-width: 600px) {
  :root {
    --Gutter: 16px;
  }
}
1
Cohars

Comme vous pouvez lire d’autres réponses, toujours pas possible faire ainsi. 

Quelqu'un a mentionné des variables d'environnement personnalisées (similaires aux variables CSS personnaliséesenv()au lieu de var()), et le principe est valable, même s'il reste deux problèmes majeurs:

  • faible support du navigateur
  • jusqu'à présent, il n'y a aucun moyen de les définir (mais le sera probablement à l'avenir, car il s'agit d'un projet non officiel jusqu'à présent).
0
The Vojtisek