web-dev-qa-db-de.com

Native CSS-Variablen funktionieren nicht in Medienabfragen

Ich versuche, CSS-Variablen in der Medienabfrage zu verwenden, und es funktioniert nicht.

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

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

}
63
user7122183

Aus der Spezifikation ,

Die Funktion var() kann anstelle eines beliebigen Teils eines Werts in .__ verwendet werden. jede Eigenschaft eines Elements. Die Funktion var() kann nicht als .__ verwendet werden. Eigenschaftsnamen, Selektoren oder irgendetwas anderes als Eigenschaftswerte . (Dies führt in der Regel zu einer ungültigen Syntax oder zu einem Wert, dessen Bedeutung Keine Verbindung zur Variablen hat.)

Nein, Sie können es nicht in einer Medienabfrage verwenden.

Und das macht Sinn. Weil Sie --mobile-breakpoint einstellen können, z. an :root, das heißt das <html>-Element, und von dort an andere Elemente vererbt werden. Eine Medienabfrage ist jedoch kein Element, sie erbt nicht von <html> und kann daher nicht funktionieren.

CSS-Variablen versuchen dies nicht zu erreichen. Sie können stattdessen einen CSS-Präprozessor verwenden.

55
Oriol

Da Oriol beantwortet hat, können die var() von CSS-Variablen der Stufe 1 derzeit nicht in Medienabfragen verwendet werden. Es gab jedoch jüngste Entwicklungen, die sich mit diesem Problem befassen. In ein paar Jahren, wenn das CSS-Umgebungsvariablen-Modul Level 1 standardisiert und implementiert ist, werden wir in der Lage sein, env()-Variablen in Medienabfragen zu verwenden moderne Browser.

Wenn Sie die Spezifikation gelesen haben und Bedenken haben oder Ihre Unterstützung für den Anwendungsfall der Medienabfrage aussprechen möchten, können Sie dies dennoch in GitHub w3c/tun. csswg-drafts # 1693 oder in jedem CSS-GitHub-Problem mit dem Präfix "[css-env-1]" .


Ursprüngliche Antwort 09.11.2017 : Vor kurzem hat die CSS-Arbeitsgruppe entschieden , dass CSS-Variablen Level 2 unterstützt benutzerdefinierte Umgebungsvariablen mit env() und versucht, sie in Medienabfragen gültig zu machen . Die Gruppe hat dieses Problem behoben , nachdem Apple kurz vor der offiziellen Ankündigung des iPhone X im September 2017 erstmals Standardeigenschaften für Benutzeragenten vorgeschlagen hatte (siehe auch WebKit : "Designing Websites for iPhone X" von Timothy Horton ). Andere Vertreter des Browsers waren sich dann einig, dass sie für viele Geräte allgemein nützlich sind, z. (Früher hieß env()constant(), aber das ist mittlerweile veraltet. Möglicherweise werden noch Artikel angezeigt, die auf den alten Namen verweisen, z. B. dieser Artikel von Peter-Paul Koch .) Nach einigen Wochen vergingen, Cameron McCormack von Mozilla erkannte , dass diese Umgebungsvariablen in Medienabfragen verwendet werden können, und Tab Atkins, Jr. von Google erkannte , dass Benutzerdefinierte Umgebungsvariablen wären besonders nützlich als globale, nicht überschreibbare Stammvariablen, die in Medienabfragen verwendet werden können. Jetzt wird Dean "Dino" Jackson von Apple mit Atkins Level 2 bearbeiten.

Sie können Updates zu diesem Thema in w3c/csswg-drafts GitHub-Ausgabe 1693 abonnieren. (Erweitern Sie für besonders relevante historische Details die in den CSSWG Meeting Bot-Auflösungen eingebetteten Besprechungsprotokolle und suchen Sie nach "MQ", was für "Medienabfragen" steht.)

Ich plane, diese Frage in Zukunft zu aktualisieren, wenn weitere Entwicklungen auftreten. Die Zukunft ist aufregend.


Update 08.02.2018 : Safari Technology Preview 49 unterstützt jetzt das Parsen von calc() in Medienabfragen, die kann auch ein Auftakt sein, um env() in ihnen zu unterstützen.


Update 27.04.2018 : Das Chromium-Team von Google hat beschlossen, an env() zu arbeiten. Als Reaktion darauf hat Atkins begonnen, env() in einem separaten, inoffiziellen Standardentwurf zu spezifizieren: dem CSS-Umgebungsvariablen-Modul Level 1. (Siehe seinen GitHub-Kommentar in w3c/csswg-drafts # 1693 und seinen Kommentar in w3c/csswg-drafts # 1817 .) Der Entwurf wird aufgerufen Variablen in Medienabfragen als expliziter Anwendungsfall:

Da Umgebungsvariablen nicht vom Wert eines bestimmten Elements abhängen, können sie an Stellen verwendet werden, an denen es kein naheliegendes Element gibt, von dem aus gezeichnet werden kann, z. B. in @media - Regeln, an denen die Funktion var() ausgeführt wird nicht gültig sein.

Wenn Sie die Spezifikation lesen und Bedenken haben oder Ihre Unterstützung für den Anwendungsfall der Medienabfrage aussprechen möchten, können Sie dies dennoch in GitHub w3c/csswg-drafts # 1693 tun. oder in jedem CSS GitHub-Problem mit dem Präfix "[css-env-1]" .


Update 06.07.2019 : Die Arbeiten an den Spezifikationen werden fortgesetzt. GitHub-Ausgabe Nr. 2627 widmet sich benutzerdefinierten Umgebungsvariablen.

44
jschoi

Eine Möglichkeit, das zu erreichen, was Sie möchten, ist das npm-Paket postcss-media-variables.

Wenn Sie mit npm-Paketen zufrieden sind, können Sie hier nachsehen

Beispiel

/* 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

Was Sie jedoch tun können, ist @media fragt Ihre: root-Anweisung ab!

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

Funktioniert in Chrome, Firefox und Edge mindestens die neuesten Produktionsversionen ab diesem Beitrag.

2
Sean

Anscheinend ist es nicht möglich, native CSS-Variablen wie diese zu verwenden. Es ist eine der Einschränkungen .

Eine clevere Methode besteht darin, Ihre Variablen in der Medienabfrage zu ändern, um Ihren gesamten Stil zu beeinflussen. Ich empfehle diesen Artikel .

:root {
  --Gutter: 4px;
}

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

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

Wie Sie andere Antworten lesen können, ist nicht möglich dies zu tun. 

Jemand erwähnte benutzerdefinierte Umgebungsvariablen (ähnlich den benutzerdefinierten CSS-Variablenenv()anstelle von var()), und das Prinzip ist solide, obwohl es noch zwei Hauptprobleme gibt:

  • schwache Browserunterstützung
  • bisher gibt es keine Möglichkeit, sie zu definieren (wird es aber wahrscheinlich in der Zukunft sein, da dies bislang nur ein inoffizieller Entwurf ist).
0
The Vojtisek