Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

So entwickelt The Guardian responsiv für den IE8

(Foto: bnpositive / flickr.com, Lizenz: CC-BY-SA)

Wie ihr wisst, sind einige Elemente beziehungsweise Technologien nicht in allen Browsern verfügbar. Ja klar, es gibt Polyfills, aber „The Guardian“ hat dieses Problem wesentlich eleganter gelöst.

Das Problem: Nicht unterstütze Technologie für einen Mobile-First Ansatz

Um responsives Webdesign auch in älteren Browsern umsetzen zu können, müssen wir uns oft von altbewährten Pattern trennen – das kann unter Umständen zu ziemlich abenteuerlichem Code führen. Der Aufwand kann sich ebenfalls langfristig erhöhen, weil ein zweites Stylesheet zum Einsatz kommen muss, um eben die – in die Jahre gekommenen – Browser zu unterstützen.

Eine native Unterstützung gibt es eben nicht für:

  • rem
  • @media queries
  • rgba(), hsla()
  • :last-child, :nth-child(), :first-of-type, ...
  • :empty
  • :not()
  • calc()
  • .ttf, .otf, .woff fonts
  • multiple backgrounds
  • background-size
  • vw, vh, vmin, vmax
  • :checked, :valid, :invalid, :required
  • box-shadow
  • transforms (rotate, translate, skew, scale, matrix)
  • border-radius
  • opacity
  • getElementsByClassName
  • getComputedStyle
  • addEventListener
  • geolocation
  • canvas
  • HTML5 video
  • HTML5 audio

Im Falle von responsivem Webdesign ist besonders das Fehlen von Media-Queries problematisch.

Mobile First ist schwer mit IE umzusetzen
Mobile First ist schwer mit IE umzusetzen. (Foto: bnpositive / flickr.com, Lizenz: CC-BY-SA)

Die Herausforderung: SASS und verschiedene Stylesheets

Es existieren Polyfills wie Respond.js (Mobile First responsive Webdesign für HTML5), aber das Team von „The Guardian“ setzt stattdessen lieber auf Leistung und Wartbarkeit der Applikation. Das heißt: kein JavaScript – und eventuelle Code-Dopplungen so gering wie möglich halten. Wie haben sie das gemacht? Mit SASS.

Globales Stylesheet für alle Browser

Zuerst wurde ein SASS-Mixin erstellt, das im Grunde ein Media-Query darstellt. Die einzelnen Parameter werden aber mit SASS eingepflegt. Ihr könnt dieses „mq-Mixin“ bei GitHub herunterladen.

Diese mq-Mixin wird jetzt in einem globalen Stylesheet eingebunden:

    // global.scss
@import "mq";
.element {
    // Applies to devices at least as wide as a mobile
    @include mq($from: mobile) {
        color: green;
    }
    // Applies to devices at least as wide as a tablet
    @include mq($from: tablet) {
        color: blue;
    }
    // Applies to devices smaller than a "desktop"
    @include mq($to: desktop) {
        color: red;
    }
}

Kompiliert sieht dieses Code-Fragment so aus:

// global.css
@media all and (min-width: 18.75em) {
    .element {
        color: green;
    }
}
@media all and (min-width: 37.5em) {
    .element {
        color: blue;
    }
}
@media all and (max-width: 56.1875em) {
    .element {
        color: red;
    }
}

Spezifisches CSS für veralterte Browser

Dieses Mixin besitzt auch eine Flag $mq-responsive. Wird diese nun auf false gesetzt, werden die nicht unterstützen Media-Queries ausgelassen und nur IE8-spezifischer Code angezeigt.

Das Stylesheet für IE8 oder ältere Browser sieht somit wie folgt aus:

// old-ie.scss  
$mq-responsive: false;
@import "mq";
.element {
    @include mq($from: mobile) {
        color: green;
    }
    @include mq($from: tablet) {
        color: blue;
    }
    @include mq($to: desktop) {
        color: red;
    }
}

Mit der Deaktivierung des Responsive-Features wird nun folgender CSS-Code für ältere Browser lesbar ausgegeben:

// old-ie.css - served only to IE <= 8
.element {
    color: green;
    color: blue;
}

Ältere Browser können diesen Code jetzt lesen, da ja nur die Anweisungen des min-width-Attributes ausgegeben werden – alle anderen Anweisungen des Stylesheets werden übersprungen. Mit einer Browserweiche und dem spezifischen CSS können jetzt ältere Browser angesprochen werden, wobei moderne Browser das globale CSS erhalten.

<!--[if (gt IE 8) | (IEMobile)]><!-->
    	<link href="global.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
    	<link href="old-ie.css" rel="stylesheet" />
<![endif]-->

Mit dieser Methode schlägt man gleich mehrere Fliegen mit einer Klappe:

  • Mobile Geräte müssen keinen Code herunterladen, der für alte Browser bestimmt ist
  • Änderungen für ältere Browser können leicht durchgeführt werden
  • Sollte dieser „Hack“ nicht mehr benötigt werden, ist es einfach, ihn spurlos aus dem restlichen Code verschwinden zu lassen

Aber was ist mit Breakpoint?

Das wäre eine berechtigte Frage. Breakpoint hat im Vergleich zu dieser Methode mehr Abhängigkeiten und die $mq-responsive-Flag ermöglicht eine elegantere Handhabung des Codes. Mehr Informationen zum Thema SASS und Media-Queries findet ihr hier.

Verwendet ihr lieber response.js?

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Chris

Müsste der letzte Satz nicht heissen: "Verwendet ihr lieber responD.js?"
Falls ja: nein. Es wird dringend eine bessere Methode benötigt, da ich mit respond.js bereits eine Website mit einer Performance programmiert habe, wo es besser gewesen wäre, dem IE8 einfach die mobile first Variante zu zeigen.
Ich werde es mit den Special Media-Queries auf jedenfall mal ausprobieren.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst