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.

200px is the fallback value: old browsers without this feature implemented use this value, modern uses 50vmin. — Steven, Jan 12 '18 at 03:00
@Steven Thank you, I would add your comment as answered but it is only a comment. — memeKing, Jan 12 '18 at 03:03

Steven · Accepted Answer · 2018-01-12T03:23:42.497

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;
}

Using a CSS attribute twice in the same class decleration

1 Answers1