CSS in Websites einbinden
Mit den CSS-Einstellungen können die Elemente einer Website formatiert werden. So kann man die Struktur und das Design einer Website trennen und dafür sorgen, dass sie schneller geladen wird und gleichzeitig die auslesenden Bots (Suchmaschinen) den Inhalt besser einordnen können. Sie sind somit bei der Entwicklung von Websites von zentraler Bedeutung. Hierbei spielt es auch eine große Rolle, wie man die CSS in Websites einbindet. Hierfür gibt es mehrere Möglichkeiten.
- CSS-Stile den HTML-Elementen inline als Attribut zuweisen
- CSS-Stile inline im HEAD-Bereich der Seiten einfügen
- CSS-Stile in eine separate CSS-Datei auslagern und einbinden
- CSS-Stile in mehrere CSS-Dateien auslagern und einbinden
- CSS-Datei importieren
- CSS-Datei über JavaScript laden bzw. nachladen
- CSS-Datei asynchron laden und mit JavaScript aktivieren
Auf einer Website können natürlich auch mehrere der genannten Möglichkeiten eingesetzt werden. Hierbei werden von den Entwicklern neben der eigentlichen Festlegung des Designs folgende Ziele verfolgt.
- Möglichst wenig HTTP-Requests
- Möglichst geringe Dateigröße
- Möglichst keine Blockierung des Renderings
- Übersichtliche Codezeilen
- Gute Organisation der CSS-Dateien
Die verschiedenen Ziele werden nie komplett erfüllt, da sie zum Teil korrelieren. Beispielsweise könnte man in einer CSS-Datei alle Leerzeichen und -zeilen entfernen. Dadurch leidet jedoch die Übersichtlichkeit.
CSS-Stile inline den HTML-Elementen als Attribut zuweisen
Bei dieser Methode wird der CSS-Code als Attribut direkt bei den HTML-Elementen eingetragen. Hierbei verwendet man das Attribut style="...". Innerhalb der Anführungszeichen werden wie unter CSS-Syntax beschrieben, die Eigenschaften und Werte eingetragen. Ein Beispielcode, um einem Absatz die Schriftgröße 14px zuzuweisen.
<p style="font-size: 14px;">Beispieltext</p>Der Nachteil bei dieser Variante ist, dass das Design vom Content nicht getrennt wird. Möchte man das Aussehen der Elemente ändern, müsste man alle HTML-Tags anpassen, in denen die CSS-Stile als Attribut zugewiesen wurden.
CSS-Stile inline im HEAD-Bereich der Seiten einfügen
Statt die CSS-Stile als Attribute zuzuweisen, kann man sie auch inline im HEAD-Bereich eintragen. Das geschieht über den STYLE-Tag. Ein Beispielcode.
<!-- Sonstige Angaben im HEAD-Bereich -->
<style type="text/css">
<!--
p {
font-size: 14px;
}
-->
</style>
<!-- Sonstige Angaben im HEAD-Bereich -->
</head>Die Stildefinitionen werden von den Kommentar-Befehlen <!-- ... --> umschlossen. Das ist jedoch nur optional und dient dazu, damit (sehr alte) Browser, die die CSS-Definitionen nicht verstehen, den Inhalt ignorieren und nicht als Text interpretieren. Dem STYLE-Tag wird außerdem das Attribut type="text/css" zugewiesen. Der STYLE-Tag kann zwar auch außerhalb des HEAD-Bereichs platziert werden, z.B. im BODY-Bereich. Es gibt hier aber gewisse Einschränkungen. Vor HTML5 ist nur der HEAD-Bereich vorgesehen. Ab HTML5 kann es auch im BODY-Bereich platziert werden, jedoch nur mit dem Attribut scoped.
Innerhalb einer HTML-Seite kann man mehrere STYLE-Tags einfügen. Daneben kann man den STYLE-Tags das Attribut media="..." zuweisen, um die Ausgabemedien festzulegen, für die die Stildefinitionen gelten sollen. Dabei können folgende Werte eingetragen werden.
- Für alle Medientypen: all
- Für Bildschirme: screen
- Für Projektoren: projection
- Für Drucker: print
- Für Handheld: handheld
- Für Fernseher: tv
- Für Sprachbrowser: aural
- Für Geräte mit Braillezeile: braille
- Für Brailledrucker: embossed
- Für nichtgrafische Ausgabemedien: tty
Es kann sein, dass die Browser nicht alle Medientypen unterstützen. Welche Medientypen von den Browsern unterstützt werden, sollte man vor dem Einsatz testen. Mehrere Medientypen werden mit Komma getrennt angegeben. Ein Beispielcode, um die Stildefinitionen für Bildschirme und Projektoren festzulegen.
<!-- Sonstige Angaben im HEAD-Bereich -->
<style type="text/css" media="screen, projection">
<!--
p {
font-size: 14px;
}
-->
</style>
<!-- Sonstige Angaben im HEAD-Bereich -->
</head>Solche inline eingefügten Stile werden auch Inline-Styles genannt. Vorteilhaft dabei ist, dass für die CSS-Stile keine Anfragen an den Server gestellt werden. Der große Nachteil ist jedoch die Organisation. Denn, auf irgendeinem Wege müssen die Stile in die Seiten eingefügt werden. Wenn auch nur eine einzige Stildefinition geändert werden muss, müsste man den Code auf allen betroffenen Seiten ändern. Außerdem würde der HEAD-Bereich mit CSS-Code aufgebläht. Das Rendering der Seite wird durch Inline-Styles genau genommen trotzdem blockiert. Und dadurch, dass der CSS-Code im HEAD-Bereich eingefügt wird, vergrößert sich die Ladezeit für die Seite, sodass man im Grunde lediglich die Anfrage an den Server gespart hätte.
CSS-Stile in eine separate CSS-Datei auslagern und einbinden
Eine häufig verwendete Methode ist, alle CSS-Stile in einer separaten Datei auszulagern und im HEAD-Bereich über den LINK-Tag einzubinden. Die Dateien werden mit der Dateiendung .css gespeichert. Ein Beispielcode zum Einbinden von allestile.css.
<!-- Sonstige Angaben im HEAD-Bereich -->
<!-- CSS-Stile in eine Datei auslagern und einbinden -->
<link rel="stylesheet" type="text/css" href="allestile.css" media="all">
<!-- Sonstige Angaben im HEAD-Bereich -->
</head>Hierbei hat man den Vorteil, dass alle Stile zentral verwaltet werden. Bei einer Änderung braucht man am HTML-Code der Seiten nichts zu ändern und muss lediglich eine CSS-Datei bearbeiten. Nachteilig bei dieser Variante ist, dass die Übersichtlichkeit schnell verloren gehen kann. Denn, CSS-Dateien haben nicht selten 1000 oder mehr Zeilen Code. Außerdem kann der Browser mit dem Rendering erst fortfahren, wenn die Datei geladen und abgearbeitet wurde. Positiv ist, dass lediglich eine Anfrage an den Server gestellt wird. Zur besseren Übersichtlichkeit könnte man in die Datei Kommentare einfügen.
CSS-Stile in mehrere Dateien auslagern und einbinden
Damit man die CSS-Codes übersichtlicher organisiert, kann man sie auch in mehrere CSS-Dateien auslagern und im HEAD-Bereich einbinden. Beispielsweise könnte man für jedes Ausgabemedium eine separate CSS-Datei erstellen. Zu dem Code mit nur einer CSS-Datei gäbe es in solch einem Fall wenig Unterschiede. Es würden lediglich weitere Einträge mit dem LINK-Tag hinzukommen und evtl. müssten bei den Einträgen die Attribute media="..." angepasst werden. Ein Beispiel.
<!-- Sonstige Angaben im HEAD-Bereich -->
<!-- CSS-Stile in mehrere Datei auslagern und einbinden -->
<link rel="stylesheet" type="text/css" href="bildschirm.css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="drucker.css" media="print">
<!-- Sonstige Angaben im HEAD-Bereich -->
</head>Der Vorteil bei dieser Variante ist die Übersichtlichkeit. So kann man gezielt einzelne CSS-Dateien anpassen, ohne die übrigen Dateien zu berücksichtigen. Die Übersichtlichkeit geht jedoch auf Kosten der Zeit für das Rendern. Denn, für alle Dateien würden Anfragen an den Server gestellt und das Rendering würde solange blockiert werden, bis die Dateien geladen und abgearbeitet sind.
CSS-Datei importieren
Eine oder mehrere CSS-Dateien lassen sich auch importieren. Das besondere Dabei ist, dass das nicht über den LINK-Tag erfolgt, das ein HTML-Element ist, sondern über das CSS-Element @import. Man verwendet somit CSS-Code, um die CSS-Dateien zu importieren. Das Element @import kann wie eine normale CSS-Anweisung entweder im STYLE-Tag oder in einer externen CSS-Datei eingetragen werden, die mit dem LINK-Tag eingebunden werden könnte. Der Pfad wird relativ zur CSS-Datei eingetragen. Dahinter kann der Medientyp angegeben werden. Ein Beispiel.
<!-- Sonstige Angaben im HEAD-Bereich -->
<style type="text/css">
<!--
@import url(bildschirm.css) screen, projection;
@import url(drucker.css) print;
-->
</style>
<!-- Sonstige Angaben im HEAD-Bereich -->
</head>Wenn man andere CSS-Dateien über diese Methode importiert, muss der Code (mit Ausnahme von @charset) immer am Anfang des STYLE-Tags bzw. der CSS-Datei stehen. Auch bei dieser Variante ist der Vorteil die Übersichtlichkeit. Man könnte z.B. mit nur einem LINK-Tag eine CSS-Datei einbinden und über diese die übrigen CSS-Dateien importieren lassen. So hätte man im HEAD-Bereich nur einen Eintrag und die CSS-Stildefinitionen wären sortiert. Nachteilig ist jedoch, dass das Importieren langsamer ist als beim Einbinden der CSS-Dateien über den LINK-Tag. Ein Grund hierfür ist, dass beim Importieren die Dateien nacheinander geladen werden und nicht parallel. Das dürfte beim Rendern der Seite die meiste Zeit in Anspruch nehmen.
CSS-Datei über JavaScript laden bzw. nachladen
Es gibt auch Möglichkeiten, die CSS-Datei(en) per JavaScript zu laden. Bei dieser Methode wird der JavaScript-Code nach hinten verschoben, z.B. vor dem schließenden BODY-Tag oder nach dem sichtbaren Bereich der Website. Der sichtbare Bereich wird auch "Above the fold" genannt. So kann man erreichen, dass das Rendering der Website zunächst nicht unterbrochen wird. Beim Abarbeiten des Codes stößt der Browser irgendwann auf den JavaScript-Code und lädt die CSS-Datei(en) nach. Das könnte man z.B. mit dem folgenden JavaScript-Code erreichen, den man vor dem schließenden BODY-Tag (oder an einer anderen geeigneten Stelle) einfügen kann.
<script type="text/javascript">
link = document.createElement("link");
link.href = "allestile.css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "all";
document.getElementsByTagName("head")[0].appendChild(link);
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="allestile.css" media="all">
</noscript>
</body>Der NOSCRIPT-Tag ist für Browser mit deaktiviertem JavaScript. Vorteilhaft bei dieser Variante ist, dass das Rendering vorerst nicht unterbrochen wird. Man könnte die wichtigen CSS-Stile, die auch kritisches CSS genannt werden, inline im HEAD-Bereich unterbringen, sodass die Besucher der Website zunächst den sichtbaren Bereich wie gewünscht angezeigt bekommen. In dem Fall würde das Rendering dadurch zwar blockiert werden, jedoch nur geringfügig, da nur die kritischen CSS-Stile eingefügt werden würden. Die übrigen CSS-Stile würden später nachgeladen werden. Nachteilig bei dieser Variante ist, dass das Rendering zwar zunächst nicht bzw. beim Einfügen von kritischem CSS nur geringfügig unterbrochen wird, dafür wird die CSS-Datei nicht parallel geladen, sondern später.
CSS-Code asynchron laden und mit JavaScript aktivieren
Es ist möglich, das Rendering zunächst nicht bzw. so wenig wie möglich zu blockieren und die CSS-Datei(en) asynchron (parallel) zu laden und zum Schluss mit JavaScript zu aktivieren. So muss der Browser mit dem Laden der CSS-Datei nicht solange warten, bis mit der Abarbeitung des Codes vor dem schließenden BODY-Tag begonnen wird.
Media-Angabe des CSS mit JavaScript umschalten
Hierbei bedient man sich eines Tricks. Die CSS-Datei wird ganz normale über den LINK-Tag im HEAD-Bereich eingebunden. Jedoch wird der Medientyp zunächst auf einen ungültigen Wert gesetzt, z.B. NULL. Der Browser lädt die CSS-Datei trotzdem, wendet sie jedoch nicht an, da der Medientyp unbekannt ist. Nachdem das Rendering beendet ist, wird vor dem schließenden BODY-Tag mit etwas JavaScript-Code der Medientyp auf einen gültigen Wert umgeschaltet, z.B. "all" oder "screen". Damit die Inhalte "Above the fold" vor der Umschaltung ansehnlich dargestellt werden, kann man außerdem die kritischen CSS-Stile im HEAD-Bereich inline einfügen. 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="allestile.css" media="NULL" id="styles">
</head>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="allestile.css" media="all">
</noscript>
</body>Nach der Umschaltung mit JavaScript sähe der LINK-Tag im HEAD-Bereich wie folgt aus.
<link rel="stylesheet" type="text/css" href="allestile.css" media="all" id="styles">Erläuterung zu dem Verfahren
Im HEAD-Bereich werden die kritischen CSS-Angaben eingefügt. Hierbei kann man die wichtigsten CSS-Stile inline unterbringen und dafür sorgen, dass der Bereich "Above the fold" ansehnlich aussieht. Dem LINK-Tag wird diesmal mit id="..." eine eindeutige ID zugewiesen. Das ist notwendig, damit das Element später von JavaScript angesprochen werden kann. Mit media="..." wird der Medientyp initial auf einen ungültigen Wert gesetzt. Das Rendering wird danach nicht blockiert, trotzdem wird die CSS-Datei asynchron geladen. Vor dem schließenden BODY-Tag wird mit JavaScript der Medientyp von "NULL" auf "all" umgeschaltet. So kann man erreichen, dass zumindest der Großteil der CSS-Angaben das Rendering nicht blockieren und die CSS-Datei nicht erst später geladen wird. Auch bei dieser Variante ist ein Fallback für Benutzer ohne aktiviertem JavaScript innerhalb des NOSCRIPT-Tags sinnvoll. Die JavaScript-Codes sind nur Beispiele und sollten ggf. individuell angepasst werden. Daneben gibt es noch weitere Möglichkeiten mit JavaScript.