< Zaserafin />

Marzo 3, 2024
4 min de lectura
Tutorial

Traducciones con CSS

Crea simple traducciones con CSS de manera dinámica y versátil

En un mundo cada vez más globalizado, tener un sitio web que pueda adaptarse a múltiples idiomas es esencial para llegar a una audiencia más amplia. Existen multiples formas de lograr un sitio web multilingüe, una de ellas es mediante el uso de traducciones con CSS. En este articulo, exploraremos cómo puedes implementar traducciones en tu sitio web utilizando solo CSS.

¿Por qué Traducciones con CSS?

Antes de sumergirnos en cómo codificarlo, veamos por qué podrías querer utilizar traducciones con CSS en tu sitio web. La principal razón es la simplicidad y la eficiencia. En lugar de depender completamente de JavaScript o plugins complicados, puedes utilizar las capacidades de CSS para modificar el contenido de tu sitio web según el idioma seleccionado, lo cual nos ofrece un gran dinamismo y facilidad a la hora de escribir las traducciones.

Además, las traducciones con CSS pueden mejorar la experiencia del usuario al reducir el tiempo de carga y mantener el rendimiento del sitio web, ya que no agregan peso adicional a la carga de recursos.

¿Cómo podemos lograrlo?

El truco para poder lograr traducciones con CSS es utilizar las propiedades “content” que nos ofrece de manera nativa este lenguaje. Con ello podremos modificar el contenido de manera tal que se ajuste al idioma seleccionado. Iniciemos con el siguiente HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de HTML</title>
  </head>
  <body>
    <div class="es">
      <h1 class="title"></h1>
      <p class="subtitle"></p>
    </div>
  </body>
</html>

Con esa estructura tenemos un titulo y una descripción dentro de nuestro body, pero ninguno tiene contenido textual. Para ello utilizaremos CSS 😱 Utilicemos el siguiente css:

div.es .title::after {
  content: "Hola Mundo!!!";
}

div.es .subtitle::after {
  content: "Estamos traduciendo con CSS! 😱";
}

El resultado debería verse de la siguiente manera:

Agregando multiples lenguajes

Sigamos con un ejemplo un poco más completo, con varios lenguajes usados al mismo tiempo. Cambiemos un poco el CSS para que se parezca a esto:

div.es .title::after {
  content: "Hola Mundo!!!";
}

div.es .subtitle::after {
  content: "Estamos traduciendo con CSS! 😱";
}

div.en .title::after {
  content: "Hello World!!!";
}

div.en .subtitle::after {
  content: "We are translating with CSS! 😱";
}
<div class="es">
  <h1 class="title"></h1>
</div>
<div class="en">
  <p class="subtitle m-0"></p>
</div>

Vemos que tenemos dos etiquetas con idioma en nuestro HTML ¿Cómo será el comportamiento de este código?

Cómo podemos observar estamos aplicando las traducciones con CSS directamente, sin necesidad de utilizar ningún código agregado en otro lenguaje. Es casi increíble la capacidad de este lenguaje 😱.

¿Cómo podemos mejorar esto?

Cómo hemos visto hasta ahora tenemos que ir modificando nuestro CSS y ajustando las clases para poder aplicar las traducciones, pero esto es bastante tedioso, aunque podemos mejorar bastante la forma de trabajar las traducciones.

Una buena forma de mejorar este código es mediante el uso de variables en css para manejar el contenido que queremos traducir, de esta manera podríamos separar las traducciones por archivos o podríamos tener lenguajes por defecto y/o cargarlos en la medida que los necesitemos. Veamos un ejemplo…

Supongamos que tenemos el siguiente CSS con nuestras variables definidas:

.es {
  --mensaje-saludo: "Hola Mundo!!!";
  --mensaje-descriptivo: "Estamos traduciendo con CSS!!!";
}

.en {
  --mensaje-saludo: "Hello world!!!";
  --mensaje-descriptivo: "We are translating with CSS!!!";
}

.variable-title::after {
  content: var(--mensaje-saludo);
}

.variable-description::after {
  content: var(--mensaje-descriptivo);
}

Podemos ver que las traducciones ahora se almacenan en variables, lo cual mejora en gran medida la legibilidad y escalabilidad de nuestro código CSS. Modifiquemos nuestro HTML para que se adapte a este ejemplo. Nos quedaría de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de HTML</title>
  </head>
  <body>
    <div class="es">
      <h3 class="variable-title"></h3>
      <p class="variable-description m-0"></p>
    </div>
    <div class="en">
      <h3 class="variable-title"></h3>
      <p class="variable-description m-0"></p>
    </div>
  </body>
</html>

Ahora cada uno de los contenedores tendrá definidas las variables de CSS con las traducciones que necesitemos, las cuales usaremos para definir el contenido de nuestros elementos. Este ejemplo debería verse algo así:

Conclusión

Las traducciones con CSS pueden ser una solución elegante para agregar soporte multilingüe a tu sitio web. Sin embargo, es importante tener en cuenta que esta técnica tiene limitaciones y no es adecuada para todos los casos. Para sitios web más complejos o con una gran cantidad de contenido, puede ser más apropiado utilizar soluciones más avanzadas que involucren JavaScript o incluso servicios de traducción automatizada.

Espero que esta guía te haya sido útil para aprender un poco más sobre CSS! Si tienes dudas o sugerencias, no dudes en contactarte conmigo.

Etiquetas

CSS Experimental