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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Chris
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.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.