CSS bietet im Webdesign die Möglichkeit, bestimmte stilistische Bausteine, die in den HTML-Dokumenten genutzt werden, zentral in einer Datei zu speichern und für alle HTML-Dokumente zu nutzen.
Was ist CSS?
CSS steht für Cascading-Style-Sheets und ist eine Möglichkeit für HTML-Dokumente, den Inhalt einer Seite von den Designanweisungen der einzelnen Elemente, wie zum Beispiel Überschriften, Zitaten etc, zu entkoppeln.
Mann kann eine CSS-Datei für eine Domain erstellen und diese auf allen Unterseiten als externe Ressource einbinden. Dies kann viel Zeit sparen, wenn feste Vorgaben für meine Designelemente vorhanden sind, die sich zwischen Dokumenten nicht ändern.
Der kaskadierende Teil wird dann klar, wenn man sich mit verschiedenen Klassen beschäftigt. So kann man in der CSS-Datei zB festlegen, dass alle H2-Überschriften (Eltern-Element) in Schriftgröße 46 ausgespielt werden und dann eine Unterklasse der H2-Überschriften einfügen (Kind-Element) die den Text fett druckt, wenn eine bestimmte Klasse (zB. „fett“) definiert wird.
Im Dokument muss ich bei der Unterklasse nicht noch einmal die Anweisung zur Schriftgröße wiederholen, da diese von der übergeordneten Anweisung vererbt wird (überschwappt).
Mit dieser Anweisung bekommt jedes <h2>-Element die Schriftgröße 42 und nur Überschriften mit <h2 class="fett"> werden auch Fett gedruckt.
Warum gibt es Cascading-Style-Sheets?
Die Möglichkeit, das Design von dem Inhalt eines Dokuments zu entkoppeln bringt merkbare Geschwindigkeitsvorteile. Die einzelnen HTML-Dokumente werden kürzer, da die Design-Anweisungen ausgelagert sind.
Außerdem muss der Webseitenbetreiber nicht bei jedem Dokument darauf achten, dass alle notwendigen Design-Anweisungen vorhanden sind. Dies kann den Verwaltungsaufwand, besonders bei sehr vielen Dokumenten, immens verringern.
Zudem kann ich Browsern mitteilen, wie lange die CSS-Datei nutzbar ist (und sie gecached werden kann). Damit muss der Browser die Datei nicht jedes mal neu herunterladen, was der Ladezeit zugute kommt.
Wie kann ich CSS-Informationen an ein Dokument übergeben?
Es gibt verschiedene Möglichkeiten CSS in einem HTML Dokument einzubetten. Die beiden häufigsten sind das Verlinken einer externen CSS-Datei sowie das direkte Einbetten innerhalb eines HTML Dokuments.
Externe CSS-Datei
Am einfachsten ist es meistens, alle Style-Informationen in einer CSS-Datei zusammenzufassen und diese im <head>-Teil des HTML-Dokuments zu referenzieren:
<link href="https://www.meine-domain.de/assets/css/mein-stylesheet.css"
rel="Stylesheet" type="text/css" />Hiermit sagt man dem Browser, dass die Datei „mein-stylesheet.css“ geladen werden muss um den Inhalt des HTML-Dokuments korrekt anzuzeigen.
Inline-CSS
Man kann sich auch dafür entscheiden, einen Teil meines Style-Sheets direkt, innerhalb des <head>-Bereichs des HTML-Dokuments hinzuzufügen.
Dafür nutzt man einen <style>-Tag. Wenn man zum Beispiel eine Klasse erstellen möchte, die sicherstellt, dass Bilder auf mobilen Endgeräten responsive ausgeliefert werden, kann man folgendes direkt in den <head> des Dokumentes schreiben:
<style>
.img-responsive {
display:block;
max-width:100%;
height:auto;
}
</style>Der Browser wüsste jetzt, dass alle Elemente, bei denen ein class="img-responsive" gesetzt ist, die obigen Style-Answeisungen nutzen sollen.
Nutzung von CSS für die Suchmaschinenoptimierung
Durch die Möglichkeit, Style-Angaben einmalig zu definieren und auf allen Unterseiten umzusetzen, bringt natürlich auch Vorteile für die Suchmaschinenoptimierung.
Durch entsprechende Anweisungen in einer CSS-Datei kann man genau festlegen, wie ein Dokument von einem Desktop und/oder einem mobilen Browser angezeigt wird. Man kann also einmal ein Responsives-Design erstellen und alle Unterseiten können davon profitieren, sodass keine zwei Versionen für Desktop und Mobile benötigt werden.
Zudem wurde CSS über die Jahre hinweg genutzt um die Ladegeschwindigkeit bei vielen Webseiten zu erhöhen. Dies wurde dann nötig, wenn viele Dateien zur korrekten Darstellung der Webseite benötigt wurden.
Eine Fülle von Anfragen hat im älteren HTTP-Standard, HTTP/1.1, dazu geführt, dass die Ladezeit alleine aus dem Grund verlängert wurde, da der Browser nur eine maximale Anzahl von Verbindungen erstellen durfte.
Mit dem neuen Standard HTTP/2 fällt diese Einschränkung weg.
CSS und HTTP/1.1
Bei HTTP/1.1 lassen die meisten Browser vereinfacht gesagt nur 6 gleichzeitige Verbindungen pro Host zu. Zudem werden die Verbindungen nach der Übertragung der Ressource terminiert. Hierdurch können alleine durch die Latenz (die sich besonders gerne bei mobilen Verbindungen bemerkbar macht) erhöhte Ladezeiten aufkommen.
Man kann zudem Grafikelemente, die auf der Webseite genutzt werden, als ein großes Image-Sprite laden und dann über CSS nur die Teile des Bildes anzeigen, die die benötigte Grafik beinhalten.
CSS und HTTP/2
Mit dem neuen HTTP-Standard 2.0 wird die Begrenzung der maximalen Verbindungen gelockert und auch können die Verbindungen für mehr als eine Ressource genutzt werden. Hierdurch spielt die Latenz des Verbindungsaufbaus eine weitaus geringere Rolle in der Seitengeschwindigkeit.
Fazit zu den Cascading-Style-Sheets
CSS ist nicht aus dem Webdesign wegzudenken und es macht durchaus Sinn, sich als SEO mit den Möglichkeiten auseinanderzusetzen, die Cascading-Style-Sheets bieten.
Besonders wenn es um die PageSpeed-Optimierung geht, kann auch heute noch die Zeit zum First-Contentful-Paint durch die Nutzung von Inline-CSS verkürzt werden.
