通常、外部ディスプレイとは、画像、丸い角、グラデーション、その他のウェブの二重性など、あらゆる種類の美しさを指します。 ただし、インターネットで情報を送信する主な手段は、依然としてMa下のテキストです。 テキストは、サイトナビゲーションや基本情報でどこでも使用されます。
現在、宇宙サイトがWorld Wide Webの広がりを耕しているとき、多言語化する必要がますます多くなっています。 多くの方法があります。 さまざまなプラットフォーム、フレームワーク、およびテンプレートエンジン用。 私が提案したい方法は、基礎としてCSSを使用することです。
アイデアはシンプルです。 すべてのCSSコーダーは、content：;;などのプロパティを認識しています。これは、：afterおよび：before擬似要素に適用されます。 ほとんどの場合、「マジック」の組み合わせを使用します：afterおよびcontent：; フローティングブロックにクリアを実装します。 しかし、一般的にコンテンツで：; 絶対にテキストを書くことができます。 タグがない場合はtrueですが、これは合理的な制限です。
これはどのように使用できますか？ 2つの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にプッシュされるのを妨げるものはなく、ユーザーが選択した言語ファイルのみが含まれます。 説明のために2つのファイルに分割しました。
長所：
+この方法は、iPhoneおよびAndroid用のモバイルブラウザーを含む、第8および第9バージョンのIEを含むすべての最新ブラウザーでサポートされています。
+ CSSファイルはブラウザによってキャッシュされます。つまり、ダウンロードすると、ローカルに長時間保存されます（実際には、キャッシュを更新する必要があることを示すヘッダーがサーバーから送信されるまで）。
+必要なロケールを適用するためにページをリロードする必要はありません。 JavaScriptで<link>タグのhrefを変更するだけです。 または、目的のhrefを使用して新しい<link>タグを作成します。
短所（残念ながら、もっと多い）：
-8番目のバージョンより前のIEは、プロパティコンテンツを理解していません：;および一部のモバイルブラウザー;
-検索エンジンは、この方法で作成されたテキストをインデックスに登録することはほとんどありません。
-CSSプロパティコンテンツのコンテンツには多くの制限があります。
-多少複雑なレイアウトのプレースホルダーのクラス名を合理化するには、それらを非常に長くする必要があります（BEM名を使用しない場合でも）。
-書式設定と画像を含む長いテキストを保存できない。
PS：
私は新しいアイデアのふりをしません。