Tim Tepaße: Sprachabhängige Selektoren

Beitrag lesen

Hallo Tom,

Wenn ich CSS auslagere, muss ich zwei Dateien parsen, da ja hier auch über background-image:url() teilweise unterschiedliche Bilder geladen werden müssen.
Auf jeden Fall will ich nur _eine_ zentrale CSS-Angabe haben.

Ohne mich mit dem Rest Deines Problems zu beschäftigen: Im Prinzip könnte man das auch mit den Mitteln von HTML und CSS lösen, ohne serverseitige Logik ins Spiel bringen zu müssen. Dazu müßte die Sprachkodierung in die HTML-Datei integriert werden und davon abhängige Selektoren erstellt werden.

HTML bietet dafür das Universalattribut lang an (XHTML zusätzlich noch xml:lang):

<html lang="de-DE">

Diese kann man dann in CSS mit dem Attribut-Selektor ansprechen. Durch eine Verschachtelung könnte man dann also Dein Hintergrundbild abhängig von der Sprache einbinden:

html[lang|=en] div { background-image:url(englisches-bild.png) }  
html[lang|=de] div { background-image:url(deutsches-bild.png) }  
...

Das wäre die tolle Methode. Dummerweise versteht der marktführende Browser diese nicht. Eine Alternative wären dann Klassen-Selektoren. Aus logischer und semantischer Sicht nicht so toll, aber praktikabel. Auch hier würde ich es so hoch wie möglich in der Hierarchie des Dokumentbaumes anordnen ...

<body class="sprache-en">

... damit man es in CSS überall benutzen kann:

[code lang=css]body.sprache-en div { ... }

Tim