Mobile First & IE8 Fallback mit Sass (Teil2)

Im ersten Teil Mobile First & IE8 Fallback mit Sass ging es darum, wie man mit dem IE8 umgeht, wenn man CSS und Media Querys nach dem „Mobile First“ Prinzip erstellt. Das Mixin-Plugin Sass-IE hilft dabei ein gesondertes Stylesheet für den IE8 ohne @media Angaben zu generieren. Die Lösung hat jedoch ein paar Schwächen, so können z.B. Media Querys nur für einen Wert (min-width bzw. max-width) und ein Medium (@media screen …) generiert werden. Es ist also nicht möglich ein Media Query für zwei Werte zu schreiben. Leider geht @media screen and (min-width: 450px and max-width: 650px) damit nicht.

Breakpoint Compass plugin

Breakpoint ist ein Compass Plugin, das IMO die universellste Lösung für das Schreiben von Media Querys in Sass ist. Breakpoint funktioniert grundsätzlich wie Sass-IE, wenn man ein Media Query schreiben möchte, ruft man ein Mixin auf. Ein einfaches Beispiel:

$basic-value: 543px;
$pair-value: 456px 794px;

.foo {
  content: 'No Media Queries';

  @include breakpoint($basic-value) {
    content: 'Basic Media Query';
  }

  @include breakpoint($pair-value) {
    content: 'Paired Media Query';
  }
}

Der Default-Wert für Media Querys ist min-width. Werden zwei Variablen übergeben wird eine UND-Verknüpfung von min- und max-width generiert.

.foo {
  content: 'No Media Queries';
}

@media (min-width: 543px) {
  .foo {
    content: 'Basic Media Query';
  }
}

@media (min-width: 456px) and (max-width: 794px) {
  .foo {
    content: 'Paired Media Query';
  }
}

Breakpoint kann auch automatisch EM-Media-Querys generieren. Dazu einfach die globale Variable $breakpoint-to-ems auf true setzen.

$breakpoint-to-ems: true;
$media: 'screen' 700px;

#foo {
  @include breakpoint($media) {
    content: 'Media';
  }
}
@media screen and (min-width: 43.75em) {
  #foo {
    content: 'Media';
  }
}

Das Beispiel oben zeigt, dass man in Breakpoint das Medium (screen) für den der Media Query zutrifft optional angeben kann. Denkbar wäre auch eine Variable wie $forprint: 'print'; für ein Druckstylsheet.

IE8 Fallback in separate Dateien generieren

Wie beim Mixin von Jake kann man in Breakpoint auch ein Stylesheet für IE8 in eine gesonderte generieren Datei lassen.

// _layout.scss
// global breakpoints
$small: 24em;
$middle: 34em;
$large: 65em, 'no-query' true;

.component {
  color: red;
  @include breakpoint($middle) {color: blue}
  @include breakpoint($large) {color: green;}
}

In der Sass-Hauptdatei wird die _layout.scss importiert und die globalen Variablen aus Breakpoint $breakpoint-no-queries und $breakpoint-no-query-fallbacks auf false gesetzt.

// styles.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: false;
@import 'layout';

Für den IE8-Fallback wird eine eigene Datei angelegt, die ebenfalls

// fallback-ie8.scss
$breakpoint-no-queries: true;
@import 'layout';

styles.css

.component {
  color: red;
}
@media (min-width: 34em) {
  .component {
    color: blue;
  }
}
@media (min-width: 65em) {
  .component {
    color: green;
  }
}

fallback-ie8.css

.component {
  color: red;
  color: green;
}

Fallback mit „.lt-ie9“ in der Hauptdatei

Zusätzlich kann man Selektoren auch mit speziellen Root-Klassen erweitern lassen. Die Vorgehensweise kennt man sicherlich durch HTML5 Boilerplate. Durch Conditional Comments im <head> wird für den IE8 die Klasse lt-ie9 im HTML hinzugefügt. Diesen Selektoren kann man nun verwenden um Styles für den IE8 zu generieren.

Mit Breakpoint kann man das wie folgt erreichen:

// style.scss
// use px values, convert them to EM
$breakpoint-to-ems: true; 
$breakpoint-no-query-fallbacks: true;
$large: 960px, 'no-query' '.lt-ie9';

.component {
  color: red;
  @include breakpoint($large) {
    color: green;
  }
}

style.css

.component {
  color: red;
}
@media (min-width: 60em) {
  .component {
    color: green;
  }
}
.lt-ie9 .component {
  color: green;
}

Letztlich kann man auch bei Mixin-Aufruf noch die nötigen Variablen mitgeben, z.b. könnte man

.component {
  color: red;
  @include breakpoint($large) {
    color: green;
  }
  @include breakpoint(1200px,'.no-mq') {
    color: yellow;
  }
}

Das würde folgendes CSS als Fallback generieren:

.component {
  color: red;
}
.lt-ie9 .component {
  color: green;
}
.no-mq .component {
  color: yellow;
}

Man kann separate Dateien generieren oder den Fallback direkt in die Datei einfügen, und und und. Das macht es für mich so flexibel und ich bin noch nicht an die Grenzen gestoßen. Habt ihr weitere Tipps zum Thema „Mobile First und IE8-Fallback“?

4 thoughts on “Mobile First & IE8 Fallback mit Sass (Teil2)”

  1. Ich habe meinen grundsätzlichen Ansatz im Webkrauts-Adventskalender beschrieben. Es läuft alles auf eine separate Variable hinaus. Zusätzlich grenze ich den alten IE komplett aus und gebe ihm ein eigenes CSS. Dabei kann ich natürlich dafür sorgen – wenn ich mobile first machen wollte – dass er immer nur die Vollversion bekommt.

    Ich nutze diese ganzen Media-Query-Mixins die Du hier vorgestellt hast nicht. Ich habe nie den richtigen Nutzen erkennen können. Es gibt handliche kleine Mixins, die einfach nur eine Variable übernehmen, fertig.

    Am Ende produzieren sie das gleiche Ergebnis.

  2. Wenn du beide Artikel gelesen hast, solltest du gelesen haben, wo die einfachen Mixins Ihre Schwächen haben und wo universelle Mixin-Libraries wie Breakpoint ihren nutzen haben. Es gilt wie immer der Grundsatz, keiner ist gezwungen das zu verwenden, aber für den ein oder anderen ist das hilfreich. Für mich ist es hilfreich.

  3. Ich nutze das Script von Jake Archibald in leicht abgewandelter Form (mit Variablen).
    Wenn du damit min- und max-width kombinieren möchtest, geht das auf folgende Weise, nämlich einfach die mixins verschachteln:

    @include respond-min($bp3) {
    @include respond-max($bp4) {
    .klassen {}
    }
    }

    Das hat mir bisher genügt.

Kommentare sind geschlossen.