CODEWITHSUNDEEP
css
user2970115
user2970115

Reputation: 483

Same properties in one class

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.

Upvotes: 5

Views: 199

Answers (5)

Matthias Seifert
Matthias Seifert

Reputation: 2083

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.

Upvotes: 3

bhansa
bhansa

Reputation: 7534

It's okay to provide a fallback for browsers that doesn't support vh or vw.

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

There is nothing wrong in it, if Modernizr have this check already use it to check for unsupported browsers.

The metrics which you are using depends upon your window and object size. Consider both while using px and vh at the same time.

Upvotes: 3

Nishant Singh
Nishant Singh

Reputation: 511

Yes. There is a disadvantage. 50vh depend on viewport of the device and its equal to the 50% of viewport where as the 500px is the pixel value of device both are not equal at the same time.

secondly, if the browser support both the last one is executed i.e. 50vh.

I hope you get my point. For any query please comment. All the best.

Upvotes: 1

All about JS
All about JS

Reputation: 562

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.

Upvotes: 3

Dessauges Antoine
Dessauges Antoine

Reputation: 593

No,

The vh will have priority (cause it's the last max-height in your css file) but only if it's supported in the current browser. But vh is supported in a lot of browser (93.19%) :

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

So for me it's okay and I never hear about a bad use of multiple same properties in one class

Upvotes: 2

Related Questions