Перевод статических блоков сайта средствами CSS

Привет всем! В данной статье речь пойдет о том, как можно красиво и удобно создать множество переводов сайта, без нагрузки на серверную часть и не плодя множество файлов. Сразу оговорюсь, что устаревшие на сегодняшний день браузеры (IE 7 и ниже) под данную категорию не попадают. Суть метода, без воды: Текстовые блоки html не содержат текст, содержат лишь идентификатор смысла перевода в виде какого-либо атрибута, например

<div p="mainmenu"></div>

, либо можно создать глобальный div.

html[lang="en"] [p="mainmenu"]:after{ content:" Main menu";}
html[lang="ru"] [p="mainmenu"]:after{ content:" Главная";}

Преимущества

• Не требует нагрузки на сервер
• Не требует перегрузки страницы
• Переводятся все блоки на странице, включая динамически подгружаемый контент
• Переводы Легко обновлять, дополнять
• CSS файл кэшируется на стороне клиента и не создает нагрузки на трафик

Недостатки

• Пользователи браузеров IE 7 и ниже не увидят ничего
• Не все поисковики умеют индексировать css контент
• Для больших фраз данный способ перевода не подходит

Переключения языков происходят по смене единственного атрибута у тега html при помощи Javascript. Можно сюда подключить геолокацию, Куки, либо webstorage. Как выяснилось в дальнейшем, для движков webkit – необходимо также для всех элементов произвести какую-либо манипуляцию, чтобы могло пройти обновление (например убрать несуществующий класс). Целиком функция смены языка на странице выглядит примерно следующим образом

function setlang(lang){$('html').attr('lang',lang);$('*').removeClass('l');}

Как вариант – для решения недостатков – можно использовать на всех страницах один язык через html, и по желанию пользователя – при выборе его родного языка – ко всем пунктам меню будет дополнен его родной перевод, через разделитель. Метод не претендует на оригинальность. Возможно окажется полезным Пример работы переводчика можно посмотреть на примере html5 веб игры Transmania (штурвал смены языка находится в правом верхнем углу)

Когда языков слишком много - можно грузить основные в CSS, или генерить css динкамически, но лучше использовать стандартные средства