Página multidioma con solo CSS3

3 minutos

Para realizar una página multidioma, una web en varios idiomas, necesitas un lenguaje de programación de Back-End (como puede ser PHP, Python o Ruby) o Javascript (a través de por ejemplo i18next). Pero… ¿se puede hacer una web en varios idiomas usando solo CSS? Si, es posible; si nos valemos de un pequeño truco CSS que te voy a mostrar.

Demo

Pulsa aquí

HTML

Lo importante esta en jugar con el estado CSS3 de :checked. Si en un checkbox esta pulsado cambiaremos todos los elementos con el atributo lang= a un display:none. ¿No lo has entendido? Veamos un ejemplo.

En el siguiente HTML puedes ver un menú en Inglés y castellano, diferenciado por un atributo.

Inglés <input name="choice-lang" type="radio" value="en" checked>
Español <input name="choice-lang" type="radio" value="es">
<main>
    <nav>
        <ul>
            <!-- Textos castellano -->
            <li lang="es"><a href="#">Inicio</a></li>
            <li lang="es"><a href="#">Preguntas</a></li>
            <li lang="es"><a href="#">Servicios</a></li>
            <li lang="es"><a href="#">Equipo</a></li>
            <li lang="es"><a href="#">Contacto</a></li>
            <!-- Fin textos castellano -->
            <!-- Textos inglés -->
            <li lang="en"><a href="#">Home</a></li>
            <li lang="en"><a href="#">FAQ</a></li>
            <li lang="en"><a href="#">Services</a></li>
            <li lang="en"><a href="#">Team</a></li>
            <li lang="en"><a href="#">Contact</a></li>
            <!-- Fin textos inglés -->
        </ul>
    </nav>
    <p lang="es">Texto en castellano</p>
    <p lang="en">Text in english</p>
    <p>No necesario traducir</p>
</main>

CSS

Ahora decimos que si el checkbox de en (inglés) esta seleccionado, todas las etiquetas con el atributo en español desaparezcan con display:none. Y lo contrario si esta pulsado español.

input[name="choice-lang"][type="radio"][value="en"]:checked ~ * [lang="es"] {
    display: none;
}

input[name="choice-lang"][type="radio"][value="es"]:checked ~ * [lang="en"] {
    display: none;
}

¡Y ya lo tenemos!

Debes tener en cuenta que dejará de funcionar si tus checkbox no están por encima de los textos que quieres tratar.

Completo

Todo junto quedaría de la siguiente forma.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Demo multidioma con CSS</title>
    <style>
        input[name="choice-lang"][type="radio"][value="en"]:checked ~ * [lang="es"] {
            display: none;
        }

        input[name="choice-lang"][type="radio"][value="es"]:checked ~ * [lang="en"] {
            display: none;
        }
    </style>
</head>
<body>
    Inglés <input name="choice-lang" type="radio" value="en" checked>
    Español <input name="choice-lang" type="radio" value="es">
    <main>
        <nav>
            <ul>
                <li lang="es"><a href="#">Inicio</a></li>
                <li lang="es"><a href="#">Preguntas</a></li>
                <li lang="es"><a href="#">Servicios</a></li>
                <li lang="es"><a href="#">Equipo</a></li>
                <li lang="es"><a href="#">Contacto</a></li>
                <li lang="en"><a href="#">Home</a></li>
                <li lang="en"><a href="#">FAQ</a></li>
                <li lang="en"><a href="#">Services</a></li>
                <li lang="en"><a href="#">Team</a></li>
                <li lang="en"><a href="#">Contact</a></li>
            </ul>
        </nav>
        <p lang="es">Texto en castellano</p>
        <p lang="en">Text in english</p>
        <p>No necesario traducir</p>
    </main>
</body>
</html>

Conclusión

No te quedes solo con la anécdota, resolverlo con CSS es limpio, eficiente y sencillo; aunque trae algunas limitaciones a la hora de gestionar los <metas> de cara al SEO. Para pequeños proyectos puede ser una estrategia cómoda pero no habrá nada tan potente como un Back-End.

Ventajas

  • Totalmente nativo.
  • No necesitas ningún lenguaje de programación.
  • Tu web puede ser estática y además generanda usando tecnologías como Jekyll, Hugo o Pelican.
  • Cualquier Diseñador Web puede comprender y utilizar el sistema.

Contras

  • El HTML es más grande.
  • Es un poco engorroso estar envolviendo todos tus textos con la etiqueta <span lang="...">.
  • Para temas de posicionamiento esta algo limitado.

Ayuda: Mantener el idioma seleccionado

No es posible usar CSS para recordar el idioma pulsado cuando cambias a otra página. Por ello habrá que tirar de Javascript.

document.addEventListener('DOMContentLoaded', () => {
    // Variable language
    let choiceLang = document.querySelectorAll('input[name="choice-lang"]');
    // Restore language from Localstorage
    let langStorage = localStorage.getItem('lang');
    if(langStorage !== null) choiceLang.forEach((item) => { item.value === langStorage ? item.setAttribute('checked', true) : false});
    // Set language from LocalStorage
    choiceLang.forEach((item) => item.addEventListener('input', (event) => { localStorage.setItem('lang', event.target.value) }));
});

Tal vez también te interese...