Wie ich euch ja schon in meinem letzten Artikel erzählt habe, setze ich seit einiger Zeit SASS bzw. Compass ein. Für das Redesign einer Website habe ich mich für den Mobile Fist Ansatz entschieden. Für diejenigen von euch, die damit nichts anfangen können: Bei Mobile First entwickelt man ein Design zuerst für kleine Bildschirmauflösungen, also z.B. Smartphones, und entwickelt dieses dann Schrittweise bis zur Desktop-Version weiter.

Das Problem dieses Ansatzes mit älteren Internet Explorern

Für die technische Umsetzung verwendet man immer CSS Media Queries. Man definiert bei Mobile First dann zuerst die Eigenschaften für mobile Endgeräte und anschließend über weitere Anweisungen in einem Media Query die Anweisungen für die größeren Auflösungen. In SASS könnte es vereinfacht wie folgt aussehen:

body {
	// CSS Anweisungen für mobile Geräte
	...
	@media all and (min-width: 480px) {
		// CSS Anweisungen für mobile Geräte in Querformat
		...
	}
	@media all and (min-width: 640px) {
		// CSS Anweisungen für Tablets im Hochformat
		...
	}
	@media all and (min-width: 768px) {
		// CSS Anweisungen für einfache Tablets im Querformat
		...
	}
	@media all and (min-width: 960px) {
		// CSS Anweisungen für Desktop
		...
	}
}

Das Problem bei älteren Versionen des Internet Explorers (Version IE8 und früher) unterstützen CSS Media Queries aber leider nicht. Das bedeutet, dass sämtliche Anweisungen innerhalb der Anweisungen für den Internet Explorer 8 und früher nicht angewendet werden. Ein Nutzer würde also immer die Darstellung für mobile Geräte sehen, aber auf die Größe des Desktops vergrößert. Das ist natürlich nicht optimal. Zum Glück habe ich mir dazu eine sehr einfache Lösung gefunden, zu der mich andere inspiriert haben.

Die Lösung: Das Mixin respond-to-ie() als IE Fallback

Ich habe es sehr einfaches Mixin geschrieben, dass die Ausgabe der Anweisungen in einem Media Query für moderne Browser ausliefert und die Anweisungen für den Internet Explorer 8 und früher direkt ausgibt. Dieses speichert ihr am besten in einer Datei mit allen anderen Mixins:

_mixins.scss

@mixin respond-to-ie($size){
	@if $old-ie {
		@content;
	} @else {
		@media all and (min-width: $size) { @content; }
	}
}

Es kann direkt als Ersatz für den Media Query eingesetzt werden. Das erste Beispiel würde dann wie folgt aussehen:

body {
	// CSS Anweisungen für mobile Geräte
	...
	@include respond-to-ie(480px) {
		...
	}
	@include respond-to-ie(640px) {
		...
	}
	...
}

Nehmen wir mal an, es gibt nur eine SASS Datei styles.scss mit allen Anweisungen und das Mixin steht in einer Datei _mixins.scss, dann sieht das Setup der SASS Datei wie folgt aus:

styles.scss

$old-ie: false !default;
@import "mixins";

// SASS Anweisungen
...

Zusätzlich dazu benötigen wir eine Datei, die für die alten Internet Explorer verwendet wird. Im besten Falle sind alle Anweisungen aus der styles.scss auch für den IE bestimmt. Dann besteht die Datei old_ie.scss aus lediglich zwei Zeilen Code:

old_ie.scss

$old-ie: true;
@import "styles";

Die Datei setzt also zuerst die Variable $old_ie und importiert dann einfach die gesamte styles.scss. An jeder Stelle, an der das Mixin respond-to-ie() verwendet wird, wird dann eben kein Media Query ausgegeben, sondern direkt die Anweisungen.

Einbindung der CSS Dateien

Bei diesem Lösungsweg werden also zwei Dateien erzeugt. Eine styles.css und eine old_ie.css Datei. Diese werden nun über Conditional Comments eingebunden:

<!--[if lte IE 8]>
	<link rel="stylesheet" href="old_ie.css" media="all" />
<![endif]-->
<!--[if gt IE 8]><!-->
	<link rel="stylesheet" href="styles.css" media="all" />
<!--<![endif]-->

Der Vorteil dabei ist auch, dass die Datei old_ie.css eben überhaupt keine Media Queries enthält. Dadurch ist die Datei insgesamt auch ein ganzes Stück kleiner, als es bei anderen Lösungen der Fall ist, bei denen die Anweisungen für den Internet Explorer über eine zusätzliche Klasse realisiert werden und dadurch für alle Browser eine größere CSS Datei entsteht.

Bonus Feature dieser Lösung

Wir haben für diese Lösung auch eine neue Variable eingeführt. Diese können wir natürlich auch außerhalb des Mixins verwenden:

body {
	...
	@if $old-ie {
		// CSS Anweisungen, die nur für alte IE bestimmt sind
	}
}

Ihr könnt also an einer beliebigen Stelle eine Anweisung definieren, die nur für alte Versionen des IE angewendet werden oder durch Negation der Variablen entsprechend nur modernen Browsern.

Fazit

Durch ein einfaches Mixin haben wir es geschafft, einen Mobile First Ansatz mit SASS umzusetzen ohne dabei die Rückwärtskompatibilität zum IE8 und früher zu verlieren. Im letzten Projekt hat das mit diesem einen Mixin hervorragend funktioniert und wir konnten uns bei der Programmierung komplett auf moderne Browser konzentrieren. Weitere Anpassungen, die für den IE8 und früher noch notwendig waren konnten wir dann, ohne eine extra CSS Klasse verwenden zu müssen, zusätzlich in der Datei old_ie.scss schreiben.

Ich hoffe ihr könnt dieses Mixin auch in eurem nächsten Projekt einsetzen und euch damit an ein Mobile First Design wagen.