Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Más allá del hack -9999px: ocultar texto con CSS de manera eficiente

Imago voragine.net

Ocultar texto con CSS es uno de las cosas que hay que hacer en casi todas las webs. La solución ha sido desde hace años desplazar el texto muy lejos usando text-indent para que «salga del cuadro» y quede fuera de la región visible de la ventana del navegador. Leo que esta solución clásica es ineficiente ya que crea una web de más de 10.000 píxeles de ancho que el navegador tiene que cargar: más píxeles, más tiempo de carga.

Hay otra solución que no influye en la carga de la página:

.hide-text {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}

A partir de la solución estándar, se pueden añadir unas reglas para que el contenedor del texto, además de no mostrar el texto, no ocupe:

.hide-text {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 width: 0;
 height: 0;
}

Dejar un comentario

No hay comentarios en esta entrada.
*
*

 

No hay trackbacks