Same properties in one class

Question

Is there any disadvantage in this example?

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

I want to do this because if vh is not supported in some browser, that browser will apply max-height: 500px; and ignore the line of vh.

Answer 1

This is absolutely fine. They are cascading, 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 to choose. So why shouldn't this be allowed in the same class? I can see no disadvantages, except for the extra line of code, but if you have to support old browsers, you need a fallback.

I'm assuming you know that 500px will not always be the same width/height as 50vw/vh, so yeah, a disadvantage would be, that it may looks different in older browsers. But from a syntactic view, there is nothing wrong.

Answer 2

I think there is a link which can help you. How to write css fallbacks for vh vw If browsers encounter a property or a value that they don't understand, they ignore it and move on.