Una introducción al significado, ventajas y desventajas de CSS Sprites para el diseño CSS

Tecnología CSS Sprites Ya en 2005, Dave Shea, el propietario de CSS Zengarden, publicó una explicación detallada de esta tecnología en ALA.

Originalmente, solo circulaba entre los reproductores CSS como método de producción. Más tarde, aparecieron 14 reglas para sitios web de carga más rápida y circularon entre los técnicos. La primera regla, Realizar menos solicitudes HTTP, mencionaba los Sprites CSS. Así que este pequeño duende se hizo popular, e incluso aparecieron herramientas de generación online, lo cual fue imparable. Recientemente, muchos blogs nacionales han mencionado CSS Sprites. El ejemplo más famoso son las animaciones a continuación en google.co.kr. En la última versión de YUI, también se utilizan CSS Sprites. Casi todas las imágenes decorativas CSS están cubiertas por una imagen de 40×2000. Facebook, un importante sitio de redes sociales, utilizó recientemente una imagen de 22×1150 para cubrir todos los íconos. De repente, los CSS Sprites estaban por todas partes.

Cómo funcionan los sprites CSS

Sabemos que desde la revolución de CSS, HTML ha tendido a ser semántico. En general, el contenido decorativo ya no se escribe en etiquetas, sino que la tarea de representación se entrega a CSS. La GUI es colorida e indispensable para la decoración con varias imágenes hermosas. El método de producción en la nueva era es llenar HTML con varios ganchos y luego dejar que CSS se encargue de ello.

Cuando es necesario utilizar imágenes, esto se logra actualmente mediante el atributo CSS imagen de fondo combinado con repetición de fondo, posición de fondo, etc. (Digresión: ¿Por qué retiro la etapa actual, porque si el navegador admite contenido en el futuro? , método de implementación adicional). Nuestro protagonista es, habrás adivinado, la posición de fondo. Al ajustar el valor de la posición del fondo, la imagen de fondo puede aparecer frente a usted en diferentes apariencias. De hecho, la apariencia general de la imagen no ha cambiado debido al cambio en la posición de la imagen, solo ves lo que deberías ver. Es como la fecha de un reloj. La ves como 21 hoy y 22 mañana porque su posición ha subido un espacio. Probablemente sepa que los CSS Sprites generalmente solo se pueden usar en cajas de tamaño fijo (cajas), de modo que las partes que no deberían verse se puedan bloquear.

Usemos sprite.png de YUI como ejemplo. Si tenemos un fragmento de código de este tipo, max representa la maximización y min representa la minimización. Necesitamos combinarlos con las bellas imágenes correspondientes (para que nuestro sitio web sea atractivo):

Ambas clases usan la misma imagen:

Vemos una nube gris, sí, porque no hemos especificado la posición del fondo, que por defecto es 0 0. Puedes mirar sprite.png. Esta posición es el bloque gris. Bien, necesitamos encontrar las posiciones del signo más que representa la maximización y el signo menos que representa la minimización. Después de la medición, el botón de maximizar se encuentra a 350 px en el eje Y y el botón de minimizar se encuentra a 400 px en el eje Y. Piense en cómo podemos hacer que se muestren. Obviamente, necesitamos actualizar sprite.png y el código es el siguiente:

¡Esta vez lo logramos!

Ventajas de los sprites CSS

Aprendimos antes que la razón por la que CSS Sprites de repente se quedó sin fuerza está relacionada con su capacidad para mejorar el rendimiento del sitio web. Evidentemente, esta es una de sus grandes ventajas. Una gran cantidad de imágenes bajo el método de producción normal ahora se fusionan en una sola imagen, lo que reduce en gran medida la cantidad de conexiones HTTP. La cantidad de conexiones HTTP tiene un impacto importante en el rendimiento de carga del sitio web.

Desventajas de los sprites CSS

En cuanto a la mantenibilidad, esto es generalmente un arma de doble filo. A algunas personas les puede gustar y a otras no, porque cada vez que se cambia la imagen, hay que eliminar o agregar contenido a la imagen, lo que parece un poco engorroso. Y calcular la posición de las imágenes (especialmente las de miles de píxeles) también es bastante desagradable. Por supuesto, bajo el lema del desempeño, todo esto se puede superar.

Dado que la posición de la imagen debe fijarse en un valor absoluto, se pierde flexibilidad como el centro.

Como mencionamos anteriormente, el tamaño del cuadro debe ser limitado antes de poder usar CSS Sprites; de lo contrario, puede interferir con la imagen. Es decir, los Sprites CSS no son adecuados en algunas situaciones donde se requieren fondos en mosaico no unidireccionales y escalado de páginas web. La solución de YUI es aumentar la distancia entre imágenes para poder mantener una escala limitada.

Resumen de sprites CSS

El rendimiento supera todo lo demás. Los CSS Sprites son una tecnología que vale la pena promover. Es especialmente adecuado para FIR, como el reemplazo de íconos de tamaño fijo. Para mantener la compatibilidad, es una buena idea mantener partes de la imagen a cierta distancia.