Sprite CSS: descrizione, tecniche di base e consigli utili

Un sito moderno dovrebbe essere veloce, bello eefficace sia in fase di sviluppo, sia quando si lavora con il cliente. Di norma, ogni azienda che crea risorse Internet aspira ad avere una propria persona, attira i visitatori per il suo design, stile, affidabilità, velocità e altre qualità.

Proprietà utili degli sprite

Gli sprite CSS ti consentono di migliorare entrambe le qualitàcaratteristiche del sito e l'immagine dell'azienda. In sostanza, questo non è uno strumento di sviluppo molto complesso, ma accelera davvero il processo di sviluppo delle risorse e la velocità del loro lavoro.

Tra le altre cose, il codice è semplificato e, inin un certo senso, diventa portabile ad altre risorse, che, grazie all'uso degli sprite CSS, diventano simili come parenti stretti, perché è possibile utilizzare le stesse idee grafiche, lo stile del design degli elementi di dialogo, la struttura e il contenuto dei tag.

Nel normale processo di sviluppo del sito Web, è necessariofare molte foto Molto spesso queste immagini occupano pochissimo spazio, ma sono sempre un file separato. Per qualsiasi sistema operativo di qualsiasi server, l'apertura di un file è un'operazione che richiede molto tempo, ma non differirà in modo significativo nel tempo quando un file viene aperto di 13 per 13 pixel e quando viene aperto un file di 16 immagini 52 per 52 pixel. Nel primo caso, è necessario disporre di 16 file e 16 operazioni di apertura / lettura, nel secondo caso verranno ottenute 16 immagini aprendo un solo file.

Se crei set di tali file per argomento(il menu orizzontale, i moduli di dialogo, i pulsanti della calcolatrice, gli elementi di progettazione del calendario ...) quindi tali serie di immagini possono essere trasferite dal sito al sito.

Il retro della moneta

Quando ci sono fan che sono troppo veloci nel consigliare di usare gli sprite CSS, assicurati di trovare quelli che studiano attentamente la domanda e in modo intelligente dimostra che è sempre più pratico lavorare alla vecchia maniera.

Infatti, se invece di 16 file di immagineci sarà un file di 16 immagini, quindi invece di 16 operazioni di apertura / lettura ce ne sarà una. Ma il trucco è che ogni browser ha una cache e carica qualcosa solo come ultima risorsa. Inoltre, in genere gli elementi della pagina vengono caricati la prima volta che visiti la pagina, quindi vengono scaricati solo quelli modificati.

Un altro aspetto Di solito le immagini vengono tagliate piuttosto che incollate in un unico file. In qualche modo la tecnologia si è sviluppata, è meglio dire, l'usanza. Il designer crea un layout e il layout utilizza i suoi pezzi: parti del layout finemente tritate. Gli avversari degli sprites ritengono che la raccolta di più immagini in un file sia un'attività che richiede tempo, aumentando il tempo di sviluppo complessivo della pagina.

Ci sono anche sviluppatori che considerano e ottimizzano il numero di richieste HTTP, ritenendo che questa attività sia più pragmatica degli sprite CSS.

Tutti i momenti indicati hanno indubbiamente un significato, ma molto più importante è l'opinione: tutto dovrebbe essere applicato entro limiti ragionevoli.

Automazione e sprite CSS

Se non ha senso eseguire il generatore di sprite CSSe ottenere la parte giusta del design, quindi nulla impedisce di recuperare questa parte nel solito modo. Se la solita tecnologia porta alla necessità di tagliare centinaia di immagini, è preferibile abbozzare una funzione JavaScript che necessariamente selezionerà l'area richiesta dallo sprite e la visualizzerà.

Va notato, tuttavia, che lo sprite dadue o tre elementi o una dozzina o due, dovunque andasse, ma quando ci sono cento disegni nello sprite, ovviamente non ci saranno problemi con la scrittura della funzione JavaScript, ma quanto impegno ci vorrà per creare uno sprite così grande ... Inoltre, incollare le immagini è una cosa, il generatore di sprite CSS fa sia l'immagine desiderata che il codice CSS per essa, non gli importa quanti elementi dello sprite saranno. I problemi sorgono quando ridisegni il sito, cambi il design, cancelli e aggiungi nuovi elementi. Quando sviluppi uno sprite, non devi pensare a come usarlo, ma come cambiarlo in seguito.

Vantaggi tematici dell'utilizzo degli sprite

A differenza dei linguaggi di programmazione CSS, questo èun insieme di regole relativamente statiche, tutte le sue dinamiche sono determinate dalle regole e dal loro contenuto funzionale (secondo lo standard). Considerando in una serie di sprite, HTML, CSS, è possibile creare librerie tematiche di design-funzionale.

Ad esempio, la versione finale del menu: semplicemente collegando alcune css-rules, js-functions e includendo alcuni HTML-div nel codice, puoi ottenere il risultato. Modificando il contenuto dello sprite dell'immagine, è possibile modificare l'aspetto di questo menu. Specificando il corpo della funzione, è possibile regolare il funzionale.

Ottieni una versione originaleprogrammazione orientata agli oggetti (OOP). Indubbiamente, questa sarà una brillante idea, ma non sarà troppo vivida rispetto agli altri dialetti dell'OOP nelle lingue reali. Solo agli inizi degli anni '90, quando l'OOP rianimò e iniziò a guadagnare un posto straordinariamente rapido sotto il sole, rappresentò un'idea concreta e una forma specifica della sua espressione, e oggi gli sviluppatori hanno escogitato tanti dialetti quanti non c'è una lingua russa diversa.

Giocattoli - una miniera d'oro per gli sprite

Eccitazione e programmazione sono concetti incompatibili,ma la qualifica dei programmatori di giochi per la scrittura è notevolmente diversa dalla comune (semplice codifica) e creativa (progettazione e sviluppo di nuove tecnologie, idee).

Il design del gioco fa appello alla grafica vettoriale, perchéla combinazione di sprite SVG + regole CSS non è solo richiesta, ma spesso passa da un oggetto sviluppatore (sito) a un oggetto di un gioco reale. In particolare, il popolare gioco Counter Strike si applica ai termini degli sprite, gli spray sono sinonimi piuttosto significativi: esplosione, sangue, vista ...

La frase "installa sprites css v34" perdedicato è abbastanza normale e comprensibile. Gli sprite hanno acquisito non solo utilità nella loro essenza, ma hanno anche formato una nicchia che è diventata pienamente funzionale, accessibile e comprensibile a una determinata cerchia di consumatori.

Sprite CSS: un esempio

Per cambiare le pagine di un sito in una o in un'altra lingua, viene utilizzata una varietà di opzioni, ma se il selettore della lingua viene eseguito sotto forma di un'icona, la soluzione che utilizza lo sprite potrebbe essere simile a questa:

Ovvi svantaggi degli sprite

Prima di tutto, è laborioso e scrupolosoprocesso. Una cosa è tagliare un disegno in piccoli pezzi, l'altro è raccogliere un'immagine da molti piccoli. Applicare l'idea della tela e mettere su di essa tutte le immagini utilizzate sul sito, completamente inutile.

Anche usando un generatore di sprite CSS, difficoltànon può essere evitato, specialmente quando devi ridisegnare il design del sito. Inserire nello sprite alcune decine di immagini: non si tratta di una serie di elementi, la grafica è grafica, di solito viene semplicemente visualizzata sullo schermo, piuttosto che essere ordinata nel codice come una matrice alla ricerca dell'elemento desiderato.

Lo standard e i seguenti sviluppatori approvano,Dal momento che gli sprite sono correlati allo sfondo della regola, questa è un'immagine di sfondo esclusiva, non un elemento del sito. Il componente grafico degli elementi della pagina dovrebbe manipolare i tag img.

Con questo è difficile concordare sulla base semplice che lo sfondo non è stato percepito come un background generale. È solo uno sfondo, non importa cosa - un elemento in miniatura o l'intera pagina nel suo complesso.

Nel frattempo, è la componente grafica che rappresenta un serio ostacolo all'uso degli sprite.

Uso ragionevole

Nonostante il fatto che i termini "tecnologia Internet"e "alta tecnologia" è di solito considerata sinonimo, in effetti è un lavoro ad alta intensità di lavoro e in alcuni casi molto non tecnologico. Gli sprite non si distinguono particolarmente da altri colli di bottiglia, come la pura programmazione in JavaScript o PHP, o in termini di sviluppo delle funzionalità necessarie, impostazione di processi per riempire i siti di informazioni o, ad esempio, creazione di copie di sfondo di archivi.

Il potere e le prospettive dei sistemi utilizzatila gestione del sito a volte viene livellata dalle sfumature della loro applicazione pratica e lo sviluppo manuale delle risorse, di norma, porta alla necessità di riscrivere l'uno o l'altro dei propri algoritmi per la 1001a volta.

Nel contesto di ciò che viene detto, è importante semplicemente in termini ragionevolilimiti di utilizzare tutto ciò che fornisce uno strumento moderno. Non essere troppo ansiosi di utilizzare uno sopra l'altro, e la regola d'oro nella costruzione del sito si legge come segue: è necessario pensare non a come passare il lavoro il più presto possibile, e come eseguire in modo che in caso di qualsiasi situazione imprevista possono essere rapidamente risolti alcun problema.

</ p>>