CSS :lang() Pseudo-Klasse

Die :lang()-Pseudo-Klasse wählt Elemente basierend auf der Sprache, in der sie verfasst sind. Sie ermöglicht es, verschiedenen Stile auf Inhalte in unterschiedlichen Sprachen anzuwenden – zum Beispiel französische Anführungszeichen für französischen Text und englische Anführungszeichen für englischen Text – aus einem einzigen Stylesheet.

Diese Seite erklärt, wie der Browser die Sprache eines Elements bestimmt, wie sich :lang() vom [lang]-Attributselektor unterscheidet, welche typografischen Probleme es löst und welche Fallstricke zu beachten sind.

Wie die Sprache bestimmt wird

Eine :lang(xx)-Regel trifft auf ein Element zu, wenn dessen Sprache xx ist (oder eine Untervariante von xx). Der Browser ermittelt die Sprache eines Elements anhand des nächsten Vorfahren, der eine Sprache deklariert, und zwar in dieser Reihenfolge:

Das HTML-Attribut lang, z. B. <html lang="it"> oder <p lang="fr">. Dies ist die häufigste Quelle. Siehe HTML-Sprachcodes für die vollständige Liste der Werte.
Die <meta> Content-Language-Deklaration.
Der vom Server gesendete HTTP-Antwortheader Content-Language.

Sprachwerte folgen BCP 47: ein primäres Subtag wie it (Italienisch) oder fr (Französisch), optional mit einem Regions-Subtag, wie fr-CA für kanadisches Französisch oder en-GB für britisches Englisch.

`:lang()` vs. der `[lang]`-Attributselektor

Es ist verlockend, [lang="fr"] anstelle von :lang(fr) zu schreiben, aber sie verhalten sich unterschiedlich:

:lang(fr) wird vererbt. Es trifft auf jedes Element innerhalb einer französischen Region zu, auch auf solche ohne eigenes lang-Attribut, und es stimmt mit Untervarianten überein – :lang(fr) trifft auch auf lang="fr-CA" zu.
[lang="fr"] trifft nur auf das genaue Element zu, das buchstäblich lang="fr" trägt. Es trifft nicht auf Nachkommen zu und nicht auf lang="fr-CA".

Kurz gesagt: Verwende :lang(), um Inhalte nach Sprache zu gestalten, und verwende den Attributselektor nur, wenn du gezielt den Attributstring selbst abgleichen musst.

/* Matches the <html> tag AND every element inside it,
   including lang="fr-CA". */
:lang(fr) {
  font-style: italic;
}

/* Matches ONLY an element with exactly lang="fr". */
[lang="fr"] {
  font-style: italic;
}

Wann würde ich es verwenden?

Der klassische Anwendungsfall sind sprachlich korrekte Anführungszeichen. Verschiedene Sprachen verwenden unterschiedliche Anführungszeichen: Englisch verwendet geschweifte "…", Französisch verwendet Guillemets « … », Deutsch verwendet „…". Durch die Kombination von :lang() mit der quotes-Eigenschaft und dem <q>-Element erscheinen die richtigen Zeichen automatisch basierend auf der umgebenden Sprache. Weitere Verwendungszwecke umfassen sprachspezifische Schriften, Zeilenabstände oder Silbentrennung (oft kombiniert mit font-language-override).

Syntax

:lang(language-code) {
  /* declarations */
}

language-code ist ein einzelnes Sprach-Tag wie en, fr oder fr-CA. Die Pseudo-Klasse wird typischerweise an einen Typselektor angehängt oder mit ihm kombiniert, z. B. p:lang(fr) oder :lang(en) > q.

Beispiel: Text nach Sprache gestalten

Die folgende Regel zielt auf jeden <p>, der auf Französisch ist (lang="fr"), und lässt andere Absätze unberührt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:lang(fr) {
        background: #1c87c9;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <p>I am from France.</p>
    <p lang="fr">Je m'appelle Ann</p>
  </body>
</html>

Probier es selbst »

Beispiel: Sprachlich korrekte Anführungszeichen

Hier wird :lang() mit dem Kind-Kombinator (>) und der quotes-Eigenschaft kombiniert, sodass jedes <q>-Element die Interpunktion erhält, die seiner Sprache entspricht – gerade englische Anführungszeichen im englischen Block und französische Guillemets im französischen Block.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :lang(en) > q {
        quotes: '\201C' '\201D' '\2018' '\2019';
      }
      :lang(fr) > q {
        quotes: '« ' ' »';
      }
    </style>
  </head>
  <body>
    <h2>:lang() selector example</h2>
    <div lang="en">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
    <div lang="fr">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
  </body>
</html>

Probier es selbst »

Häufige Fallstricke

Das lang-Attribut muss vorhanden sein. :lang() funktioniert nur, wenn irgendwo im Elementbaum tatsächlich eine Sprache deklariert ist. Wenn dein Dokument kein lang-Attribut hat, trifft nichts zu. Füge <html lang="en"> (oder den richtigen Code) zum Seitenstamm hinzu.
Unter-Tags stimmen überein, aber nicht umgekehrt. :lang(fr) stimmt mit lang="fr-CA" überein, aber :lang(fr-CA) stimmt nicht mit einem einfachen lang="fr" überein. Ziele auf das übergeordnete Tag (fr), es sei denn, du benötigst wirklich eine regionale Variante.
Es wird Groß-/Kleinschreibung nicht unterschieden. :lang(EN) und lang="en" stimmen miteinander überein; Sprach-Tags werden ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen.

Browserunterstützung

:lang() mit einem einzelnen Sprach-Tag wird in allen modernen Browsern unterstützt (und sogar bis zurück zum Internet Explorer 8). Die neuere kommagetrennte Form :lang(en, fr) ist nur in neueren Browserversionen verfügbar, daher solltest du für eine möglichst breite Unterstützung bei einem Tag pro Selektor bleiben.

Übungen

Übung

Was bewirkt die :lang-Pseudo-Klasse in CSS?

Sie ermöglicht die Auswahl von Elementen mit einem bestimmten Sprachattribut.Sie erlaubt es, Text in einer bestimmten Sprache zu gestalten.Sie ermöglicht die Übersetzung von Text von einer Sprache in eine andere.Sie ermöglicht die Anwendung unterschiedlicher Stile auf verschiedene Textbereiche.Sie ändert die Sprache des Textes.