Hinweis für ältere Internet Explorer in Contao umsetzen

Question

Accepted Answer

Eine Website für ältere Internet Explorer zu optimieren kann je nach Projekt manchmal Stunden bis Tage dauern. Und wofür?! Damit 1% der Nutzer die Website ebenfalls betrachten können?!

Damit Kosten und Nutzen miteinander vereinbar bleiben, sind wir mittlerweile dazu übergegangen, ältere Versionen des Internet Explorer bewusst nicht mehr zu unterstützen. Um einen IE8-Nutzer aber dennoch nicht mit einem „zerschossenen“ Design zu konfrontieren, bauen wir bei immer mehr Projekten einen entsprechenden Hinweis ein.

Dank des in Contao 3.3 eingeführten Template-Systems reichen wenige Zeilen Code, um den Hinweis ohne Erweiterung und updatesicher einzubauen. Dafür erstellt du eine Datei fe_page.html5 in deinem Templates-Ordner und fügst folgenden Inhalt ein:

<?php $this->extend('fe_page'); ?>
 <?php $this->block('body') ?>
 <!--[if lt IE 9]>
 <div class="overlay">
 <div class="overlay__content">
 <p>Sie verwenden einen veralteten Browser. Sie benötigen mindestens den Internet Explorer 9 oder neuer, um diese Website fehlerfrei darzustellen</p>
 <div class="btn btn--primary">
 <a href="https://www.microsoft.com/de-de/download/internet-explorer.aspx" target="_blank">Weiter zur Microsoft Website</a>
 </div>
 </div>
 </div>
 <![endif]-->
 <?php $this->parent(); ?>
 <?php $this->endblock(); ?>

Erklärung: Über $this->extend gibst du zunächst an, welches Template du ergänzen willst. Mit $this->block und $this->endblock gibst du an, welchen Block im Template du anpassen möchtest. In unserem Fall haben wir einen Container overlay angelegt, der in unserem <body> ausgegeben werden soll, wenn der Internet Explorer älter als Version 9 ist. Über $this->parent geben wir außerdem den Inhalt des ursprünglichen Templates aus.

Und mit ein wenig CSS wird aus dem unformatierten Inhalt ein Overlay:

.overlay {
  position: fixed;
  z-index: 1005;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #999;
}

.overlay__content {
  width: 600px;
  max-width: 100%;
  padding: 2em;
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -100px;
  background: #fff;
  color: #000;
}