General Fallback Strategy in CSS for IE11 and modern web browsers

When developing web-based applications I often have to support the IE11 due to company requirements. CSS in particular causes massive problems, for example when conflicting values have to be assigned. While modern browsers often support the standard cleanly, IE11 sometimes needs completely different assignments to produce the same result.

A classic solution is to assign multiple different values to the same CSS property. For example:

Typical assignment of fallback values for Internet Explorer 11.

However, this is only necessary if the IE11 does not support the later assigned values and thus uses one of the previous values as a fallback.

But what if we want to assign certain values only to the IE11, because the IE11 interprets the assigned and supported values differently than the modern web browsers, thus producing an unexpected result? Then we can use the CSS Custom Properties or CSS Custom Property Values as a generic solution, because the IE11 does not support the var keyword and falls back to previous assigned values.

Using the keyword var prevents the Internet Explorer 11 from using a value.

The IE11 supports and would use the value auto, but should explicitly use the value 1em, while modern web browsers should use the value auto. Because the second assignment with the var keyword is invalid for the IE11, it uses the previously assigned value 1em.

Tada. Problem solved, in a generic way that can be used in many different use cases.