CSS Sprite techniques, css background o img's clip

Question

Existen dos técnicas de sprites de imágenes. La versión "clásica" utiliza las propiedades background y background-position css. (como se describe aquí http://www.alistapart.com/articles/sprites)

La "segunda" versión usa una etiqueta de imagen y su propiedad clip css. (http://css-tricks.com/css-sprites-with-inline-images/)

Mi pregunta es, ¿hay ventajas de usar la "segunda" versión sobre la versión "clásica"?

Gracias y, Viktor

Answer 1

La diferencia viene dada principalmente por las la semántica del documento: Debe siendo sólo el uso de fondos para gráficos decorativos y de diseño, y sólo utilizar etiquetas de imagen para los gráficos que forman parte de la contenido de tu página.

Recuerde que las páginas deberían ser útiles y utilizables sin ningún CSS: con la segunda técnica, esto significaría que todo su mapa de sprites estaría visible (no se cliparía) en cualquier lugar donde use un sprite - muy ¡confuso!

La primera técnica no mostraría sprites, pero tampoco estaría mal ni confundiría.

Si un gráfico es contenido o decoración se vuelve un poco complicado cuando se consideran cosas como iconos, donde las técnicas de sprites son realmente útiles. Personalmente, prefiero usar imágenes de fondo para iconos, ya que están agregando información a otro elemento (por ejemplo, un control de enlace o botón), no elementos por derecho propio.

En resumen: los sprites basados ​​en etiquetas de imagen son un poco una técnica rota; yo no los usaría.

Answer 2

Hay un caso de uso cuando desea imprimir una página con iconos (por ejemplo, una tarjeta de contactos de la organización con teléfono/skype/etc.). Así que hay dos opciones:

 
- use separate img elements 
- use sprite via pseudo(:after) elements with 'content' and 'clip' property 

Answer 3

Recuerde que debe especificar las dimensiones de la etiqueta img demasiado cuando se utiliza el segundo método (clip) de manera que todo el sprite no se mostrará incluso cuando CSS está deshabilitado. Una ventaja de este método es que, con el clip, las imágenes se muestran incluso cuando los temas de alto contraste están habilitados en Windows, lo que no ocurre con las imágenes de fondo.

comprobar esto dos artículos para más información:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

el uso de sprites a través de seudo (: después) de los elementos con 'contenido' y la propiedad 'pinza'

No recomendaría este método re. Puede que no sea un problema si solo desea mostrar un número pequeño de imágenes, pero es extremadamente lento si lo aplica a cientos de elementos (los pseudo elementos CSS son malos para el rendimiento en general), especialmente en máquinas más lentas (teléfonos inteligentes, etc.) o navegadores anteriores como IE8.