Development

Im Zuge eines Flexbox-Designs zeigte sich ein interessantes Problem mit unterschiedlichen Schriftgrößen. Es sollten mehrere Schaltflächen dargestellt werden, auf denen mit Flexbox ein Schriftsymbol und ein Text darsgestellt wurde. Das Schriftsymbol wechselte zwischen groß und klein, der Text blieb bei normaler Höhe.

Das funktionierte im Grunde problemlos. Schriften und Symbolen waren in einer Reihe auf auf derselben Höhe. Hatte aber einer der Buttons kein Symbol, dann verrutschte das gesamte Element einige Pixel. Symbol und Schrift blieben zentriert, der Button selbst unterragte aber die anderen.

Die Schriftgröße von Symbol und Text ist unterschiedlich. Das führt zu einem Versatz.

Der dazugehörige CSS-Code ist überschaubar. Ihr findet das Beispiel zum Rumprobieren auch bei Codepen.

button.flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
button.flex > .icon {
  font-size: 1.333rem;
}
button.flex > .text {
  font-size: 1rem;
}

Nach vielen verschiedenen Versuchen, das Problem zu lösen, verstand ich irgendwann, woran es lag. Die Schriftgröße jedes ersten Kindelements einer Schaltfläche legte den Grundstein für die Höhenberechnung und sorgte somit für die Ausrichtung der gesamten Elements. Die Lösung war dann, jeder Schaltfläche ein leeres Inhaltselement vorzusetzen.

button.flex:before { content:""; }

Das ist nicht die eleganteste Lösung und ich würde eine andere bevorzugen, sie erfüllt allerdings ihren Zweck sehr gut und funktioniert bis runter zum Internet Explorer 11.

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.

Grundlinienversatz bei unterschiedlichen Schriftgrößen lösen

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