Duplicated font-size property

Question

Could you explain please, what this code mean

 h1{
    font-size: 36px !important;
    font-size: 3.6rem!important;
  }

Or this

body {
  background: $backgroundColor;
  font-size: 14px;
  font-size: 1.4rem;
}

Why is there duplicated font-size properties?

In older browsers rem values are not supported so px are for backward compatability. — Nithya Rajan, Feb 16 '19 at 07:15
This is a very standard CSS rule. If you write `font-size: 2rem` and compile it with `autoprefixer` plugin (https://www.npmjs.com/package/autoprefixer), this is what it gets compiled to. — Sudipto Roy, Feb 16 '19 at 07:28
The duplicated declaration are for fallback. Read more here https://modernweb.com/using-css-fallback-properties-for-better-cross-browser-compatibility/ — A. Meshu, Feb 16 '19 at 07:55
I don’t think those duplicate questions ask the same one this does fwiw. — , Feb 16 '19 at 08:29
@D_N No, they don't, they ask how to best deal with fallbacks, which this one asks about, hence I found the questions themselves answering this one, and by that be a reasonable dupe — Asons, Feb 16 '19 at 08:33
@LGSon if I am googling and do not know about fallbacks, this is what my Q is, not how to do it. So I disagree there. — , Feb 16 '19 at 08:34
@D_N The good part now is they are linked, so they back up each other being as related as two can, not being the exact same, which I find useful. And note, there are 2 answers here explaining why. — Asons, Feb 16 '19 at 08:38

score 1 · Accepted Answer · answered Feb 16 '19 at 08:22

Alright, here’s the full rundown.

rem is a unit that does not work or is significantly buggy in older browsers, notably IE. See the CanIUse entry.

CSS allows you to declare a rule multiple times, with the last one winning. This is often used to feed old or noncompliant browsers a fallback value which a newer or compliant browser will also read but will then overwrite with the last value given.

So:

.example {
  font-size: 12px;
  font-size: 1.1rem;
  background-color: blue;
  background-color: red;
}

Any browser will decide the background color is red (not blue), and any up-to-date browser will set the font size at 1.1rem. But a browser that does not understand what “rem” is will discard that rule and keep the prior one (12px).

A. Meshu · Answer 2 · 2019-02-16T08:19:58.777

The duplicated declarations use for fallback in order to support older browsers.

The !important declarations use to override rules and consider not a good practice.

As for your question regarding font-size units - the rem is not supported with legacy browsers.

MDN have very good explanation about HTML and CSS fallback behaviour: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

Hope that helps.

Duplicated font-size property

2 Answers2