C'è una quantità raccomandata di spaziatura tra gli sprite CSS?

Question

Di solito se creo sprite CSS, li allineo tutti uno accanto all'altro senza alcuna spaziatura. Ad esempio se tutte le immagini sono 10x10 pixel le metterei alle coordinate 0,10; 0,20; 10,10; 10,20.

Ma questo sembra causare problemi in determinate circostanze. Ad esempio durante lo zoom delle pagine e sul cellulare puoi vedere il bordo del prossimo folletto.

Perché si verifica questo problema, si tratta di errori di arrotondamento? Sta semplicemente aggiungendo la spaziatura intorno agli sprite nel modo migliore per evitare il problema? Se è così, c'è una quantità minima o raccomandata di spazio che dovremmo avere tra le icone nell'immagine dello sprite?

Answer 1

Sprite Bleeding può verificarsi sullo zoom a causa dell'arrotondamento, in particolare in IE (le versioni precedenti semplicemente arrotondate all'intero più vicino, e.G. un valore calcolato di 20.343px sarebbe visualizzato come 20px).
Poiché l'errore di arrotondamento non è mai maggiore di 1px, con una spaziatura di 1px su tutti i lati è già possibile risolvere il problema.

I moderni browser utilizzano un metodo chiamato rendering sub pixel per mitigare questo problema.

Answer 2

Sarebbe più semplice conservare gli sprite CSS memorizzati nelle caselle 50 x 50 px o 100 x x 100 px.

• Aiuta nell'organizzazione di immagini correlate in sprite.
• È possibile copiare incolla uno stile precedente e modificare solo una cifra per il nuovo stile.
• Non è necessario trovare manualmente la posizione dei pixel perfetta manualmente.
• Evita anche i casi problematici in cui a volte non è possibile controllare la larghezza/altezza di un elemento html e mostra le altre parti non intenzionali dell'immagine sprite.

es:

div.test { 
    background-image: url(image.png); 
    background-position: 100px 0px; 
} 
div.test:hover { 
    background-position: 100px 100px; /* Simple relation with previous style */ 
} 

div.box1 { 
    background-image: url(image.png); 
    background-position: 200px 0px; 
} 
div.box2 { 
    background-image: url(image.png); 
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */ 
}