: lang () - CSS-tricks

Anonim

Den :lang()pseudo klasse vælgeren i CSS matcher elementer baseret på for rammerne af deres givet sprog attribut. Sprog i HTML bestemmes af en kombination af lang=""attributten, elementet og af oplysninger fra protokollen, såsom feltet HTTP- Accept-Languageanmodning-header 1 . Acceptable sprogkodestrenge er specificeret i HTML 4.0-specifikationen.

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

:lang(X)matcher, hvis elementet er på sprog X. Uanset om matchet udelukkende er baseret på, at identifikatoren X enten er lig med eller en bindestregesepareret delstreng af elementets sprogværdi på samme måde som hvis den blev udført af “| =“ operatør. Tilpasningen af ​​X med elementets sprogværdi udføres ufølsomt for tegn inden for ASCII-området. Identifikatoren X behøver ikke at være et gyldigt sprognavn. Det er vigtigt at bemærke, at :langvælgeren kan bruges globalt eller specifikt på et givet element. Du er velkommen til at bruge efterkommere eller :lang(language-code)pseudoklassen alene.

Eksempel

Ved hjælp af langattributten på vores rodelement (dvs. ) kan vi erstatte anførselstegn afhængigt af det angivne sprog.


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: '»' '«'; )
Engelsk (en)

Pellentesque habitant morbi tristique senectus et netus et malesuada berømmer 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.

Fransk (fr)

Pellentesque habitant morbi tristique senectus et netus et malesuada berømmer 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.

Tysk (de)

Pellentesque habitant morbi tristique senectus et netus et malesuada berømmer 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.

Sprogattributten kan ikke anvendes på følgende elementer:

  • applet
  • grundlag
  • basefont
  • br
  • ramme
  • rammesæt
  • iframe
  • param
  • manuskript

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Ja Ja Ja Ja Ja Ja Ja

:lang(X) er en anbefaling af CSS niveau 2 revision 1 spec og anbefales orignalt som en del af CSS niveau 2 specifikation.

1 HTTP-headerfelter er komponenter i beskedens header på anmodninger og svar i Hypertext Transfer Protocol (HTTP). De definerer driftsparametrene for en HTTP-transaktion. Feltet med Accept-Languageanmodningsoverskriften svarer til Accepter, men begrænser det sæt af naturlige sprog, der foretrækkes som svar på anmodningen.