: lang () - Triky CSS

Anonim

:lang()Volič pseudo trieda CSS zápasov prvky založené na kontextu daných atribútom jazyka. Jazyk v jazyku HTML je určený kombináciou lang=""atribútu, prvku a informácií z protokolu, ako je napríklad pole HTTP Accept-Languagerequest-header 1 . Prijateľné reťazce jazykových kódov sú uvedené v špecifikácii HTML 4.0.

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

:lang(X)sa zhoduje, ak je element v jazyku X. To, či je zhoda založená iba na tom, že identifikátor X je buď rovný, alebo pomlčkou oddelený podreťazec jazykovej hodnoty prvku, rovnakým spôsobom, akoby bol vykonaný znakom „| =“ operátor. Priraďovanie X k jazykovej hodnote prvku sa pri znakoch v rozsahu ASCII vykonáva bez rozlišovania malých a veľkých písmen. Identifikátor X nemusí byť platný názov jazyka. Je dôležité poznamenať, že :langselektor je možné použiť globálne alebo konkrétne na akýkoľvek daný prvok. Pokojne použite potomkove selektory alebo :lang(language-code)samotnú pseudotriedu.

Príklad

Pomocou langatribútu na našom koreňovom prvku (tj. ) Môžeme nahradiť úvodzovky v závislosti od zadaného jazyka.


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

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.

Francúzština (fr)

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.

Nemčina (de)

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.

Atribút language nemožno použiť na nasledujúce prvky:

  • applet
  • základňa
  • basefont
  • br
  • rám
  • sada rámov
  • iframe
  • param
  • scenár

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Áno Áno Áno Áno Áno Áno Áno

:lang(X) je odporúčaním špecifikácie CSS úrovne 2, revízia 1 a originálne sa odporúča ako súčasť špecifikácie CSS úrovne 2, špecifikácia.

1 Polia hlavičky HTTP sú súčasťou hlavičky správy požiadaviek a odpovedí v protokole Hypertext Transfer Protocol (HTTP). Definujú prevádzkové parametre transakcie HTTP. Pole Accept-Languagehlavičky požiadavky je podobné ako Prijať, ale obmedzuje množinu prirodzených jazykov, ktoré sú preferované ako odpoveď na požiadavku.