Platzierung der CSS-Stile bei Websites mit responsive Webdesign

Den CSS-Einstellungen kommen bei Websites, die "reaktiv" (responsive) erstellt wurden, eine besondere Bedeutung zu, da darüber im Grunde das gesamte Verhalten auf unterschiedlichen Geräten gesteuert wird. Da eine CSS-Angabe für verschiedene Auflösungen gemacht werden muss, nimmt die Größe der CSS-Codezeilen bei responsive Webdesign naturgemäß zu. Es stellt sich die Frage, wie man diese organisieren und in die Seiten einfügen bzw. einbinden soll. Von den Entwicklern werden hierbei meistens folgende Ziele verfolgt:

  • Die HTTP-Requests sollen auf ein Minimum reduziert werden.
  • Die Dateigröße für die CSS-Angaben soll möglichst gering sein.
  • Das Rendering einer Webseite soll nach Möglichkeit nicht durch CSS blockiert werden.
  • Die CSS-Codezeilen sollen übersichtlich sein, sodass man schnell Änderungen vornehmen kann.
  • Die CSS-Codes sollen organisiert abgelegt sein, damit sie leicht zu verwalten sind.

Die unterschiedlichen Ziele korrelieren zum Teil. Beispielsweise könnte man der Übersichtlichkeit halber für verschiedene Auflösungen eine separate CSS-Datei erstellen und einbinden. Dadurch steigen jedoch die HTTP-Requests. Um die Größe der CSS-Dateien gering zu halten, könnte man alle Leerzeilen und -zeichen entfernen. Dadurch wird der Code wiederum unübersichtlich.

Die CSS-Angaben können auf unterschiedlichen Wegen eingebunden werden. Zu den wichtigsten Methoden zählen:

  • CSS-Code inline im HEAD-Bereich einfügen
  • CSS-Code in einer Datei zusammenfassen und einbinden
  • CSS-Code in mehrere Dateien aufteilen und einbinden
  • CSS-Code asynchron laden und mit JavaScript aktivieren

CSS-Code inline in die Webseite einfügen

Bei dieser Methode wird der CSS-Code im HEAD-Bereich über den STYLE-Tag eingefügt. Ein Beispielcode.

<head>
<!-- Sonstige Angaben im HEAD-Bereich -->

<!-- CSS-Stile inline -->
<style type="text/css">
<!--
@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px; */
}
-->
</style>
</head>

Vorteile beim Inline eingefügtem CSS-Code

Bei dieser Methode wird das Rendering der Webseite nicht durch HTTP-Requests für eingebundene CSS-Dateien unterbrochen. Der Browser arbeitet den Code der Webseite ab und wird quasi "nicht gestört".

Nachteile bei Inline eingefügtem CSS-Code

Bei dieser Methode muss der CSS-Code auf irgendeinem Weg in jede Webseite eingefügt werden. Das bringt organisatorische Nachteile mit sich. Soll eine einzige CSS-Einstellung anders sein, muss der CSS-Code bei allen Seiten geändert werden. Außerdem spart man sich bei dieser Methode lediglich den HTTP-Request. Das Blockieren des Renderings wird dadurch nicht aufgehoben und die Größe der zu ladenden CSS-Codezeilen wird nicht geringer.

Sinnvoller Einsatz von Inline-Styles im HEAD-Bereich

Der Einsatz von Inline-Styles kann trotzdem sinnvoll sein. Beispielsweise könnte man die CSS-Angaben in kritische und unkritische CSS aufteilen. Die kritischen CSS-Angaben fügt man inline im HEAD-Bereich ein. Die unkritischen CSS-Angaben werden später oder asynchron geladen. So wird erreicht, dass das Blockieren des Renderings zunächst nur auf den kritischen Teil beschränkt wird und die Webseite schon angezeigt wird, ohne dass man zusätzliche HTTP-Requests benötigt.

CSS-Angaben in einer Datei zusammenfassen und einbinden

Die CSS-Angaben können komplett in eine externe CSS-Datei ausgelagert und in die Webseite eingebunden werden. Ein Beispielcode zum Einbinden der CSS-Datei mit dem Namen alle.css.

<head>
<!-- Sonstige Angaben im HEAD-Bereich -->

<!-- CSS-Stile in einer Datei -->
<link rel="stylesheet" type="text/css" href="alle.css" media="all">

</head>

In XHTML muss beim LINK-Tag beachtet werden, am Ende mit " /> den abschließenden Trailing-Slash zu verwenden.

Vorteile, wenn alle CSS-Angaben in einer Datei sind

Bei dieser Methode hat man den großen Vorteil, dass alle CSS-Stile in einer Datei verwaltet werden. Sollen diese geändert werden, braucht man die Änderungen in nur einer CSS-Datei vorzunehmen. Diese Methode ist weit verbreitet.

Nachteile, wenn alle CSS-Angaben in einer Datei sind

Dadurch, dass alle CSS-Angaben in einer Datei sind und insbesondere bei Websites mit responsive Design sehr große Ausmaße annehmen können, kann schnell die Übersichtlichkeit verloren gehen. Außerdem muss zunächst die CSS-Datei geladen werden, bevor der Browser das Rendering fortsetzt.

CSS-Angaben in mehrere Dateien aufteilen

Die CSS-Angaben können auch in mehrere Dateien aufgeteilt werden. Ein Beispielcode, um für die Mindestbreite von 768 Pixeln die Datei 768.css bereitzustellen. Analog dazu könnte man auch mit den anderen Mindestbreiten (oder -höhen) verfahren.

<head>
<!-- Sonstige Angaben im HEAD-Bereich -->

<!-- CSS-Stile in mehrere Dateien aufteilen -->
<link rel="stylesheet" type="text/css" href="normale.css" media="all">
<link rel="stylesheet" type="text/css" href="768.css" media="only screen and (min-width: 768px)">
</head>

In XHTML muss beim LINK-Tag beachtet werden, am Ende mit " /> den abschließenden Trailing-Slash zu verwenden.

Vorteile, die CSS-Angaben in mehrere Dateien aufzuteilen

Bei dieser Methode hat man den Vorteil, dass die CSS-Dateien besser organisiert sind.

Nachteile, wenn die CSS-Angaben in mehrere Dateien aufgeteilt sind

Bezogen auf die Ladezeiten ist diese Methode nicht die beste Lösung. Denn, auch wenn man für jede Mindestbreite eine separate CSS-Datei zur Verfügung stellen kann, bedeutet das nicht, dass die übrigen CSS-Dateien nicht geladen werden, selbst wenn sie eigentlich irrelevant sind. Dementsprechend hat man bei dieser Variante die meisten HTTP-Requests.

CSS-Code asynchron laden und mit JavaScript aktivieren

Bei den zuvor genannten Methoden wird durch den CSS-Code das Rendering im Browser geblockt. Möchte man, dass das Rendering nicht bzw. möglichst wenig geblockt wird, gibt es die Möglichkeit, die CSS-Datei asynchron zu laden und nach dem Beenden des Renderings mit JavaScript zu aktivieren.

Media-Angabe des CSS mit JavaScript umschalten

Hierbei setzt man die Media-Angabe des LINK-Tags zunächst auf einen ungültigen Wert, z.B. NULL. Nachdem das Rendering beendet ist, wird mit JavaScript der Wert für die Media-Angabe umgeschaltet, z.B. auf "all" oder "screen". Ein Beispielcode.

<head>
<!-- Sonstige Angaben im HEAD-Bereich -->

<style type="text/css">
<!--
/* Kritische CSS-Angaben */
-->
</style>

<!-- Vor der Umschaltung -->
<link rel="stylesheet" type="text/css" href="alle.css" media="NULL" id="styles">
</head>

In XHTML muss beim LINK-Tag beachtet werden, am Ende mit " /> den abschließenden Trailing-Slash zu verwenden.

Vor dem schließenden BODY-Tag kann der Wert für media="..." mit JavaScript umgeschaltet werden.

<script type="text/javascript">
document.getElementById('styles').media = 'all';
</script>
<noscript><link rel="stylesheet" type="text/css" href="alle.css" media="all"></noscript>
</body>

Nach der Umschaltung mit JavaScript sähe der LINK-Tag wie folgt aus.

<link rel="stylesheet" type="text/css" href="alle.css" media="all" id="styles">

Erläuterung zu dem Verfahren

Die kritischen CSS-Angaben werden Inline im HEAD-Bereich der Seite eingefügt. So werden zumindest die wichtigsten CSS-Stile angewendet. Der LINK-Tag benötigt mit id="..." eine eindeutige ID, damit er später mit JavaScript angesprochen werden kann. Mit media="NULL" wird das Media-Attribut zunächst auf einen ungültigen Wert gesetzt. Die Browser ignorieren das und das Rendering wird nicht blockiert. Trotzdem wird die CSS-Datei bereits asynchron geladen. Nachdem das Rendering beendet wurde, wird vor dem schließenden BODY-Tag der Wert von "NULL" auf "all" umgeschaltet. So wird erreicht, dass der Großteil der CSS-Angaben das Rendering nicht blockieren und die CSS-Datei asynchron geladen wird. Damit auch Benutzer ohne aktiviertem JavaScript eine gestylte Webseite sehen, wird mit dem NOSCRIPT-Tag die CSS-Datei für sie bereitgestellt.