Fallback CSS-Datei für Browser ohne Grid-Unterstützung nachladen

Wenn man schon mal ein bisschen Kontakt mit CSS Grid hatte, dann will man die neue Technik am liebsten direkt und auf jeder Website einsetzen. Leider wird man ausgebremst, wenn man an alte Browser denkt, die CSS Grid gar nicht bzw. noch nicht vollständig unterstützen. Für die Browser braucht man dann ein Fallback, damit die Website weiterhin vernünftig aussieht. Dabei bin ich der Meinung, dass die Website in einem alten Browser nicht zu 100% der Website in einem modernen Browser gleichen muss.

Auch hier auf der Website setze ich schon CSS Grid ein und habe einen einfachen Fallback für alte Browser direkt in die Haupt-CSS-Datei geschrieben. Der Code für das CSS Grid überschreibt den Fallback, der z.B. auf Flexbox setzt. Die Lösung gefällt mir aber nicht, weil jeder Browser das Fallback laden muss, obwohl er es vielleicht nicht braucht. Zusätzlich fühlt der CSS-Code sich nicht sauber an.

In einem Talk von Benjamin De Cock, der darüber berichtet, dass man bei Stripe CSS Grid schon auf der Live-Seite einsetzt, stellt er auch eine Lösung vor, um eine Fallback CSS-Datei nachzuladen. Wenn man mit dem Kompromiss leben kann, dass die Lösung auf JavaScript setzt, dann ist der Fallback nur wenige Zeilen lang:

<script>
  if(!("grid" in document.body.style)) {
    var fallback = "<link rel=stylesheet href=fallback.css>";
    document.head.insertAdjacentHTML("beforeend", fallback);
  }
</script>

Es wird überprüft, ob der Browser CSS Grid unterstützt, wenn dies nicht der Fall ist, wird eine Fallback-CSS-Datei in den Header hinzugefügt, die vom Browser nachgeladen wird.

Da der Code auf das Body-Tag zugreift, muss dieser Code nach dem Öffnen des Body-Tags eingefügt werden. Ich würde den Code direkt nach dem öffneten Body-Tag einfügen, damit stellt man auch sicher, dass die Fallback-Datei sehr schnell nachgeladen wird und im optimal Fall sieht man gar nicht, das CSS nachgeladen wurde.

Mir gefällt diese Lösung sehr, da der CSS-Code schöner getrennt ist und moderne Browser nicht den Fallback-Code laden müssen. Wenn der Zeitpunkt gekommen ist, dass der Anteil von alten Browsern nicht mehr relevant ist, dann lässt sich das Fallback sehr einfach entfernen.