css - vh vw の CSS フォールバックの書き方

Question

CSS でフォ​​ールバックがどのように機能するかを説明できる人はいますか? vh と vw 用にセットアップしようとしていますが、明らかにうまくいきません...

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

CSS:

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

Answer 1

あなたのコード (そしてそれが機能しない理由)

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

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

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

(ヒント: MDNなどをチェックして、存在するプロパティを確認できます。)

解決：

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

height: 41px;
height: 5.2vh;

期待どおり、ブラウザには が表示height: 41pxされます。それを解析し、それをどうするかを知っています。すると、見えheight: 5.2vhます。ブラウザーがvh単位を認識している場合、41px の代わりにそれを使用しますcolor: blue; color: red;。ユニットが理解できない場合vh、それは無視されます。最初にフォールバックを定義したため、ブラウザーがvhユニットを無視するという事実は問題になりません。

わかる？

Answer 2

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

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

Answer 3

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

（ChromeまたはSafariでは）まったく認識されていないheight: 41pxため、勝利の価値を獲得していますが、認識されています.-webkit-heightheight: 41px

これを使用したいと思うでしょう：

height: 41px;    
height: 5.2vh;

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