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) }));
});
{{ comments.length }} comentarios