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.

I would suggest you using [sass](http://sass-lang.com/) instead of css, there you can have conditions. Or maybe in css try something with @media. — Strahinja, Sep 22 '17 at 08:46

score 3 · Answer 1 · answered Sep 22 '17 at 08:50

3

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.

answered Sep 22 '17 at 08:50

All about JS

562
2
10

OP's concern is whether to use them or not, if yes why ? – bhansa Sep 22 '17 at 09:08

score 3 · Accepted Answer · edited Sep 22 '17 at 09:15

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.

bhansa · Answer 3 · 2017-09-22T09:06:34.657

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.

score 2 · Answer 4 · answered Sep 22 '17 at 08:48

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

score 1 · Answer 5 · answered Sep 22 '17 at 08:59

1

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.

answered Sep 22 '17 at 08:59

Nishant Singh

501
3
9
20

1

that exactly what i want to do, the line of px is use for when vh is not supported by some old browser. So I think this is not a disadvantage? – user2970115 Sep 22 '17 at 09:23

Same properties in one class

5 Answers5