web-dev-qa-db-ja.com

vh vwのcssフォールバックの記述方法

誰かがCSSでフォールバックがどのように機能するか説明できますか？私はそれをvhとvwに設定しようとしていますが、明らかに取得できません...

これが私の試みた解決策ですが、うまくいきません。高さプロパティは毎回取得されます。

CSS：

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
cssfallbackviewport-units
23
user3311351

あなたのコード（そしてなぜそれが機能しないのか）

元のコードを見て、いくつかコメントがあります。

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px;  /* The Fallback */

接頭辞-webkit-ビットは、ifの場合にのみ適用され、その名前の接頭辞付きのプロパティがあります。 Heightには接頭辞付きのプロパティがないため、ブラウザはそれらの宣言を無視します。

（ヒント： [〜＃〜] mdn [〜＃〜] のようなものをチェックして、存在するプロパティを確認できます。）

解決：

この場合、ブラウザが理解できないプロパティまたは値に遭遇した場合、それらを無視し、進め。だから、あなたが探しているのは次のようなものです：

height: 41px;
height: 5.2vh;

ブラウザは期待どおりheight: 41pxを認識します。それを解析し、それをどうするかを知っています。次に、height: 5.2vhを認識します。ブラウザがvhユニットを理解すると、color: blue; color: red;が赤くなるのと同じように、41pxの代わりにそれを使用します。 vhユニットを理解しない場合、それは無視されます。フォールバックを最初に定義したため、ブラウザがvhユニットを無視することは重要ではありません。

理にかなっていますか？

58
Hawken Rives

フォールバックを他の値よりも上に置きます。オーバーライドする値がブラウザーで機能しない場合は、最初の値が使用されます。

 height: 41px;  /* The Fallback */
height: 5.2vh;
15
ramesh

プロパティ-moz-height、-webkit-height、-o-height、および-ms-heightは有効な拡張プロパティではなく、どのUA実装でも定義されていません。

height: 41px（ChromeまたはSafari内））はまったく認識されていませんが、-webkit-heightは認識されているため、当選値としてheight: 41pxを取得しています。

あなたはこれを使いたいでしょう：

height: 41px;    
height: 5.2vh;

...このコードを使用すると、ブラウザは最初にheight: 41pxを認識し、次に適用されるheight: 52.vhを認識した場合、そうでなければ最後の「適切な」値41pxに戻ります。

6
Dai