: lang () - CSS-хитрощі

Anonim

:lang()Селектор псевдо - клас в CSS відповідає елементи на основі контексту їх даного атрибута мови. Мова в HTML визначається комбінацією lang=""атрибута, елемента та інформацією з протоколу, такою як поле HTTP Accept-Language-заголовка 1 . Прийнятні рядки коду мови вказані в специфікації HTML 4.0.

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

:lang(X)збігається, якщо елемент перебуває на мові X. Чи збіг базується виключно на ідентифікаторі X, який дорівнює або підрядку, відокремленому дефісом, значення мови елемента, точно так само, як якщо б виконувався параметром “| =“ оператора. Зіставлення X із значенням мови елемента виконується без урахування регістру для символів у діапазоні ASCII. Ідентифікатор X не повинен бути дійсним ім'ям мови. Важливо зазначити, що :langселектор можна використовувати в усьому світі або спеціально для будь-якого даного елемента. Не соромтеся користуватися селекторами нащадків або :lang(language-code)псевдокласом самостійно.

Приклад

Використовуючи langатрибут нашого кореневого елемента (тобто ), ми можемо замінити лапки залежно від вказаної мови.


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: '»' '«'; )
Англійська (uk)

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. Eenean ultricies mi vitae est. Mauris placerat eleifend leo.

Французька (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. Eenean ultricies mi vitae est. Mauris placerat eleifend leo.

Німецька (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. Eenean ultricies mi vitae est. Mauris placerat eleifend leo.

Атрибут мови не можна застосувати до таких елементів:

  • аплет
  • база
  • basefont
  • бр
  • кадру
  • набір кадрів
  • iframe
  • парам
  • сценарій

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Так Так Так Так Так Так Так

:lang(X) є рекомендацією специфікації CSS Level 2 Revision 1 і спочатку рекомендується як частина специфікації CSS Level 2.

1 Поля заголовка HTTP є компонентами заголовка повідомлення запитів та відповідей у ​​протоколі передачі гіпертексту (HTTP). Вони визначають робочі параметри HTTP-транзакції. Поле Accept-Languageзаголовка запиту схоже на Accept, але обмежує набір природних мов, які є кращими як відповідь на запит.