CSS: How to use vmin unit in IE9?

Question

I have this piece of code

.image.medium {
    width:10vmin;
    height:10vmin;
}

.image.small {
    width:6vmin;
    height:6vmin;
}

.image.medium.as_big {
    margin:5vmin;
}

.image.small.as_big {
    margin:7vmin;
}

AS you can se it contains those "vmin" units, which are not of use on IE9 because it uses "vm".

I don't have IE in my computer like to check, it's a linux computer anyway, so I don't know how I could make this css usable by both, IE9 and the other browsers.

Also I was thinking, should I use the javascript workaround instead? I just want vmin, according to http://caniuse.com/#feat=viewport-units it's not supported by so many browsers, and I would like to be able to zoom.

score 6 · Accepted Answer · edited May 23 '17 at 12:19

Generally, standard declarations should be placed after the non-standard/experimental features.

For instance, in this particular case it should be:

.image.medium {
    width: 10vm;   /* fallback for IE9 */
    width: 10vmin;

    height: 10vm;  /* fallback for IE9 */
    height: 10vmin;
}

The latter declaration is interpreted by modern web browsers supporting vmin. And the former declaration acts as a fallback to the latter one.

Cross Browser Solutions

There are also polyfills for viewport relative lengths, for instance:

vminpoly by Sebastian Ferreyra — A polyfill for CSS units vw, vh & vmin.
Prefixfree - Viewport Relative Units Plugin by Lea Verou — A polyfill for vw, vh, and vmin.
Viewport Units Buggyfill by Rodney Rehm — A polyfill for viewport vh, vw vmin, vmax for Mobile Safari.
Is there any cross-browser javascript for making vh and vw units work

I don't have enough points for vote up! so this would comment is my vote up! — Onza, Apr 01 '15 at 04:15

CSS: How to use vmin unit in IE9?

1 Answers1

Cross Browser Solutions