Same properties in one class

Question

Is there a flaw in this example?

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

I want to do this because if it is vhnot supported in any browser, this browser will apply max-height: 500px;and ignore the line vh.

Answer 1

This is absolutely normal. They cascade, so the last (supported) style with the same level of importance always wins. It is a common case to override some CSS rules with another class, so the browser has multiple instances of the same property. So why can't this be allowed in the same class? I see no flaws except an extra line of code, but if you need to support older browsers, you need a reserve.

, , 500px /, 50vw/vh, , , -. .

Answer 2

, , . css vh vw , , .

Answer 3

, , vh vw.

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

, Modernizr , .

. px vh.

Answer 4

,

vh ( css), . vh (93.19%):

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

,

Answer 5

Yes. There is a flaw. 50vh depends on the viewport of the device and its equal to 50% of the viewing window, where, since the value of 500 pixels is equal to the pixel of the device, both are not equal at the same time.

secondly, if the browser supports both the latter and 50vh.

I hope you understand my point. For any request, please comment. All the best.