Voglio sapere quando non usare gli sprite CSS. Gli sprite CSS funzionano alla grande, ma ci sono occasioni in cui creano molti mal di testa?quando non utilizzare gli sprite CSS?
risposta
La manutenibilità del sito ne risentirà. Combinare solo le immagini che appartengono alla stessa unità logica ed è improbabile che vengano aggiornate separatamente. Mantieni le immagini che probabilmente cambieranno separatamente per cominciare.
Abbiamo avuto un momento difficile quando volevamo posizionare l'immagine in modo dinamico.
background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: left bottom;
Questo è difficile (se non impossibile) fare utilizzando uno sprite.
CSS sprites funziona male per <input type="text">
in cui l'utente può inserire più di uno scatto nella casella, come lo sfondo scorre in alcune versioni di IE.
Inoltre funzionano male se si desidera ripetere il modello.
Come tutte le cose, ci sono momenti in cui è utile, e ci sono momenti in cui è dannoso.
Molti sviluppatori preferiscono utilizzare gli sprite CSS perché risparmiano sul tempo richiesto: il browser effettua una richiesta, scarica l'immagine e tutti i vari sprite ora sono automaticamente memorizzati nella cache e sfolgoranti.
Quindi, come può far male?
Perché dimensione di download! = Dimensioni della memoria.
Quel PNG o GIF che è solo 10kb potrebbe effettivamente essere molto, molto più grande in termini di dimensioni una volta che il browser lo carica in memoria. Il problema è che mentre qualcosa come GIF comprime aree di colore solide, il browser la espande in una bitmap, dove tutte le immagini di dimensioni uguali utilizzano una memoria uguale.
E carica una nuova bitmap ogni ora in cui si utilizza quell'immagine da qualche parte.
Quindi tutto con moderazione.
Vedere: http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/ per ulteriori informazioni.
Possono causare mal di testa per gli utenti se desiderano scaricare una determinata immagine. Per prima cosa non otterranno l'opzione "Salva immagine come". Se capiscono di usare "Visualizza immagine di sfondo", avranno anche un'immagine enorme con molte altre immagini.
Questo è il motivo per cui gli sprites vengono salvati per "utilità" (cioè i pulsanti) o per le immagini di progettazione.
L'utilizzo di un'immagine più grande potrebbe essere un mal di testa ... Quando le foto sono combinate in dimensioni ridotte e le foto adiacenti sono solo 1 o 2 pixel l'una dall'altra, gli sprite CSS possono essere una buona soluzione. Nel nostro caso, http://www.nbhuntop.com, lo usiamo solo per i componenti del menu, tra cui: Home, Informazioni, Prodotti. E tutte le foto sono in formato gif e nessuno scaricherà affatto queste foto.
"Nessuno scaricherà affatto queste foto"? Non sembri capire come funziona il Web. –
Gli sprites non devono mai essere utilizzati quando le dimensioni delle immagini sono molto diverse.
Perché in questo caso la dimensione dello sprite è abbastanza grande.
Recentemente ho convertito le immagini da 3,5 MB in uno sprite e le dimensioni sono state scattate fino a 17 MB!
- 1. Posizione sfondo non funzionante per gli sprite CSS
- 2. Quando uno Sprite CSS è troppo grande?
- 3. È possibile utilizzare gli sprite di punti OpenGL per simulare gli sprite dei tabelloni?
- 4. CSS Navigation Sprite - Forme dispari (non quadrato)
- 5. Sprite CSS vs URI di dati
- 6. In che modo gli sprite CSS velocizzano un sito web?
- 7. C'è una quantità raccomandata di spaziatura tra gli sprite CSS?
- 8. Come utilizzare uno sprite CSS per un'immagine di sfondo ripetuta?
- 9. Quando utilizzare gli editor WYSIWYG?
- 10. come utilizzare gli sprite delle immagini in GWT?
- 11. Distruggi gli sprite in Phaser
- 12. IE (7?) Distorce gli sfondi dagli sprite?
- 13. Quando utilizzare Meteor.methods e utilizzare gli stub
- 14. Best practice per immagine sprite CSS
- 15. Tecniche CSS Sprite, sfondo css o clip di img
- 16. Quando utilizzare gli indici compositi?
- 17. Scala CSS sprite pixel art senza smoothing dell'immagine
- 18. Estrapola la porzione di sfondo in css dallo sprite
- 19. Quando non utilizzare RegexOptions.Compiled
- 20. È possibile utilizzare immagini di sfondo ripetute negli sprite?
- 21. Come utilizzare SVG Sprite Sheet come immagine di sfondo CSS mantenendo le proporzioni e la scalabilità
- 22. Quando utilizzare gli attori locali o remoti?
- 23. Quando utilizzare CCSpriteBatchNode?
- 24. Rimuovi sprite spawn continuo quando viene toccato
- 25. Quando utilizzare, non utilizzare, OneToOne e ManyToOne
- 26. Come fare effetto di transizione su CSS sprite hover
- 27. Tipi incorporati, quando (non) utilizzare?
- 28. JPA - Quando utilizzare getTransaction() quando gli oggetti persistono
- 29. PHP Dynamic Sprite Creazione
- 30. Generazione CSS Sprite nel processo di compilazione gradle?
"E carica una nuova bitmap ogni volta che si utilizza quell'immagine da qualche parte." Qualche fonte su questo? – kahoon