1つのクラスの同じプロパティ

Question

この例には何らかの欠点がありますか？

.class { 
    max-height: 500px; 
    max-height: 50vh; 
} 

私はvhは、いくつかのブラウザでサポートされていない場合、そのブラウザがmax-height: 500px;を適用し、vhの行を無視しますので、これをやりたいです。

Answer 1

これは絶対に問題ありません。これらはカスケードしているので、同じレベルの重要度を持つ最後の（サポートされている）スタイルが常に勝ちます。いくつかのCSSルールを別のクラスで上書きするのが一般的なケースです。そのため、ブラウザは同じプロパティのインスタンスを複数選択できます。それで、なぜ同じクラスでこれを許可してはいけないのですか？コードの余分な行を除いて、私は不利な点は見受けられませんが、古いブラウザをサポートしなければならない場合は、フォールバックが必要です。

私は、500pxが常に50vw/vhと同じ幅/高さになるとは限らないことを知っていると仮定しているので、古いブラウザでは異なるように見えるという欠点があります。しかし、統語的な観点からは、何も間違っていません。

Answer 2

いいえ、

VHが優先されます（それはあなたのCSSファイル内の最後の最大の高さです原因）それは、現在のブラウザでサポートされていた場合にのみ。 しかし、VHは、ブラウザ（93.19パーセント）の多くでサポートされています。

https://caniuse.com/#search=vh

だから私は考えて私のためにそれは大丈夫だと私は一つのクラスで複数の同じ性質の悪い使用

Answer 3

聞いたことがありませんあなたを助けることができるリンクがあります。 How to write css fallbacks for vh vw ブラウザが理解できないプロパティまたは値に遭遇すると、ブラウザはそれを無視して移動します。

Answer 4

はい。欠点があります。 50vhはデバイスのビューポートに依存し、その500pxはデバイスのピクセル値であるため、ビューポートの50％に等しくなります。両方が同時に同じではありません。

2番目に、ブラウザが両方とも最後のもの、つまり50vhをサポートしている場合。

私はあなたが私の要点を得ることを願っています。どんな質問でも、コメントしてください。ではごきげんよう。

Answer 5

それはvhまたはvwをサポートしていないブラウザのためにフォールバックを提供するために、大丈夫です。

h1 { 
    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
    font-size: 5.4vw; 
} 

Modernizrこのチェックはすでにサポートされていないブラウザを確認するためにそれを使用している場合は何の問題も、それではありません。

使用しているメトリックは、ウィンドウおよびオブジェクトサイズに依存します。 pxとvhを同時に使用している間は両方を考慮してください。