: lang () - CSS-tricks

Anonim

Den :lang()pseudo klass väljaren i CSS matchar element baserat på ramen för deras givet språk attribut. Språk i HTML bestäms av en kombination av lang=""attributet, elementet och av information från protokollet, till exempel HTTP- Accept-Languagebegäran-rubrik 1- fältet. Godtagbara språkkodsträngar anges i HTML 4.0-specifikationen.

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

:lang(X)matchar om elementet är i språk X. Huruvida matchningen enbart baseras på att identifieraren X är antingen lika med eller ett bindestreck-avgränsat underlag av elementets språkvärde, på samma sätt som om det utfördes av “| =“ operatör. Matchningen av X mot elementets språkvärde utförs skiftlägeskänsligt för tecken inom ASCII-intervallet. Identifieraren X behöver inte vara ett giltigt språknamn. Det är viktigt att notera att :langväljaren kan användas global eller specifikt på ett visst element. Använd gärna efterkommande väljare eller enbart :lang(language-code)pseudoklassen.

Exempel

Med hjälp av langattributet på vårt rotelement (dvs. ) kan vi ersätta citat beroende på vilket språk som anges.


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

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

Franska (fr)

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

Tyska (de)

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

Språkattributet kan inte tillämpas på följande element:

  • applet
  • bas
  • basfont
  • br
  • ram
  • ramuppsättning
  • iframe
  • param
  • manus

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Japp Japp Japp Japp Japp Japp Japp

:lang(X) är en rekommendation från CSS Nivå 2 Revision 1-specifikationen och rekommenderas som en del av CSS Nivå 2-specifikationen.

1 HTTP-rubrikfält är komponenter i meddelandehuvudet för förfrågningar och svar i Hypertext Transfer Protocol (HTTP). De definierar driftsparametrarna för en HTTP-transaktion. Den Accept-Languagebegäran-rubrikfältet liknar Acceptera, men begränsar den uppsättning av naturliga språk som föredras som ett svar på begäran.