: lang () - CSS-Tricks

Anonim

Der :lang()Pseudoklassen-Selektor in CSS stimmt mit Elementen überein, die auf dem Kontext des angegebenen Sprachattributs basieren. Die Sprache in HTML wird durch eine Kombination des lang=""Attributs, des Elements und durch Informationen aus dem Protokoll wie dem Feld HTTP- Accept-LanguageAnforderungsheader 1 bestimmt . Akzeptable Sprachcode-Zeichenfolgen sind in der HTML 4.0-Spezifikation angegeben.

:lang(language-code) ( // whatever styling )

:lang(X)stimmt überein, wenn sich das Element in Sprache X befindet. Gibt an, ob die Übereinstimmung ausschließlich darauf basiert, dass der Bezeichner X entweder dem Sprachwert des Elements entspricht oder durch einen Bindestrich getrennt ist, wie dies durch das „| =“ ausgeführt wird. Operator. Der Abgleich von X mit dem Sprachwert des Elements wird für Zeichen innerhalb des ASCII-Bereichs ohne Berücksichtigung der Groß- und Kleinschreibung durchgeführt. Der Bezeichner X muss kein gültiger Sprachname sein. Es ist wichtig zu beachten, dass der :langSelektor global oder spezifisch für ein bestimmtes Element verwendet werden kann. Sie können auch Nachkommen-Selektoren oder die :lang(language-code)Pseudoklasse allein verwenden.

Beispiel

Mit dem langAttribut für unser Stammelement (dh ) können wir Anführungszeichen abhängig von der angegebenen Sprache ersetzen.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

q:before ( content: open-quote; ) q:after ( content: close-quote; ) :lang(en) q ( quotes: '“' '”'; ) :lang(fr) q ( quotes: '«' '»'; ) :lang(de) q ( quotes: '»' '«'; )
Englisch (en)

Pellentesque Habitant Morbi Tristique Senectus und Netus und Maleuada sind bekannt für Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sitzen amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Französisch (fr)

Pellentesque Habitant Morbi Tristique Senectus und Netus und Maleuada sind bekannt für Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sitzen amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Deutsch (de)

Pellentesque Habitant Morbi Tristique Senectus und Netus und Maleuada sind bekannt für Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sitzen amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Das Sprachattribut kann nicht auf die folgenden Elemente angewendet werden:

  • Applet
  • Base
  • Basisschrift
  • br
  • Rahmen
  • Frameset
  • iframe
  • param
  • Skript

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Ja Ja Ja Ja Ja Ja Ja

:lang(X) ist eine Empfehlung der CSS Level 2 Revision 1-Spezifikation und wird ursprünglich als Teil der CSS Level 2-Spezifikation empfohlen.

1 HTTP-Headerfelder sind Bestandteile des Nachrichtenkopfs von Anforderungen und Antworten im Hypertext Transfer Protocol (HTTP). Sie definieren die Betriebsparameter einer HTTP-Transaktion. Das Accept-LanguageFeld für den Anforderungsheader ähnelt dem Feld Akzeptieren, schränkt jedoch den Satz natürlicher Sprachen ein, die als Antwort auf die Anforderung bevorzugt werden.