General Fallback Strategy in CSS for IE11 and modern web browsers

Mark Lubkowitz
Mar 27, 2019 · 2 min read

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:

Image for post
Image for post
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.

Image for post
Image for post
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store