Emoticonos: ¿fondos CSS o imágenes en línea?

Estaba pensando en reemplazar el texto del usuario como :), :P en comentarios con caritas (emoticones). Usando expresiones regulares. ¿Crees que es una buena idea que el reemplazo sea un elemento de intervalo con una clase? ¿Entonces aplico la imagen sonriente a esa clase?

¿O debería simplemente reemplazar ese texto con <img> etiquetas?

Por lo general, CSS no se ve como parte del contenido, pero estos emoticonos de imágenes son... (si deshabilitas el CSS, el texto podría cambiar su significado porque faltan los emoticonos)

preguntado el 22 de mayo de 12 a las 17:05

a que te refieres con reemplazar :) con un emoticón? Eso is an emoticono. -

@Darknight Llamo a la versión de imagen "emoticones", a la versión de texto "emoticonos" -

4 Respuestas

Un emoticón es información visual que se presenta mediante caracteres, por lo que si reemplaza y dice “:-)” por algo, los candidatos naturales son caracteres especiales como “☺” (U+263A CARA SONRIENTE BLANCA) y un img etiqueta como <img alt=":-)" src="smiley.png">.

El uso de un elemento con una imagen de fondo tiene varios inconvenientes, incluida la falta de una contrapartida a la alt atributo y el comportamiento común del navegador de suprimir imágenes de fondo en la impresión.

Es algo arriesgado cambiar programáticamente cualquier cosa que parezca un emoticón, por ejemplo, una imagen. No puedes estar seguro de que cada “:-)” sea un emoticón. Todo tipo de combinaciones de caracteres extraños pueden surgir en campos especiales. Además, si el usuario estaba escribiendo, por ejemplo sobre nosotros emoticonos, parte del contenido podría perderse o distorsionarse en el reemplazo.

contestado el 22 de mayo de 12 a las 17:05

si tiene muchos emoticonos, es mejor que use el truco de css sprite porque significa que el navegador solo tiene que descargar un archivo de imagen en lugar de descargar una docena de archivos más pequeños

esto dará como resultado menos gastos generales y un mejor almacenamiento en caché

contestado el 22 de mayo de 12 a las 17:05

@FlorianMargaine es menos probable que se almacenen en caché muchas imágenes más pequeñas que una imagen grande: monstruo del trinquete

Sí, mi mal, leí incorrectamente tu respuesta (por eso eliminé el comentario). - florián margaine

Utilice CSS para mostrar las imágenes. La mejor práctica es eliminar los caracteres no deseados, los caracteres invisibles y las etiquetas HTML de la entrada del usuario, para evitar la inyección de código HTML y las secuencias de comandos entre sitios.

Respondido el 10 de junio de 12 a las 19:06

Tenga los emoticonos en texto sin formato y muestre una imagen en su lugar con CSS.

Puedes lograrlo usando un <span> u otro elemento.

Por ejemplo, :) debiera ser <span class="normalsmiley">:)</span> en el código.

Luego, el texto tendrá sentido para las personas que no vean las imágenes o que tengan CSS deshabilitado (verán un emoticón de texto).

Respondido el 05 de Septiembre de 13 a las 16:09

Pero luego, si CSS está habilitado y las imágenes están deshabilitadas (o simplemente no se ven), el emoticón se pierde. Y supongo que la suposición implícita es que el emoticón es relevante. - Jukka K. Korpela

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.