🇬🇧 🇪🇸

Multi-language website using only...Web multilenguaje usando solo...
☔️☀️ CSS3 💂💃


¡Sin Javascript! Not Javascript!

🤔 Preguntas frecuentes

🤔 FAQ

¿Cual es el truco?

What's the trick?

La clave está en ocultar los elementos con el atributo lang es o en dependiendo del estado de los checkboxs. (Mira el código fuente de esta página, entre la línea 13 y 21.)

The key is to hide the elements with the attribute lang es or en depending on the state of the checkboxes.(Look at the source code of this page, between line 13 and 21.)

¿No es mejor usar Javascript?

Isn't it better to use Javascript?

Un Diseñador Web sin conocimientos de programación podría editar y desarrollar esta web. Por otro lado hablamos de una técnica nativa al navegador y funciona aunque el usuario bloque Javascript o falle el Back-End. Por último la librería i18next en su versión reducida (i18next.min.js) ocupa 35,8Kb. Esta página contine HTML y textos en 2 idiomas pesando un total de 4Kb. Valora por ti mismo.

A Web Designer without programming skills could edit and develop this website. On the other hand we talk about a native technique to the browser and works even if the user blocks Javascript or fails the Back-End. Finally, the reduced version of the i18next library (i18next.min.js) occupies 35.8Kb. This page contains HTML and texts in 2 languages weighing a total of 4Kb. Rate for yourself.

¿Se guardar el idioma seleccionado?

Is the selected language saved?

Unicamente con CSS no es posible. En el código fuente he dejado un ejemplo de Javascript que soluciona el problema: de la línea 23 a la línea 34.

Only with CSS is not possible. In the source code I have left an example of Javascript that solves the problem: from line 23 to line 34.

Funciona con esta página, selecciona el idioma que quieras y refresca el navegador.

Works with this page, select the language you want and refresh the browser.