Sprachabhängige Inhalte rein über CSS definieren

05.04.2013

Über den Pseudo-Selektor before und after können Inhalte direkt im CSS definiert werden. Mit dem Pseudo-Selektor lang oder der weblicationspezifischen lang-de Klasse kann das auch sprachabhängig geschehen.

Inhalte, die mehr oder weniger Layout-Charakter haben, lassen sich optimalerweise direkt im CSS definieren. Beispiele hierfür sind Weiter-Links oder Kurzbezeichnungen, wie z.B. "Datum", "von", "bis", Doppelpunkte und beliebige UTF-8 Sonderzeichen. 

.listDefault_var0 .listEntryDescription:after               {content:"Mehr";text-decoration:underline;cursor:pointer;}
.listDefault_var0 .listEntryDescription:hover:after         {text-decoration:none}

Sprachspezifische Variante über Pseudo-Selektor lang ergänzen

html:lang(en) .listDefault_var0 .listEntryDescription:after  {content:"Read more"} 

Damit diese CSS-Technik auch sprachabhängig eingesetzt werden kann, können Sie entweder die über Weblication ergänzte Sprach-Klasse oder den Pseudo-Selektor lang nutzen. Im Beispiel wird der CSS-Inhalt für die englische Sprache mit dem Wert "Read more" überschrieben.

Nach diesem Prinzip können Sie beliebige Layout-Inhalte über CSS ergänzen, ohne dabei in die Sprachfalle zu tappen. Die über die Pseudo-Attribute before und after definierten Inhalte können zudem ohne jegliche Template-Anpassung durchgeführt werden, was ein weiterer Vorteil darstellt, da Templates ohne Anpassungen generell update-fähig sind.