同时具有多个值（px和rem）的CSS元素

Question

I have some CSS code in which many elements are having multiple values to a single css attribute.

For example, below CSS will produce a button like shown below.

CSS

.btn-gold {
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-size: 2rem;
    line-height: 22px;
    line-height: 2.2rem;
    color: #222;
    padding: 8px 0;
    padding: 0.8rem 0;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: rgb(254,196,26);
    background: -moz-linear-gradient(top, rgb(254,196,26) 0%, rgb(255,170,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,196,26)), color-stop(100%,rgb(255,170,0)));
    background: -webkit-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: -o-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: -ms-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: linear-gradient(to bottom, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
}

Result

Now I am not understanding what's the purpose of giving multiple values to a single attribute; see font-size , line-height and padding are given two values??

font-size: 20px;
font-size: 2rem;
line-height: 22px;
line-height: 2.2rem; 
padding: 8px 0;
padding: 0.8rem 0;

Is this a valid CSS and how many combination of values are allow to a single attribute.

Answer 1

It's to give a fallback to older browsers.

A modern browser will first apply "22px" line-height, then overwrite this with a "2.2rem" line-height. An old browser will apply "22px", then won't understand "2.2rem" and won't use it.

This is often use with rem values, or background for linear-gradient, for example.

PS: note that you don't need prefixes for box-shadow or border-radius anymore. ;)

Answer 2

Px is Absolute Length (cm, mm, in, pt, pc, px) And

Rem is font-relative Length (em, ex, ch, rem)

Either px or rem will run on browser open inspect Element in chrome and see only one value accept another reject with dash line