Allgemeine Fallback-Strategie in CSS für den IE11 und moderne Webbrowser

An English version of this article can be found at Medium: General Fallback Strategy in CSS for IE11 and modern web browsers.

Bei der Entwicklung von webbasierten Anwendungen muss ich aufgrund von Anforderungen seitens der Unternehmen oft auch den IE11 vollständig unterstützen. Insbesondere CSS verursacht dabei massive Probleme, etwa wenn gegensätze Werte zugewiesen werden müssen. Während moderne Browser den Standard oft sauber unterstützen, benötigt der Internet Eexplorer 11 aber manchmal völlig andere Zuordnungen, um das gleiche Ergebnis zu erzielen.

Eine klassische Lösung besteht darin, der gleichen CSS-Eigenschaft mehrere verschiedene Werte zuzuweisen. Zum Beispiel:

Fallback-Werte für den Internet Explorer.

Dies ist jedoch nur notwendig, wenn der IE11 die später zugewiesenen Werte nicht unterstützt und somit einen der vorherigen Werte als Fallback benötigt.

Aber was ist, wenn wir bestimmte Werte nur dem Internet Explorer 11 zuweisen wollen, weil dieser die zugewiesenen und unterstützten Werte anders interpretiert als die modernen Webbrowser und es so zu einem unerwarteten Ergebnis kommt? Dann können wir die CSS Custom Properties oder CSS Custom Property Values als generische Lösung verwenden. Denn der IE11 unterstützt das Schlüsselwort var nicht, auch wenn der Variablenwert für ihn verständlich wäre, und greift stattdessen auf zuvor zugewiesene Werte zurück.

Der Internet Explorer kann mit var nicht umgehen und verwendet den Wert 1em anstelle von auto.

Der IE11 würde zwar den Wert auto unterstützen und verwenden, soll aber explizit den Wert 1em heranziehen, während moderne Webbrowser den Wert auto verwenden sollen. Da die zweite Zuordnung mit dem Schlüsselwort var für den IE11 nicht auflösbar ist, verwendet er den zuvor zugewiesenen Wert 1em.

Tada. Problem gelöst, auf generische Weise, die sich in vielen verschiedenen Anwendungsfällen verwenden lässt.