CSS i zmiana języka

0

Witam,
z moich poszukiwań i wiedzy wynika, że nie można zrobić czegoś na kształt dostosowywania się CSS do języka strony.
Dokładnie chodzi mi o to że koleś wykonał dla mnie szablon i jak debil stworzył obrazki zamiast napisów. Czyli w CSS mam

url("jakies_zdjecie_z_polskimi_znakami.png");

Robię tak że stworzyłem dwa pliki css i jeden ma zawartość polską a drugi angielską. Ale co w momencie gdy będę miał np: 10 języków ? Każda zmiana to edycja 10 plików.

Czy jest możliwość w CSS zrobienia tak że w zależności od języka strony, zmienia obrazek ?

0

Jedyne wyjście to ładowanie różnych plików CSS do różnych języków, innego nie ma.

0

Czyli jednak ... no szkoda. Dzięki

0

Zrób jeden - ogólny, do body dodawaj sobie klasę z językiem i potem w pliku css na dole napisz regułki nadpisujące poprzednie reguły, np:

body.lang_en div.content h4 span { background: ... ; }
0

Drobne ulepszenie (poprawnego) sposobu, który zaproponował @dzek69:

  1. Nawet nie musisz używać klasy. Element html i tak powinien mieć atrybut lang, tj. wyglądać na przykład tak:
<html lang="en">
...
</html>

Zamiast "en" może tam być "pl" i tak dalej.

Możesz to wykorzystać, używając selektora wartości atrybutu, działającego nawet w starym IE7.

  1. Definiując wersje językowe, zamiast background użyj samego background-image. Wcześniej w pliku miej dla każdego obrazka pełną deklarację background, ustawiającą kolor tła, powtarzanie, pozycję itp. A na samym końcu ustawiaj tylko URL-e obrazków dla każdej wersji językowej.

Po zsumowaniu tych dwóch rozwiązań:

/* Gdzieś wcześniej w pliku */
.content h4 span {
  background: #08f none no-repeat left top;
}
...
/* Na końcu */
/* Wersja EN */
[lang="en"] .content h4 span { background-image: ... ; }

Ten kod z końcu pliku możesz też po prostu wyciągnąć do osobnego pliku, którego byś miał 10 wersji, i ładować w razie potrzeby. Nie powinieneś natomiast mieć 10 różnych, wielkich plików CSS. Można też użyć lepszego selektora niż zwykły selektor atrybutu, np. [lang^="en"] lub [lang|="en"], dzięki którym złapiemy też en-us itd.

I jeszcze inne rozwinięcie tej opcji: wyciągnij te obrazki do osobnego pliku, ale niech ten plik będzie dynamiczny. Przetwarzaj go przez PHP czy jakiego tam języka backendowego używasz. Niech ten plik zawiera wstawki PHP, czyli niech będzie skryptem PHP!

Ten może spojrzeć na parametr GET, np. nazwij sobie ten parametr lang i upewnić się, że zawiera jedną z tych 10 dozwolonych wartości (w ramach podstawowych zabezpieczeń). Jeśli coś jest nie tak, rzucamy wyjątek. Jeśli wszystko w porządku, kontynuujemy, zapisując sobie wartość parametru do zmiennej $lang.

I teraz, w dalszej części skryptu, możesz pisać tak:

<?php
$lang = $_GET["lang"];
// upewniamy się, że $lang to nazwa języka
?>
.content h4 span { background-image: url("../img/<?php echo $lang; ?>/content-header.png"); } /* dynamicznie tworzymy ścieżkę do obrazka */

Gdy dołączamy nasz plik CSS z obrazkami, to oczywiście z odpowiednim parametrem $lang. Plik dostosuje ścieżki do parametru.

W ten sposób zachowamy DRY. Mamy plik CSS przetwarzany przez PHP, ale jest to plik mały, jedynie ze ścieżkami do obrazków. W wypadku dużego ruchu ten plik powinniśmy keszować.

Są jeszcze inne podejścia. Możesz np. użyć w HTML-u elementu base i ustawiać go na ścieżkę np. en/ czy pl/. Wszystkie obrazki z tekstem mielibyśmy w en/img/text/, pl/img/text/ i tak dalej. Za pomocą magii .htaccessu, używając mod_rewrite, moglibyśmy niemal zawsze ignorować/wycinać ten pierwszy człon ścieżki (tj. dla plików .CSS, .JS i większości obrazków), ale dla img/text byśmy ten człon zostawiali.

Także opcji jest dużo.

Co do autora CSS będącego "debilem"... Niekoniecznie. Czy wiedział, że strona będzie miała tyle wersji językowych? To drobny szczegół, który powinno się mu przekazać. Poza tym, może faktycznie ktoś dobry by tego odruchowo nigdy nie zrobił. Ale ktoś dobry się ceni. A często szuka się wykonawców jak najtańszych. Oni są przeważnie relatywnie słabi i niezbyt mądrą osobą to może być ta, która tego nie wie ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1