Umlaute in CSS: Die Ergänzung

Nachdem wir uns im letzten Beitrag angesehen haben, wie man Umlaute in HTML bändigt, gehen wir heute einen Schritt weiter. Wer Inhalte nicht direkt im HTML-Code, sondern via CSS über die content-Eigenschaft einfügt (z. B. bei :before oder :after), wird feststellen: Die klassischen HTML-Entities wie ä funktionieren hier nicht!

Warum CSS eine Extrawurst braucht

In CSS-Dateien können wir keine HTML-Entities verwenden, da diese vom Browser nur innerhalb von HTML-Tags interpretiert werden. Wenn du Text über CSS einfügst, nutzt du stattdessen den ISO-Code des Zeichens in einer speziellen Hexadezimal-Schreibweise.

Die Syntax: Der Backslash macht’s

Um einen Umlaut in CSS darzustellen, verwendest du einen Backslash \ gefolgt vom Hex-Code des Zeichens.

Hier sind die häufigsten Umlaute für dein Stylesheet:

Einsatzbeispiel

/* Herkömmlich: Sollte meist funktionieren, aber störanfällig */
.pflichtfeld::before {
content: "Bitte ausfüllen: ";
}

/* Sicher: Mit dem CSS-Escape-Code */
.pflichtfeld::before {
content: "Bitte ausf\00FC llen: ";
}

Pro-Tipp: Wenn nach dem Escape-Code direkt ein Buchstabe folgt, setze ein Leerzeichen nach dem Code (wie im Beispiel oben). CSS erkennt das Leerzeichen als Ende des Codes und zeigt es im Browser nicht an.

Der moderne Weg: @charset

Genau wie in HTML kannst du auch in CSS den Zeichensatz definieren. Denk aber daran, dass die Datei auch entsprechend abgespeichert ist (Die Textdatei mit dem Quelltext als UTF-8 speichern). Dann kannst du Umlauter im Quelltext verwenden, die dann auch richtig angezeigt werden. Füge dazu ganz oben in deine CSS-Datei folgende Zeile ein:

@charset "UTF-8";

Umlaute in HTML vs. CSS

Warum der Unterschied?

CSS-Escapes nutzen die hexadezimale Unicode-Nummer. Das ist nötig, da CSS eine andere Syntax-Logik verfolgt, um Zeichen in Pseudo-Elementen wie ::after darzustellen.

HTML-Entities nutzen Namen oder Dezimalzahlen. Sie sind für den Einsatz direkt im HTML-Markup laut W3C gedacht.