Sprites de CSS: descripción, técnicas básicas y recomendaciones útiles

Un sitio web moderno debe ser rápido, hermoso yeficaz tanto en la etapa de desarrollo, y cuando se trabaja con el cliente. Como regla general, cada empresa que crea recursos de Internet aspira a tener su propia persona, atraer a los visitantes por su diseño, estilo, fiabilidad, velocidad y otras cualidades.

Propiedades útiles de los sprites

Los sprites CSS te permiten mejorar tanto la calidadcaracterísticas del sitio y la imagen de la empresa. En esencia, esta no es una herramienta de desarrollo muy compleja, pero realmente acelera el proceso de desarrollo de recursos y la velocidad de su trabajo.

Entre otras cosas, el código se simplifica y, enen cierto sentido, se vuelve portátil para otros recursos, que, gracias al uso de sprites CSS, se vuelven similares a los parientes cercanos, ya que puedes usar las mismas ideas gráficas, el estilo de los elementos del diálogo, la estructura y el contenido de las etiquetas.

En el proceso normal de desarrollo de sitios web, necesitapara hacer muchas fotos. Muy a menudo estas imágenes ocupan muy poco espacio, pero siempre son un archivo separado. Para cualquier sistema operativo de cualquier servidor, abrir un archivo es una operación que lleva mucho tiempo, pero no diferirá significativamente en el tiempo cuando se abre un archivo de 13 por 13 píxeles, y cuando se abre un archivo de 16 imágenes de 52 por 52 píxeles. En el primer caso, debe tener 16 archivos y 16 operaciones de abrir / leer, en el segundo caso, se obtendrán 16 imágenes abriendo solo un archivo.

Si crea conjuntos de dichos archivos por tema(el menú horizontal, los formularios de diálogo, los botones de la calculadora, los elementos de diseño del calendario ...) luego se pueden transferir esos conjuntos de imágenes del sitio al sitio.

El reverso de la moneda

Cuando hay ventiladores, demasiado juguetones recomienda el uso de CSS sprites son necesariamente los que están estudiando cuidadosamente el tema y muestra claramente que siempre es práctico trabajar de la manera antigua.

De hecho, si en lugar de 16 archivos de imagenhabrá un archivo de 16 imágenes, luego en lugar de 16 operaciones de apertura / lectura habrá uno. Pero el truco es que cada navegador tiene un caché y carga algo solo como último recurso. Además, generalmente los elementos de la página se cargan la primera vez que visita la página y solo se descargan los cambiados.

Otro aspecto Por lo general, las imágenes se cortan en lugar de pegarse en un solo archivo. De alguna manera la tecnología se ha desarrollado, es mejor decir, la costumbre. El diseñador crea un diseño y el diseño usa sus piezas: partes del diseño finamente cortadas. Los oponentes de los sprites creen que la recopilación de varias imágenes en un archivo es una tarea que consume tiempo, lo que aumenta el tiempo de desarrollo general de la página.

También hay desarrolladores que consideran y optimizan el número de solicitudes HTTP, creyendo que esta actividad es más pragmática que los sprites CSS.

Todos los momentos indicados indudablemente tienen importancia, pero mucho más importante es la opinión: todo debe ser aplicado dentro de límites razonables.

Sprites de automatización y CSS

Si no tiene sentido ejecutar el generador de sprites CSSy obtener la parte correcta del diseño, entonces nada impide simplemente alcanzar esta parte de la manera habitual. Si la tecnología habitual conduce a la necesidad de cortar cientos de imágenes, es preferible esbozar una función de JavaScript que necesariamente seleccionará el área requerida del elemento y la mostrará.

Cabe señalar, sin embargo, que el sprite dedos o tres elementos, o una docena de otros - todos los derechos, pero cuando cientos de dibujos en un sprite, a continuación, escribir un problemas JavaScript-función, por supuesto, no se producen, pero la cantidad de trabajo que se necesita para proporcionar una gran sprites tales ... Además, pegar imágenes es una cosa, el generador de sprites CSS hace tanto la imagen deseada como el código CSS para ello, no le importa cuántos elementos del sprite tendrá. Surgen problemas cuando rediseña el sitio, cambia el diseño, elimina y agrega nuevos elementos. Al desarrollar un sprite, no debes pensar cómo usarlo, sino cómo cambiarlo más tarde.

Beneficios temáticos del uso de sprites

A diferencia de los lenguajes de programación CSS, esto esun conjunto de reglas relativamente estáticas, todas sus dinámicas están determinadas por las reglas y su contenido funcional (según el estándar). Teniendo en cuenta en un conjunto de sprites, HTML, CSS, puede crear bibliotecas temáticas de diseño funcional.

Por ejemplo, la versión final del menú: simplemente conectando algunas reglas css, js-functions e incluyendo algunos HTML-divs en el código, puedes obtener el resultado. Al cambiar el contenido del sprite de la imagen, puede cambiar el aspecto de este menú. Al especificar el cuerpo de la función, puede ajustar el funcional.

Obtenga una versión originalprogramación orientada a objetos (OOP). Sin lugar a dudas, esta será una idea brillante, pero no se distinguirá demasiado vívidamente frente a otros dialectos de OOP en los idiomas reales. Es sólo en los primeros años 90, cuando la OLP se revivió y se convirtió en inusualmente rápida ganarse un lugar en el sol, es una idea específica y una forma concreta de su expresión, pero ahora los desarrolladores han llegado con tantos dialectos, ya que tiene diversas ruso.

Juguetes: una mina de oro para los duendes

La emoción y la programación son conceptos incompatibles,pero la calificación de los juegos de escritura del programador es notablemente diferente de la programación común (codificación simple) y creativa (diseño y desarrollo de nuevas tecnologías, ideas).

El diseño del juego apela a los gráficos vectoriales, porquela combinación de las reglas SVG sprite + CSS no solo está en demanda, sino que a menudo pasa de ser un objeto desarrollador (sitio) a ser un objeto de un juego real. En particular, el popular juego Counter Strike se aplica a los términos de los sprites, los sprays son sinónimos bastante significativos: explosión, sangre, vista ...

La frase "instalar sprites css v34" paradedicado es bastante normal y comprensible. Los Sprites obtuvieron no solo la utilidad en la aplicación en su esencia, sino que también formaron un nicho que se volvió completamente funcional, accesible y comprensible para un cierto círculo de consumidores.

Sprites de CSS: un ejemplo

Se utilizan una variedad de opciones para un idioma en particular para cambiar de página en el sitio, pero si el selector de idioma para llevar a cabo como un icono, la solución usando un sprite puede tener este aspecto:

Desventajas obvias de los sprites

En primer lugar, es laborioso y escrupulosoproceso. Una cosa es cortar un diseño en pedazos pequeños, el otro es recolectar una imagen de muchas pequeñas. Aplica la idea del lienzo y pon en él todas las imágenes utilizadas en el sitio, completamente fútil.

Incluso usando un generador de sprites CSS, las dificultadesno puede evitarse, especialmente cuando tiene que rediseñar el diseño del sitio. Agregar a unas pocas decenas de imágenes de sprite - no es un conjunto de elementos, los gráficos tienen gráficos, por lo general es simplemente aparece en la pantalla, en lugar de clasificar el código como una matriz para encontrar el artículo correcto.

El estándar y los siguientes desarrolladores aprueban,Como los sprites están relacionados con el fondo de la regla, esta es una imagen de fondo exclusivamente, no un elemento del sitio. El componente gráfico de los elementos de la página debe manipular las etiquetas img.

Con esto es difícil llegar a un acuerdo sobre la base simple de que el fondo no se percibió como un fondo general. Es solo un fondo, no importa qué: un elemento en miniatura o toda la página como un todo.

Mientras tanto, es el componente gráfico el que constituye un serio obstáculo en el uso de los sprites.

Uso razonable

A pesar del hecho de que los términos "tecnología de Internet"y la "alta tecnología" generalmente se considera sinónima, de hecho es un trabajo intensivo en mano de obra y en algunos lugares muy poco tecnológico. Los Sprites no destacan particularmente contra otros cuellos de botella, como la programación pura en JavaScript o PHP, o en términos de desarrollo de la funcionalidad necesaria, configuración de procesos para llenar sitios con información o, por ejemplo, creación de copias de fondo de archivos.

El poder y las perspectivas de los sistemas utilizadosla administración del sitio a veces se nivela con los matices de su aplicación práctica, y el desarrollo manual de recursos, como regla, lleva a la necesidad de reescribir uno u otro de sus propios algoritmos por primera vez.

En el contexto de lo que se dice, es importante simplemente en términos razonableslímites para usar todo lo que proporciona una herramienta moderna. No sea demasiado ansioso por utilizar uno sobre el otro, y la regla de oro en el sitio de construcción es el siguiente: es necesario pensar no acerca de cómo pasar el trabajo tan pronto como sea posible, y la forma de ejecutarlo para que en caso de cualquier situación imprevista se pueden resolver rápidamente cualquier problema

</ p>>