: 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: '»' '«'; )
Английский (en)

Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum toror 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.

Французский (фр)

Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum toror 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.

Немецкий (de)

Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum toror 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.

Атрибут языка нельзя применить к следующим элементам:

  • апплет
  • основание
  • basefont
  • br
  • Рамка
  • набор фреймов
  • iframe
  • парам
  • сценарий

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
Ага Ага Ага Ага Ага Ага Ага

:lang(X) является рекомендацией спецификации CSS Level 2 Revision 1 и изначально рекомендуется как часть спецификации CSS Level 2.

1 Поля заголовка HTTP являются компонентами заголовка сообщения запросов и ответов в протоколе передачи гипертекста (HTTP). Они определяют рабочие параметры HTTP-транзакции. Поле Accept-Languageзаголовка запроса похоже на Accept, но ограничивает набор естественных языков, которые предпочтительны в качестве ответа на запрос.