Локализация html-страницы средствами CSS

Люди по-разному относятся к CSS. Кто-то ворчит, что раньше и таблицы были зеленее, кто-то горячится, мол, дайте мне ваши таблицы, уж я их озеленю. Лично я довольно давно воспринимаю CSS-файлы как совего рода конфиги для внешнего вида веб-страницы. По сути ведь так и есть. У хорошего верстальщика HTML используется для того, чтобы создать структуру документа, у которой затем с помощью CSS настраивается внешнее отображение.

Обычно под внешним отображением понимаются всякие красоты вроде изображений, круглых уголков, градиентиков и прочей вебдванольности. Однако основным средством передачи информации в Интернете до сих пор является их величество текст. Текст применяется везде: и в навигации по сайту, и в основной информации.

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

Идея проста. Все верстальщики, работающие с CSS знают о таком свойстве как content:;, которое применяется к псевдоэлементам :after и :before. Чаще всего с помощью «волшебного» сочетания :after и content:; реализуют clear для «плавающих» блоков. Но вообще в content:; можно писать абсолютно любой текст. Без тегов, правда, но это разумное ограничение.

Как это можно использовать? Нужно создать два CSS-файла. Допустим, «en.css» и «ru.css». Основные стили блоков (цвета и прочие красивости) пусть определяются в файле «main.css».

<!-- HTML-код -->

<ul class="b-menu">
    <li class="b-menu__item b-menu__item_name_main"><span class="b-menu__curr"></span></li>
    <li class="b-menu__item b-menu__item_name_portfolio"><a class="b-menu__link" href=""></a></li>
    <li class="b-menu__item b-menu__item_name_team"><a class="b-menu__link" href=""></a></li>
    <li class="b-menu__item b-menu__item_name_contacts"><a class="b-menu__link" href=""></a></li>
</ul>

/* Содержание файла «main.css» *//**/

.b-menu:after
{
    content: '';
    display: block;
    clear: both;
}

.b-menu__item
{
    float: left;
}

/* Содержание файла «en.css» *//**/

.b-menu__item_name_main .b-menu__curr:after,
.b-menu__item_name_main .b-menu__link:after
{
    content: 'Main Page';
}

.b-menu__item_name_portfolio .b-menu__curr:after,
.b-menu__item_name_portfolio .b-menu__link:after
{
    content: 'Portfolio';
}

.b-menu__item_name_team .b-menu__curr:after,
.b-menu__item_name_team .b-menu__link:after
{
    content: 'Team';
}

.b-menu__item_name_contacts .b-menu__curr:after,
.b-menu__item_name_contacts .b-menu__link:after
{
    content: 'Contacts';
}

/* Содержание файла «ru.css» *//**/

.b-menu__item_name_main .b-menu__curr:after,
.b-menu__item_name_main .b-menu__link:after
{
    content: 'На главную';
}

.b-menu__item_name_portfolio .b-menu__curr:after,
.b-menu__item_name_portfolio .b-menu__link:after
{
    content: 'Портфолио';
}

.b-menu__item_name_team .b-menu__curr:after,
.b-menu__item_name_team .b-menu__link:after
{
    content: 'Команда';
}

.b-menu__item_name_contacts .b-menu__curr:after,
.b-menu__item_name_contacts .b-menu__link:after
{
    content: 'Контакты';
}

Дальше нужно просто подключить файлы в таком порядке: main.css, en.css, ru.css. Ну, или сначала ru.css, а en.css — потом. В зависимости от того, какой язык является основным. В принципе, ничто не мешает CSS-свойства по умолчанию запихнуть в main.css, а подключать только файл языка, выбранного пользователем. Я разбил на два файла исключительно для наглядности.

Плюсы:

+ Данный способ поддерживается всеми современными браузерами, включая IE восьмой и девятой версии, в том числе мобильными браузерами под iPhone и Android;

+ CSS-файл кешируется браузером, а это значит, что будучи скачанным однажды, он будет храниться у пользователя локально довольно долго (фактически пока с сервера не придет заголовок, сигнализирующий о необходимости обновить кеш);

+ Не нужно перегружать страницу, чтобы применить требуюемую локаль. Достаточно просто яваскриптом изменить href у тега <link>. Или создать новый тег <link> с нужным href.

Минусы (их, к сожалению, больше):

– ИЕ до восьмой версии не понимает свойство content:;, как и некоторые мобильные браузеры;

– Поисковые движки вряд ли проиндексируют тексты, записанные таким образом;

– Есть ряд ограничений к содержимого CSS-свойства content;

– Чтобы упорядочить названия классов для плейсхолдеров при более-менее сложном лэйауте, придется делать их довольно длинными (даже если не использовать BEM-названия);

– Невозможность сохранять длинные тексты с форматированием и изображениями.

P.S:

На новизну идеи совершенно не претендую.