CSS-sprites: unha descrición das técnicas básicas e consellos útiles

lugar moderno para ser rápido, agradable e eficiente, tanto na fase de desenvolvemento, e cando se traballa cun cliente. Como regra xeral, cada empresa que crea recursos en liña, procura ter o seu propio rostro, para atraer visitantes ao seu deseño, estilo, fiabilidade, velocidade e outros atributos.

propiedades útiles de sprites

CSS-sprites pode mellorar as características cualitativas do sitio web e imaxe da empresa. En esencia, non é moi complicado ferramenta de desenvolvemento, pero realmente acelera o proceso e recursos de desenvolvemento, ea velocidade do seu traballo.

Entre outras cousas, el simplifica o código e, en certo sentido, é portátil para outros recursos que, debido ao feito de que os css-sprites utilizados son semellantes como os parentes próximos, porque pode usar o diálogo mesmas ideas gráficas, elementos de deseño estilo, estrutura e contido da etiqueta.

No curso normal de desenvolvemento do sitio web para facer unha chea de fotos. Moitas veces, estas imaxes ocupan moi pouco espazo, pero sempre un arquivo separado. Para calquera sistema operativo de calquera servidor abrir un ficheiro - esa operación, nun lento, con todo, non difiren significativamente con respecto ao tempo cando un arquivo é aberto nos 13 por 13 píxeles, e cando o ficheiro é aberto a partir de 16 fotos de 52 por 52 píxeles. No primeiro caso, ten 16 arquivos e 16 abrir / ler operacións, no segundo caso, 16 imaxes serán obtidos como resultado da apertura de só un arquivo.

Se crear un conxunto de arquivos sobre o tema (menú horizontal, formas de diálogo, os elementos de deseño calculadora botóns de calendario ...) que tales imaxes poden ser combinados de forma flexible cambiou de sitio para web.

a desvantaxe

Cando non son fans, moi brincalhões recomendados para usar CSS sprites son necesariamente os que están a estudar coidadosamente o tema e mostra claramente que é sempre práctico para traballar á moda antiga.

De feito, se hai un arquivo de 16 fotos, en vez de 16 abrir / ler operacións será un máis que 16 arquivos de imaxe. Pero o truco é que cada navegador ten un caché, e leva algo só como un último recurso. Ademais, xeralmente os elementos da páxina son cargados cando visitar a páxina e, a continuación, cargado soamente modificado.

Outro aspecto. Normalmente, a imaxe é cortada, non pegados nun único arquivo. Dalgunha forma, desenvolveu unha tecnoloxía, é mellor dicir, o costume. O deseñador crea o esquema e deseño usa as súas pezas: pezas finamente cortada do esquema. Opoñentes sprites cren que incorporarse varias imaxes nun arquivo - actividade consumindo, o que aumenta o proxecto total de páxinas.

Hai os desenvolvedores que cren e optimizar o número de HTTP solicitudes, crendo que esta ocupación é máis pragmático que css-sprites.

Todos os tempos indicados son, sen dúbida importante, pero moito máis importante é a visión: ela debe ser aplicada dentro de límites razoables.

Automatización e CSS-Sprites

Se non ten sentido para realizar CSS Sprites xerador e comezar a parte dereita do deseño, a continuación, nada impide que simplemente facer esta parte do camiño normal. Se a tecnoloxía convencional fai que sexa necesario cortar centos de imaxes, é preferible a esbozar a función JavaScript, que necesariamente vai escoller entre a zona desexada do duende e amosar-lo.

Débese notar, porén, que o sprite de dous ou tres elementos, ou outra ducia - todo ben, pero cando en centos de Sprite de debuxos, algúns con escribindo problemas de funcións JavaScript, por suposto, non vai ocorrer, pero canto traballo será necesario para a creación de un gran Sprite tales ... Ademais, cola imaxes - este xerador de Sprite un CSS e fai que a imaxe desexada e CSS-código para el, el non lle importaba que vai os elementos constitutivos da entidade gráfica. Os problemas xorden cando refacer o sitio cambio de deseño, retirada e incorporación de novos elementos. Desenvolver un Sprite, ten que pensar non sobre como usalo, e como, a continuación, cambiar.

beneficio tema de usar sprites

A diferenza de linguaxes de programación CSS, este é un conxunto relativamente estático de regras todas as dinámicas determínase polas regras eo seu contido funcional (estándar). Considerando os sprites no complexo, o HTML, CSS pode crear un deseño temático-funcional da biblioteca.

Por exemplo, a versión final do menú: basta conectar múltiples CSS-regras, JS-funcións e incluír o número do código de HTML-divs, pode obter o resultado. Ao cambiar o contido da imaxe do sprite, pode cambiar a aparencia do menú. Especificando o corpo da función, pode axustar a función.

Obter unha variante peculiar de programación orientada a obxectos (OOP). Por suposto, sería unha idea brillante, pero non vai ser moi brillante para destacar contra o fondo de outras linguaxes OOP, dialectos real. É só a principios dos anos 90, cando a OLP foi reavivado e converteuse en extraordinariamente rápido gañar un lugar ao sol, é unha idea específica e unha forma concreta da súa expresión, pero agora os desenvolvedores veñen-se con tantos dialetos como non ten diversificado ruso.

Xoguetes - unha pechincha para sprites

Excitación e programación - conceptos incompatibles, pero habilidades de programación, escribindo xogos, é marcadamente diferente do obschebytovoy (cifrado simple) e creativo (deseño e desenvolvemento de novas tecnoloxías, ideas).

Game Design chamamentos para gráficos vectoriais, porque a combinación de SVG-sprites + CSS-regras non só a demanda, pero moitas veces torna-se o obxecto do creador (web) para o obxecto dun xogo real. En particular, o popular xogo Counter Strike aplicaranse aos termos dos sprites, sprays bastante significativa Sinónimos: explosión, sangue, a visión ...

A frase "definir o v34 Sprite CSS" para o iniciado é perfectamente normal e comprensible. Sprites son encontradas non só no uso da utilidade, en esencia, pero tamén formou un nicho, que é moi completo, accesible e fácil de comprender un certo círculo de consumidores.

CSS-sprites: Exemplo

unha variedade de opcións para un idioma para cambiar páxinas do sitio web son utilizados, pero se o selector de idiomas para executar como unha icona, a solución a usar un Sprite pode ser coma este:

desvantaxes obvias sprites

Primeiro de todo, é lento e meticuloso proceso. É unha cousa - para cortar o deseño en pequenos anacos, e os outros - para recoller unha imaxe de moitos pequenos. Aplicar a idea da pantalla e poñelas todas as imaxes usadas no sitio é completamente inútil.

Mesmo a usar sprites CSS Generator, as dificultades non poden evitar, sobre todo cando é necesario cambiar o deseño do sitio web. Engadir algunhas decenas de imaxes de Sprite - non é un conxunto de elementos, os gráficos teñen gráficos, xeralmente é só aparecerá na pantalla, no canto de separar o código como unha matriz para atopar o elemento certo.

Estándar e desenvolvedores tras a súa alegación de que, como sprites asociado cun fondo política utilizada, é só unha imaxe de fondo e non o elemento web. elementos compoñentes gráficos da páxina debe manexar tag IMG.

É difícil chegar a un acordo sobre os motivos simples que cando o fondo o suficiente foi percibido como un fondo común. É só o fondo, non importa o que - un elemento miniatura ou a páxina completa.

Mentres tanto, o compoñente gráfico representado un serio obstáculo para o uso de sprites.

uso criterioso

A pesar do feito de que as palabras "tecnoloxía Internet" e "alta tecnoloxía" é considerado sinónimo, en realidade, é lento e ás veces moito traballo low-tech. Sprites non son particularmente vestida en comparación con outros pescozo na programación pura en JavaScript ou PHP, así como no desenvolvemento das funcións necesarias, establecendo procedementos de sitios de recheo ou información, tales como o fondo crear copias de arquivo.

Poder e perspectivas de uso de sistemas de xestión de contidos miúdo nivelado matices da súa aplicación práctica, e desenvolvemento manual de recursos, como norma xeral, leva á necesidade do tempo 1001 para reescribir un ou outro un algoritmo propietario.

Neste contexto, é importante simplemente razoable utilizar todo o que ofrece unha ferramenta moderna. Non sexa moi ansioso para usar un sobre o outro, ea regra de ouro na construción de sitio é o seguinte: ten que pensar non sobre como pasar o traballo o máis rápido posible, e como executa-lo para que en caso de calquera situación imprevista pode ser rapidamente resolto ningún problema.