Люди по-разному относятся к CSS. Кто-то ворчит, что раньше и таблицы были зеленее, кто-то горячится, мол, дайте мне ваши таблицы, уж я их озеленю. Лично я довольно давно воспринимаю CSS-файлы как совего рода конфиги для внешнего вида веб-страницы. По сути ведь так и есть. У хорошего верстальщика HTML используется для того, чтобы создать структуру документа, у которой затем с помощью CSS настраивается внешнее отображение.
Обычно под внешним отображением понимаются всякие красоты вроде изображений, круглых уголков, градиентиков и прочей вебдванольности. Однако основным средством передачи информации в Интернете до сих пор является их величество текст. Текст применяется везде: и в навигации по сайту, и в основной информации.
Сейчас, когда космические сайты бороздят просторы мировой паутины, все чаще возникает потребность делать их многоязычными. Способов существует много. Под разные платформы, фреймворки и шаблонизаторы. Способ, который хочу предложить я, использует в качестве основы CSS.
Идея проста. Все верстальщики, работающие с CSS знают о таком свойстве как content:;, которое применяется к псевдоэлементам :after и :before. Чаще всего с помощью «волшебного» сочетания :after и content:; реализуют clear для «плавающих» блоков. Но вообще в content:; можно писать абсолютно любой текст. Без тегов, правда, но это разумное ограничение.
Как это можно использовать? Нужно создать два CSS-файла. Допустим, «en.css» и «ru.css». Основные стили блоков (цвета и прочие красивости) пусть определяются в файле «main.css».
Дальше нужно просто подключить файлы в таком порядке: 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:
На новизну идеи совершенно не претендую.
Обычно под внешним отображением понимаются всякие красоты вроде изображений, круглых уголков, градиентиков и прочей вебдванольности. Однако основным средством передачи информации в Интернете до сих пор является их величество текст. Текст применяется везде: и в навигации по сайту, и в основной информации.
Сейчас, когда космические сайты бороздят просторы мировой паутины, все чаще возникает потребность делать их многоязычными. Способов существует много. Под разные платформы, фреймворки и шаблонизаторы. Способ, который хочу предложить я, использует в качестве основы 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:
На новизну идеи совершенно не претендую.