Localization of html-page CSS
People have different attitudes towards CSS. Someone grumbles that before and the tables were greener, someone is hot, they say, give me your tables, so I will plant them. Personally, I have been taking CSS files for quite some time as configs for the appearance of a web page. In fact, it is so. A good HTML maker is used to create a document structure, which then has an external display configured using CSS.
Usually, external display refers to all kinds of beauty, such as images, round corners, gradients, and other web-basedness. However, the main means of transmitting information on the Internet is still their majesty the text. The text applies everywhere: in the site navigation, and in the basic information.
Now, as space sites travel through the world wide web, it is increasingly necessary to make them multilingual. There are many ways. Under different platforms, frameworks and template engines. The way I want to suggest is using CSS as the basis.
')
The idea is simple. All designers working with CSS are aware of a property such as content:; that applies to pseudo-elements: after and: before. 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. For example, "en.css" and "ru.css". The main styles of the blocks (colors and other beautiful) are defined in the file “main.css”.
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 - later. Depending on which language is basic. 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 broke into two files for clarity only.
Pros:
+ This method is supported by all modern browsers, including the eighth and ninth IE 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 quite a long time by the user (in fact, until a header is received from the server that signals the need to update the cache);
+ No need to reload the page to apply the required locale. It is enough just to change the href of the <link> tag with a javascript. Or create a new <link> tag with the desired href .
Cons (there are unfortunately more):
- IE up to the eighth version does not understand the content:; property, like some mobile browsers;
- Search engines are unlikely to index texts recorded in this way;
- There are a number of restrictions to the content of CSS-content properties;
- To arrange class names for placeholders with a more or less complex layout, you will have to make them rather long (even if you do not use BEM names);
- The inability to save long texts with formatting and images.
PS:
I do not pretend to the novelty of the idea.
Usually, external display refers to all kinds of beauty, such as images, round corners, gradients, and other web-basedness. However, the main means of transmitting information on the Internet is still their majesty the text. The text applies everywhere: in the site navigation, and in the basic information.
Now, as space sites travel through the world wide web, it is increasingly necessary to make them multilingual. There are many ways. Under different platforms, frameworks and template engines. The way I want to suggest is using CSS as the basis.
')
The idea is simple. All designers working with CSS are aware of a property such as content:; that applies to pseudo-elements: after and: before. 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. For example, "en.css" and "ru.css". The main styles of the blocks (colors and other beautiful) are defined in the file “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: ''; } 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 - later. Depending on which language is basic. 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 broke into two files for clarity only.
Pros:
+ This method is supported by all modern browsers, including the eighth and ninth IE 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 quite a long time by the user (in fact, until a header is received from the server that signals the need to update the cache);
+ No need to reload the page to apply the required locale. It is enough just to change the href of the <link> tag with a javascript. Or create a new <link> tag with the desired href .
Cons (there are unfortunately more):
- IE up to the eighth version does not understand the content:; property, like some mobile browsers;
- Search engines are unlikely to index texts recorded in this way;
- There are a number of restrictions to the content of CSS-content properties;
- To arrange class names for placeholders with a more or less complex layout, you will have to make them rather long (even if you do not use BEM names);
- The inability to save long texts with formatting and images.
PS:
I do not pretend to the novelty of the idea.
Source: https://habr.com/ru/post/121075/
All Articles