CSS kullanarak çok dilli site yapılabilir mi

Anonim 823 gün önce

343 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhaba arkadaşlar, sorum başlıktaki gibi biraz absürt olabilir merak ettim sadece

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

sarjaleti

823 gün önce

Yapılabilir,

<input type="radio" name="language" value="en">
<input type="radio" name="language" value="tr" checked>
<input type="radio" name="language" value="es">

<p lang="en">Hello, you see this text in <b>English</b>.</p>
<p lang="tr">Merhaba, bu yazıyı <b>Türkçe</b> görüyorsunuz.</p>
<p lang="es">Hola, ves esta publicación en <b>Español</b>.</p>

/* Türkçe */
input[type='radio'][value='tr']:checked ~ *[lang='tr'] {
  display: block;
}

input[type='radio'][value='tr']:checked ~ *[lang='en'],
input[type='radio'][value='tr']:checked ~ *[lang='es'] {
  display: none;
}

/* English */
input[type='radio'][value='en']:checked ~ *[lang='en'] {
  display: block;
}

input[type='radio'][value='en']:checked ~ *[lang='tr'],
input[type='radio'][value='en']:checked ~ *[lang='es'] {
  display: none;
}

/* Español */
input[type='radio'][value='es']:checked ~ *[lang='es'] {
  display: block;
}

input[type='radio'][value='es']:checked ~ *[lang='tr'],
input[type='radio'][value='es']:checked ~ *[lang='en'] {
  display: none;
}

Ama gördüğün gibi gereksiz efor harcamış olursun, her yazı yazdığın yeri üçlemen gerekecek vs...

#010941

ebykdrms

823 gün önce

@sarjaleti'nin verdiği cevaba biraz javascript eklemenizde mahzur yoksa alternatif olarak şu da mümkün:

Tüm sayfayı kapsayıcı içine alın. Sonra bu kapsayıcıyı dil sayısı kadar çoğaltın. Her kapsayıcıya da attribute olarak dili yazın.
Javascript ile body'ye aktif dili attribute olarak ekletin.
CSS ile body attribute'sine göre hangi dilin görüneceğini belirtin.

<head>
    <style>
        body > .page-content { display:none; }
        body[data-lang="tr"] > .page-content[data-lang="tr] { display:block; }
        body[data-lang="en"] > .page-content[data-lang="en] { display:block; }
        body[data-lang="es"] > .page-content[data-lang="es] { display:block; }
    </style>
    <script>
        // Dil değiştiren fonksiyon
        function changeLanguage(langCode="tr") {
            document.body.setAttribute("data-lang", langCode);
        }
        
        // Sayfa açılışında aktif olacak dili belirleyelim.
        // body elementi onload olduğunda bu veri kullanılarak changeLanguage() fonksiyonu çağırılacak.
        const startLanguage = "tr";
    </script>
</head>

<body onload="changeLanguage(startLanguage);">
    
    <div class="language-selector">
        <button onclick="changeLanguage("tr");">TR</button>
        <button onclick="changeLanguage("en");">EN</button>
        <button onclick="changeLanguage("es");">ES</button>
    </div>
    
    <section class="page-container" data-lang="tr">
        Tüm sayfanın Türkçe içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="en">
        Tüm sayfanın İngilizce içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="es">
        Tüm sayfanın İspanyolca içerikli HTML kodu burada barınacak.
    </section>
</body>

Bu kurguyu sitenizdeki tüm sayfalara uygulamalısınız. Ama bazı sorunlarla karşılaşmış olacaksınız.

Başka bir sayfaya geçtiğinizde seçtiğiniz dil kaybolacak ve ana dile ("tr") dönmüş olacaksınız.
Siteyi kapatıp tekrar açtığınızda seçtiğiniz dil kaybolacak ve yeniden dil seçmek zorunda kalacaksınız.

Bu durumda seçilen dili tarayıcıya kaydetmek ve sayfa açıldığında kayıtlı bir dil olup olmadığını kontrol edip direkt o dili aktif etmek gerekir.
Yukarıda head tag'ında bulunan script tag'ını şu şekilde değiştirebiliriz:

// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
    document.body.setAttribute("data-lang", langCode);
    
    // seçilen dili local storage'a kaydedelim:
    localStorage.setItem("selected-language", langCode);
}

// Daha önce local storage'a yazılmış dil verisini alalım.
const storagedLanguage = localStorage.getItem("selected-languge");

// Local storage'dan dil verisi alabildiysek bunu kullanalım. Bulamadıysak varsayılan dilimizi kullanalım.
const startLanguage = storagedLanguage ? storagedLanguage : "tr";

#010943

saru

823 gün önce

@sarjaleti teşekkürler hocam

#010942