web-dev-qa-db-ja.com

メディアクエリで動作しないCSSネイティブ変数

メディアクエリでCSS変数を使用しようとしていますが、動作しません。

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

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

}
cssmedia-queriescss-variables
82
user7122183

spec から、

var()関数は、要素のプロパティの値の任意の部分の代わりに使用できます。 var()関数は、プロパティ名、セレクター、またはプロパティ値以外のものとして使用できません。 （そうすると、通常、無効な構文、または変数に関係のない値が生成されます。）

いいえ、メディアクエリでは使用できません。

そして、それは理にかなっています。 --mobile-breakpointを設定できるため。 :root、つまり<html>要素に追加され、そこから他の要素に継承されます。しかし、メディアクエリは要素ではなく、<html>から継承しないため、機能しません。

これはCSS変数が達成しようとしていることではありません。代わりにCSSプリプロセッサを使用できます。

74
Oriol

オリオールが答えました 、現在、 CSS変数レベル1のvar()はメディアクエリでは使用できません として。ただし、この問題に対処する最近の開発があります。 数年後、一度 CSS環境変数モジュールレベル1 が標準化および実装されると、最新のすべてのブラウザーのメディアクエリでenv()変数を使用できるようになります。

specification を読んで懸念がある場合、またはメディアクエリの使用例についてサポートを表明したい場合は、 GitHub w3c/csswg-drafts＃ 169 またはin 「[css-env-1]」で始まるCSS GitHubの問題） 。

元の回答2017-11-09：最近、 CSSワーキンググループが決定 that CSS変数Level 2は、env()を使用してユーザー定義の環境変数をサポートし、メディアクエリで有効にしようとします。グループはこれを解決しました Apple最初に提案された標準ユーザーエージェントプロパティの後 、2017年9月のiPhone Xの公式発表の少し前（ WebKit：“ Designing Websites Timothy HortonによるiPhone Xの場合 ）。他のブラウザの代表者は、テレビディスプレイやにじみのあるインク印刷など、多くのデバイスで一般に役立つことに同意しました。 （env()はかつてconstant()と呼ばれていましたが、現在では廃止されています。 Peter-Paul Kochによるこの記事 など、古い名前を参照する記事がまだ表示される場合があります。） MozillaのCameron McCormackが認識した これらの環境変数はメディアクエリで使用できること、そして Tab Atkins、Jr. of Jr.その後認識しました ユーザー定義の環境変数が特に有用であることメディアクエリで使用できるグローバルな、オーバーライドできないルート変数として。さて、 Appleのディーン“ディノ”ジャクソンがアトキンスに加わります 編集レベル2。

w3c/csswg-drafts GitHub issue＃1693 でこの問題の更新を購読できます。 （特に関連する履歴の詳細については、 CSSWG Meeting Botの解像度 に埋め込まれた会議ログを展開し、「メディアクエリ」を表す「MQ」を検索してください。）

今後さらに開発が行われるときに、この質問を更新する予定です。未来は刺激的です。

更新2018-02-08： Safari Technology Preview 49 は、メディアクエリでのcalc()の解析のサポートを追加しました。それらでenv()もサポートする前奏曲。

更新2018-04-27：GoogleのChromiumチームは、env()の作業を開始することを決定しました。これに対応して、アトキンスはenv()を別の非公式ドラフト標準で指定し始めました：CSS Environment Variables Module Level 1 （ w3c/csswg-drafts＃1693のGitHubコメント および w3c/csswg-drafts＃1817のコメント を参照してください。）ドラフトは、メディアクエリの変数を明示的なユースケース：

環境変数は特定の要素から引き出されるものの値に依存しないため、@mediaルールなど、var()関数がそうしないような、引き出される明らかな要素がない場所で使用できます。有効である.

仕様を読んで懸念がある場合、またはメディアクエリの使用例についてサポートを表明したい場合は、 GitHub w3c/csswg-drafts＃169 または-で行うことができます。 「[css-env-1]」で始まるCSS GitHubの問題 。

更新2019-07-06：仕様の作業は継続されます。 GitHub issue＃2627 は、カスタム環境変数専用です。

44
jschoi

ただし、できることは@mediaが：rootステートメントをクエリすることです！

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

この投稿の時点で、少なくとも最新の製品バージョンでChrome、Firefox、およびEdgeで完全に動作しています。

9
Sean

目的を達成する1つの方法は、npmパッケージpostcss-media-variablesを使用することです。

Npmパッケージの使用に問題がない場合は、ここで同じドキュメントを確認できます。

例

/* 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) {}
6
pradeep1991singh

どうやらそのようなネイティブのCSS変数を使用することは不可能です。 limitations のいずれかです。

それを使用する賢い方法は、メディアクエリの変数を変更して、すべてのスタイルに影響を与えることです。 この記事 をお勧めします。

:root {
  --Gutter: 4px;
}

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

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

他の答えを読むことができるので、まだできませんしてください。

誰かがカスタム環境変数（カスタムCSS変数に似ていますenv()の代わりにvar()）、そして原則は健全ですが、2つの大きな問題があります：

  • 弱いブラウザのサポート
  • これまでのところ、それらを定義する方法はありません（ただし、これはこれまでのところ非公式のドラフトにすぎないため、おそらく将来的にはそうなるでしょう）
1
The Vojtisek