Automatisch generierter Content vor oder nach Inhalten

Die Pseudo-Elemente ::before und ::after

In CSS3 gibt es neben den Pseudo-Klassen :hover oder :nth-child die beiden Pseudo-Elemente ::before und ::after. Pseudo-Elemente werden syntaktisch korrekt durch zwei Doppelpunkte eingeleitet - es funktioniert aber auch mit nur einem Doppelpunkt, da moderne Browser auch noch den einfachen Doppelpunkt untertstützen. Der doppelte Doppelpunkt soll den Unterschied zwischen Pseuo-Klasse und -Element verdeutlichen.

SVG-Sprites

Ein Sprite (engl. unter anderem für ein Geistwesen, Kobold) ist eine Grafikdatei, die viele Symbole bzw. Icons enthält. Diese Grafikdatei fasst also mehrere Grafiken zusammen und spart damit Ladezeit, da die Grafiken nicht einzeln geladen werden müssen; die HTTP-Requests werden dadurch ebenfalls reduziert. Die einzelnen Elemente (Icons, Buttons oder Hintergrundbilder) werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.

Responsive Hintergrundbilder

Möchte man ein Foto mit einem Motiv in den Hintergrund einer Website legen, so passt sich dieses nicht automatisch an die Bildschirmgröße an. Normalerweise legt man ein Bild mit einer festen Höhe und Breite über das background-Tag in den Hintergrund. Ohne weitere Angaben wird das Bild dann gekachelt (also nach rechts und unten wiederholt), wenn die Bildschirmanzeige größer als das Bild ist.

CSS-Editor: TopStyle Lite 3.10

Neben zahlreichen HTML-Editoren, die CSS-Unterstützung bieten, existieren eine ganze Reihe reiner CSS-Editoren. Sie konzentrieren sich auf die Erstellung der Style Sheets. Der Vorteil dieser Spezialisten ist, dass die korrekte Syntax vorgegeben wird. Zusätzlich werden Schreibfehler weitgehend vermieden.

Bildunterschriften

Bildunterschriften stellen in der HTML-Programmierung immer wieder ein Problem dar. Ein spezielles Tag (Befehl) für eine Bildunterschrift existiert in HTML bzw. XHTML nämlich nicht. Das Problem besteht in der Verknüpfung von Bild und Bildunterschrift als Einheit und dem Erhalt des Layouts bei Vergrößerung der Schrift. Das Tutorial Bildunterschriften mit CSS stellt die Möglichkeit der Umsetzung von Bildunterschriften in einer Definitionsliste bzw. einer DIV-Box vor.

Druckversion

Da für unterschiedliche Ausgabemedien, wie beispielsweise Bildschirm und Drucker, jeweils andere Gesetze gelten, kann per Cascading Style Sheets gesondert auf diese Gegebenheiten eingegangen werden. So ist das Layout am Bildschirm als Querformat angelegt; der Drucker hingegen gibt den Inhalt einer Bildschirm-Seite standardmäßig im Hochformat aus. Hierdurch kann es u. U. vorkommen, dass Textteile vom rechten Rand abgeschnitten werden.

Formulardesign

Formulare, wie beispielsweise die Abfrage für einen Newsletter, stellen sich allein mittels reinem HTML recht unschön dar. So können die Eingabefelder nicht gleichweit eingerückt werden, da in HTML keine Tabulatoren existieren. Die Lösung: entweder Sie verwenden eine Tabelle oder sie nutzen die Möglichkeiten zur Positionierung mittels CSS.

Tabellen aufpeppen

Datentabellen (z. B. Fahrpläne oder Ergebnislisten) sollten möglichst leserlich gestaltet werden. So erhöhen Sie die Lesbarkeit z. B. durch farblich hervorgehobene Zeilen. Wie das geht erfahren Sie im Tutorial Tabellen aufpeppen.

Listen gestalten

Listen können z. B. mit einem eigenen Listensymbol (Grafik) als Aufzählungszeichen versehen werden. Wie man es schafft, die Einrückung von Listenelemente zu unterbinden, lesen Sie im Tutorial Listen gestalten.

Tabellenlayouts

Durch die Auslagerung der Formatierungen, wie z. B. Schriftart, -größe und -farbe sowie Hintergrundfarben gewinnen Tabellenlayouts an Übersichtlichkeit. Außerdem wirkt sich eine Änderung in der externen CSS-Datei auf alle HTML-Seiten gleichermaßen aus, was den Pflegeaufwand erheblich reduziert. So können Sie schnell die Hintergrundfarbe ändern, ohne sämtliche Seiten einzeln zu bearbeiten.