Мультиязычность силами CSS

589
views

Есть множество способов реализации многоязычности сайта, но в данном посте я хочу написать про самый простой, но в то же время самым оригинальным способом решения данной задачи. А именно написание текста элементов в зависимости от языка силами одного лишь CSS. Сразу оговорю, что данным метод практичен разве что для интернационализации мелких элементов пользовательского интерфейса.

Итак приступим.

Псевдокласс :lang

Еще со времен CSS2 существует такой псевдо-класс как :lang. Он предназначался для стилизации элементов в зависимости от языка документа. Примером является различное написание кавычек для цитат, которые устанавливаются тегом <q></q>.

:lang(fr) > q { quotes: '« ' ' »' }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A' }

Выше приведен пример как задать определенное отображение кавычек в зависимости от значения атрибута lang. Притом атрибут этот можно задать лишь тегу <html> вначале страницы.

 <html lang='ru'>

Существенной разницей между псевдоклассом :lang и простым селектором по атрибуту вроде [lang=ru], является то, что последний работает только для тех элементов, у которых указан атрибут lang. Следовательно, псевдокласс :lang более надежен, чем вариант с атрибутом, так как он работает должным образом даже когда атрибут :lang для элемента не прописан.

Пример с кавычками неплох, но он охватывает очень ограниченное количество задач, а хотелось бы чего-то более полезного, а точнее полного изменения отображаемого содержимого элемента в зависимости от языка нашего мультиязычного сайта.

Изменения содержимого элемента средствами CSS

В браузерах, поддерживающих спецификацию CSS2, были представлены псевдо-элементы, которые вместо того, чтобы описывать определённое состояние как псевдоклассы, позволяют стилизировать определённые части документа.

::before и ::after являются настоящими жемчужинами, так как позволяют добавлять дополнительный контент перед или после innerHTML элемента. Возможно, в них и нет ничего замысловатого, однако можно привести уйму практических примеров, когда они позволяют решить задачу не захламляя код.

Начнём с основ. И ::before, и ::after вводят новое свойство CSS, content. Это свойство определяет, какой контент нужно добавить перед или после innerHTML элемента. Значением атрибута content может быть любое из следующего:

  • текстовая строка (но не строка с HTML),
  • изображение,
  • счётчик,
  • значение атрибута.

В данном случае нас интересует добавление строки. Для примера взглянем на данный код:

#hello::before {
   content: "Hello ";
}

Если элемент с id hello содержит строку world, браузер отобразит Hello world. С этим ясно. Разовьем тему…

Теперь представьте, что у элемента с id hello нет содержимого. Тогда с помощью CSS его представление можно менять полностью. Синтезируем вышесказанное с псевдоклассом :lang.

#hello::before {
   content: "Hello";
}
#hello:lang(de)::before {
   content: "Hallo";
}

Теперь наш элемент hello будет меняться в зависимости от языка текущей страницы — для изменения его представления не нужно вызывать никакие функции. Локализация осуществляется на основе значения атрибута lang для элемента <html> и нескольких дополнительных CSS-правил.

Но повторюсь, данный метод думаю имеет право на существование лишь для небольших элементов интерфейса, таких как: кнопки, подсказки, валидация для форм, и прочих внутренних элементов сайта.