Comment ajouter une classe CSS à <body> en fonction de la langue active

8

Je conçois un site multilingue où j'aimerais baser certains de mes styles sur la langue active.

Pensez à quelque chose comme ça:

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

Quelqu'un connaît-il une extension capable de faire cela (c'est-à-dire l'ajout d'une classe à la balise en fonction de la langue active)?

extensions smz
la source
1
Juste un petit point; dans cet exemple, vous modifiez le contenu, pas le style, en fonction de la langue. Vous pouvez déjà le faire très facilement dans Joomla bien sûr, pas besoin de CSS du tout.
Seth Warburton

Réponses:

14

Il existe en fait une solution plus simple à votre problème. Tout modèle sain (y compris tous les modèles fournis avec le CMS Joomla) définira l' langattribut sur l'élément HTML. Cela vous permet d'utiliser le :lang()pseudo-sélecteur CSS .

Votre exemple ressemblerait à ceci:

li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}

Cela présente quelques avantages. Pour commencer, cela fonctionnera quel que soit le modèle ou même avec des solutions autres que Joomla car tout se fait dans le navigateur.

De plus, cela fonctionnera langcorrectement avec des pièces incorporées dans d'autres langues, tant que l' attribut est correctement défini. Par exemple:

<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>

Enfin, Joomla ne produit pas seulement la langue mais les paramètres régionaux. Ainsi, votre site peut utiliser en-GB, un autre en-US et le modèle reflétera cela. L'utilisation :lang(en)correspondra non plus, mais vous pouvez également l'utiliser :lang(en-US)pour cibler uniquement l'anglais américain.

Rouven Weßling
la source
Merci pour votre réponse Rouven: très intéressant et j'expérimenterai cela aussi.
smz
Eh bien, Rouven, à la fin de la journée, je dois dire que j'ai adopté votre méthode: très élégant, pas même la moindre modification de mon modèle et cela m'a ouvert les yeux sur plus de possibilités que j'essaie maintenant d'exploiter (modules HTML personnalisés multilingues et articles ...). Merci encore et merci aussi à @Bakual et Lodder, bien sûr!
smz
Impressionnant. J'ai hâte d'entendre que je pourrais offrir une inspiration.
Rouven Weßling
C'est une réponse brillante, je n'en avais aucune idée!
codinghands
5

Je voudrais juste modifier le fichier templates index.php et y ajouter la classe directement.

<body class="<?php echo $this->language; ?>">

Attribuerait la langue actuelle en tant que classe à la balise body.

Bakual
la source
Génial: encore plus facile!
smz
Merci Bakual: J'ai ajouté votre code à mon modèle et cela fonctionne parfaitement. J'ai "accepté" votre réponse.
smz
Je cherche à faire quelque chose de similaire pour ajouter l'alias à la classe de corps. Mais je ne veux pas remplacer le modèle en cas de mises à jour. Je pensais à créer un plugin système, mais existe-t-il un moyen d'ajouter cette classe, ou devrais-je simplement utiliser JavaScript?
Eoin
3

Une petite chose à ajouter concernant la méthode de Rouven; la prise en charge du navigateur est meilleure pour les sélecteurs d'attributs que pour le pseudo-sélecteur de langue, vous pouvez donc envisager d'utiliser quelque chose comme ceci pour cibler vos styles:

[lang="en-GB"] .artist {…}
Seth Warburton
la source
Merci, @Seth! Je vais essayer votre solution de ciblage. Que diriez-vous de cibler les deux? Est-ce que cela rendra la solution encore plus compatible?
smz
Cela surévaluerait vos sélecteurs ou ajouterait un gonflement inutile. Le sélecteur le plus court est toujours le meilleur choix car il maintient une spécificité faible, vous permettant de le remplacer facilement si vous en avez besoin. Plus votre sélecteur est spécifique, plus il est difficile à remplacer, c'est pourquoi vous ne devez jamais utiliser d'ID dans votre CSS. L'utilisation des deux ne vous donnerait plus de compatibilité avec le navigateur.
Seth Warburton
Bonjour, @Seth! J'ai essayé votre solution mais elle ne semble pas fonctionner, du moins avec mon Joomla! site. Pour autant que je sache, la seule indication sur la langue utilisée réside dans la directive <html> qui se lit comme suit: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> en italien ou <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> en anglais. Cela devrait-il être suffisant pour votre solution de ciblage? Il ne semble pas si ...
smz
Oui, ce sélecteur cible l'élément html en fonction de l'attribut, qui dans ce cas est le langage. Cependant, les attributs sont sensibles à la casse, vous devez donc utiliser: [lang = "en-fr"]
Seth Warburton
1

Dans le fichier index.php de votre modèle, vous pouvez remplacer la <body>balise actuelle par ce qui suit:

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

Cela produira ce qui suit comme exemple:

<body class="en-GB">
Lodder
la source
Malheureusement, je ne peux pas vous voter car je n'ai pas assez de réputation ... :-(
smz
1
En fait, la réponse de @ Bakual est la meilleure méthode. C'est plus rapide et plus facile;)
Lodder
1
Oui, pas besoin d'aller chercher la langue. Il est déjà disponible dans le modèle :)
Bakual
Vous ne pouvez pas voter, mais vous pouvez choisir un message comme réponse :) Prenez aussi longtemps que vous le souhaitez (et si aucun message ne répond à votre question, laissez-le). Les meilleures réponses finiront par avoir le plus de votes .... en théorie!
TryHarder
@Bakual - Une erreur idiote. La raison étant que je viens de répondre à une question relative à la langue sur SO qui n'implique pas le modèle lol
Lodder