CODEWITHSUNDEEP
cssfont-size
9Algorithm
9Algorithm

Reputation: 1257

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

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?

Upvotes: 3

Views: 436

Answers (4)

Drew Major
Drew Major

Reputation: 519

As others have said, this is a fallback.

It's also important to note order is important, and if the two declarations were reversed, it would serve no purpose.

The css declaration sets a font size of 16px, then attempts to override that with 1 rem. If the browser does not support rem, that override will not happen.

Upvotes: 2

De-Coder
De-Coder

Reputation: 21

When one of unit doesn't work it will use the one which will be default...but if you write as you have written in code and both is allowed it will select the one which is been latest according to rule of Specificity in CSS.

Upvotes: 1

dippas
dippas

Reputation: 60553

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

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

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.

Upvotes: 4

Related Questions