Font-size in px and in rem: Why add both to the same element?

Question

body,
button,
input,
select,
textarea {
  color: #404040;
  font-family: sans-serif;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5; }

What does that mean and how does it work?

Answer 1

px here is a fallback for browsers which do not support the rem unit (IE8 is a notable example).

Check out the rem Can I Use... feature for browser support.

Any browser which does not support the rem unit will instead rely on the px unit, preventing the browser from defaulting the font size to whatever it pleases.

Answer 2

font-sizein pixels will be the the falback for rem when browsers won't support it.

In this case will be IE8, or IE9/10, if using font shorthand property