CSSのネイティブ変数がメディアクエリで機能しない

メディアクエリでCSS変数を使用しようとしていますが、動作しません。CSSのネイティブ変数がメディアクエリで機能しない

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

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

}

出典

2016-11-21 Anonymous

複数のブラウザで試しましたか？（ChromeとFirefoxのように） – Cohars

はい最新のChromeを使用しています –

どのようなCSSプリプロセッサを使用しますか？あなたは何を達成しようとしていますか？ –

、

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

ありませんので、あなたはメディアクエリでそれを使用することはできません。

これは意味があります。 --mobile-breakpointなどを設定することができます。 :root、つまり<html>の要素になり、そこから他の要素に継承されます。しかし、メディアクエリは要素ではなく、<html>から継承されないため、動作しません。

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

出典

2016-11-21 15:07:07 Oriol

明らかに、ネイティブCSS変数を使用することはできません。これはlimitationsの1つです。

賢明な使い方は、メディアクエリの変数を変更して、すべてのスタイルに影響を与えることです。私はthis articleをお勧めします。

specから

:root { 
    --gutter: 4px; 
} 

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

@media (min-width: 600px) { 
    :root { 
    --gutter: 16px; 
    } 
}

出典

2016-11-21 14:57:43 Cohars

私は、 "メディアのクエリであなたの変数を変更する"の意味を理解する、あなたは例を示すことができますか？ –

これは私が意味するものではありません。私は、メディアのクエリ値について尋ねました。 –

はい、ちょうど、それは私がリンクした記事にあります。私はそれがあなたが期待したものではないことを知っていますが、CSS変数**はメディアクエリを定義するために使用することはできません** – Cohars

希望するものを達成する方法の1つは、npmパッケージpostcss-media-variablesを使用しています。

あなたはNPMパッケージを使用して罰金している場合、あなたはここで他の人のよう

postcss-media-variables

例

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

出典

2016-11-21 15:09:43 pradeep1991singh

ありがとう、しかし私はプリプロセッサを使わないようにしていました。 –

を同じのためのルックdocumentatoinを取ることができ、CSS Variables Level 1’s var() cannot be used in media queriesに答えています。しかしながら、この問題に対処する最近の開発があった。 数年後、CSS変数レベル2を標準化して実装すると、env()変数をメディアクエリに使用できるようになります。

は最近、CSSワーキンググループは、CSS変数のレベル2はenv()を使用して、ユーザー定義の環境変数をサポートすることを決めた、と彼らは彼らがを照会メディアで有効で作るしようとします。当グループは、2017年9月のiPhone Xの公式発表の直前にAppleが最初に標準のユーザーエージェントのプロパティを提案した後でこれを解決した（WebKit: “Designing Websites for iPhone X” by Timothy Hortonも参照）。他のブラウザの代表者は、TVディスプレイやブリードエッジのインク印刷など、多くのデバイスで一般的に有用であることに同意しました。（env()はconstant()と呼ばれていましたが、現在は廃止予定です.など、古い名前を参照する記事が引き続き表示されることがあります。）数週間後、MozillaのCameron McCormackは、これらの環境変数がメディアクエリで使用可能であることに気づき、GoogleのTab Atkins、Jr.は、ユーザー定義の環境変数が、グローバルなオーバーライド不可能なルート変数メディアクエリで使用できます。今、AppleのDean "Dino" JacksonがAtkinsに参加してレベル2を編集します。

w3c/csswg-drafts GitHub issue #1693でこの問題に関するアップデートを購読することができます。（特に関連する履歴の詳細については、埋め込みIRCログも展開し、すべてのメッセージで「MQ」=「メディアクエリ」を検索してください。）

将来的にこの問題を更新する予定です。未来は刺激的です。

更新2018-02-08：Safari Technology Preview 49は、メディアクエリでcalc()を解析するサポートを追加しました。このクエリは、env()をサポートするための序論でもあります。

出典

2017-11-09 22:51:40 user644104

CSSのネイティブ変数がメディアクエリで機能しない

答えて

関連する問題