Using a CSS attribute twice in the same class decleration

Question

I have read Defining CSS properties twice but it does cover the code I am looking at.

I understand now what vmin is doing, but I do not understand how this code is working. When will the button be of height 200px, and when will be be the value obtained from vmin. What exactly does declaring an attribute twice mean?

  .centerButton {
    height: 200px;
    width: 200px;
    height: 50vmin;
    width: 50vmin;
}

Thanks

I am looking at the source code from https://airhorner.com/ for reference.

Answer 1

When you write code like this the pixel value will be the fallback value for old browser.

E.g. Edge 16 will interpret the statement as:

.centerButton {
    height: 50vmin;
    width: 50vmin;
}

but Internet Explorer 9 will style in pixel units (IE9 use vm-units insted of vmin):

.centerButton {
    height: 200px;
    width: 200px;
}

When you accidentally reverse the order, the pixel-value overrides the vmin:

.centerButton {
    height: 50vmin;
    width: 50vmin;
    /* this replaces previous values */
    height: 200px;
    width: 200px;
}