Localizing an html page using CSS

People have a different attitude to CSS. Someone grumbles that earlier the tables were greener, someone got excited, they say, give me your tables, so I will green them. Personally, I have long perceived CSS files as some kind of configs for the appearance of a web page. In fact, it is. For a good typesetter, HTML is used to create the structure of a document, which is then used to customize the appearance with CSS.

Usually, external display refers to all sorts of beauties such as images, round corners, gradients, and other web duality. However, the main means of transmitting information on the Internet is still their Majesty's text. Text is used everywhere: in site navigation, and in basic information.

Now that space sites plow the expanses of the world wide web, there is an increasing need to make them multilingual. There are many ways. For different platforms, frameworks and template engines. The method I want to suggest is using CSS as the basis.

The idea is simple. All CSS coders are aware of a property such as content:;, which applies to the: after and: before pseudo-elements. Most often, using the “magic” combination: after and content :; implement clear for floating blocks. But generally in content :; You can write absolutely any text. Without tags, true, but this is a reasonable limitation.

How can this be used? You need to create two CSS files. Let's say "en.css" and "ru.css". The main styles of blocks (colors and other prettiness) should be defined in the file "main.css".

/* Содержание файла «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: 'Контакты';
}

Next you just need to connect the files in this order: main.css, en.css, ru.css. Well, or first ru.css, and en.css - then. Depending on which language is the main one. In principle, nothing prevents the default CSS properties from being pushed into main.css, and only the language file selected by the user is included. I split into two files for illustration purposes only.

Pros:

+ This method is supported by all modern browsers, including IE of the eighth and ninth versions, including mobile browsers for iPhone and Android;

+ The CSS file is cached by the browser, which means that once downloaded, it will be stored locally for a long time (actually until a header comes up from the server signaling the need to update the cache);

+ No need to reload the page to apply the required locale. Simply change the href of the tag with a javascript . Or create a new tag with the desired href .

Cons (unfortunately, there are more of them):

- IE before the eighth version does not understand the property content:;, like some mobile browsers;

- Search engines are unlikely to index texts written in this way;

- There are a number of restrictions on the content of the CSS property content;

- To streamline class names for placeholders with a more or less complicated layout, you will have to make them quite long (even if you do not use BEM names);

- Inability to save long texts with formatting and images.

PS:

I do not pretend to be new ideas.