Cara menambahkan kelas CSS ke <body> tergantung pada bahasa aktif

8

Saya merancang situs multibahasa di mana saya ingin mendasarkan beberapa gaya saya pada bahasa aktif.

Pikirkan sesuatu seperti ini:

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"}

Apakah ada yang tahu ekstensi yang mampu melakukan ini (mis. Menambahkan kelas ke tag tergantung pada bahasa aktif)?

extensions smz
sumber
1
Hanya satu poin kecil; dalam contoh ini Anda memodifikasi konten, bukan gaya, berdasarkan bahasa. Anda sudah dapat melakukan ini dengan sangat mudah di Joomla, tentu saja, tidak perlu css sama sekali.
Seth Warburton

Jawaban:

14

Sebenarnya ada solusi yang lebih mudah untuk masalah Anda. Semua templat waras (termasuk semua templat yang datang dengan CMS Joomla) akan menetapkan langatribut pada elemen HTML. Ini memungkinkan Anda untuk menggunakan :lang()pemilih-semu CSS .

Contoh Anda akan terlihat seperti ini:

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

Ini memiliki beberapa keunggulan. Sebagai permulaan, ini akan berfungsi terlepas dari Templat atau bahkan dengan solusi selain Joomla karena semuanya dilakukan di Browser.

Juga akan berfungsi dengan baik dengan bagian yang disematkan dalam bahasa lain, selama langatributnya diatur dengan benar. Sebagai contoh:

<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>

Terakhir, Joomla tidak hanya menampilkan bahasa tetapi juga lokal. Jadi satu situs Anda mungkin menggunakan en-GB, yang lain di AS dan templat akan mencerminkannya. Menggunakan :lang(en)akan cocok, tetapi Anda juga bisa menggunakan :lang(en-US)hanya menargetkan Bahasa Inggris Amerika.

Rouven Weßling
sumber
Terima kasih atas jawaban Anda, Rouven: sangat menarik dan saya akan bereksperimen dengan ini juga.
smz
Ya, Rouven, pada akhirnya saya harus mengatakan bahwa saya mengadopsi metode Anda: sangat elegan, bahkan tidak sedikit pun modifikasi pada templat saya dan membuka mata saya pada lebih banyak kemungkinan yang sekarang saya coba manfaatkan (modul HTML khusus multibahasa) dan artikel ...). Terima kasih lagi dan banyak terima kasih kepada @Bakual dan Lodder juga, tentu saja!
smz
Luar biasa. Bersinar mendengar saya bisa memberikan beberapa inspirasi.
Rouven Weßling
Ini jawaban yang cemerlang, saya tidak tahu!
codinghands
5

Saya hanya akan memodifikasi file templat index.php dan menambahkan kelas langsung di sana.

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

Akan menetapkan bahasa saat ini sebagai kelas ke tag tubuh.

Bakual
sumber
Luar biasa: lebih mudah!
smz
Terima kasih Bakual: Saya menambahkan kode Anda ke templat saya dan berfungsi dengan baik. Saya "menerima" jawaban Anda.
smz
Saya ingin melakukan sesuatu yang mirip dengan menambahkan alias ke kelas tubuh. Tapi saya tidak ingin mengganti template jika ada pembaruan. Saya berpikir untuk membuat plugin sistem, tetapi apakah ada cara untuk menambahkan kelas ini, atau haruskah saya menggunakan JavaScript?
Eoin
3

Satu hal kecil untuk ditambahkan sehubungan dengan metode Rouven; dukungan browser lebih baik untuk pemilih atribut daripada untuk pemilih pseudo bahasa, jadi Anda mungkin ingin mempertimbangkan untuk menggunakan sesuatu seperti ini untuk menargetkan gaya Anda:

[lang="en-GB"] .artist {…}
Seth Warburton
sumber
Terima kasih, @Seth! Saya akan mencoba solusi penargetan Anda. Bagaimana dengan menargetkan keduanya? Apakah ini akan membuat solusi lebih kompatibel?
smz
Itu bisa membuat penyeleksi Anda terlalu berlebihan atau menambah mengasapi yang tidak perlu. Selektor terpendek selalu merupakan pilihan terbaik karena mempertahankan spesifisitas rendah, memungkinkan Anda untuk menimpanya dengan mudah jika perlu. Semakin spesifik pemilih Anda, semakin sulit untuk menimpa, itulah sebabnya Anda tidak boleh menggunakan ID di css Anda. Menggunakan keduanya tidak akan memberi Anda kompatibilitas browser lagi.
Seth Warburton
Halo, @Seth! Saya mencoba solusi Anda tetapi tampaknya tidak berhasil, setidaknya dengan Joomla saya! situs Sejauh yang saya mengerti satu-satunya indikasi tentang bahasa yang digunakan terletak pada arahan <html> yang bertuliskan: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> dalam kasus bahasa Italia atau <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> dalam hal bahasa Inggris. Apakah ini cukup untuk solusi penargetan Anda? Sepertinya tidak begitu ...
smz
Ya, pemilih ini menargetkan elemen html berdasarkan atribut, yang dalam hal ini adalah bahasa. Namun, atribut bersifat case sensitive sehingga Anda perlu menggunakan: [lang = "en-gb"]
Seth Warburton
1

Di index.php dari templat Anda, Anda dapat mengganti <body>tag saat ini dengan yang berikut:

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

Ini akan menampilkan yang berikut sebagai contoh:

<body class="en-GB">
Lodder
sumber
Sayangnya saya tidak dapat memilih Anda karena saya tidak memiliki reputasi yang cukup ... :-(
smz
1
Sebenarnya jawaban @ Bakual adalah metode yang lebih baik. Lebih cepat dan mudah;)
Lodder
1
Yap, tidak perlu mengambil bahasa. Ini sudah tersedia di templat :)
Bakual
Anda tidak dapat memilih, tetapi Anda dapat memilih posting sebagai jawabannya :) Luangkan waktu selama Anda ingin memilih (dan jika tidak ada posting menjawab pertanyaan Anda - biarkan saja). Jawaban terbaik akhirnya akan memiliki suara terbanyak .... secara teori!
TryHarder
@Bakual - Kesalahan konyol saya. Alasannya, saya baru saja menjawab pertanyaan terkait bahasa pada SO yang tidak melibatkan templat lol
Lodder