¿Es indiferente usar text-indent que display:none?

[chrisdgallego]

Hola.
Hacía un menú de redes sociales en las que participo para una web y mirando algunos ejemplos vi cómo unos(la mayoría) usan text-indent más que display:none para ocultar el texto que será sustituido por el logo de cada red social.

Bien, uno desplaza el texto y el otro lo hace no visible si lo metemos en algo que lo contenga. Pero...¿cuál sería más idóneo de utilizar para el mismo fin?
¿alguna razón por usar uno más que otro?

Saludos y gracias

[Naahuel]

A ver, las dos cosas son completamente diferentes. Veo que entendés bien la diferencia:

text-indent: Aplica sangría a la primera línea de texto del elemento.
display:none: Oculta todo el elemento, quitándolo del flujo del DOM.

¿Cuáles son las aplicaciones más comunes?

text-indent
El uso más común es justamente para aplicar sangrías en párrafos :P
Pero en tu caso, sirve para ocultar el texto aplicando una sangría negativa muy grande.
Supongamos este HTML para un menu:

Código HTML:

<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Contacto</a></li>
    <li><a href="#">Etc</a></li>
</ul>
 

Pero ahora yo quiero que cada botón del menú sea de 50px de ancho por 50px de alto y que además tenga una imagen de fondo, pero ocultando el texto del link pues quiero la imagen:

Código CSS:

ul li a{
    display:block;
    width:50px;
    height:50px;
    text-indent:-9999px;
}
 

Lo que sucedería acá es que los elementos no tienen el texto visible, pero ocupan las dimensiones que le he dado. Solamente ocultamos el texto! Si hubiésemos usado display:none, todo el elemento se habría ocultado y no veríamos ni la imagen de fondo ni el espacio que ocuparían si estuvieran allí.

La importancia de este método radica en que el HTML es muy semántico! O sea, legible y comprensible por buscadores y otros dispositivos. Es importante que el texto del botón esté ahí pues así estos dispositivos y buscadores pueden leerlo, ya que no podrían leer el texto en una imagen.

display:none
Sirve para ocultar un elemento y todo lo que contiene adentro. Esto no implica solamente hacerlo invisible, sino que además se quita el espacio que ocuparía del DOM.

Por ejemplo, si tengo un párrafo con una imagen en el medio, el texto estaría por arriba y por debajo de la imagen pues la imagen ocupa un espacio. Si usara visibility:hidden sobre la imagen, esta se haría invisible. PERO el espacio que ocupa sigue ahí! Se vería como un espacio blanco donde estaría la imagen. display:none la quita completamente.

[chrisdgallego]

Perfecto..gracias Nahuel