Come utilizzare gli sprite CSS con la modalità chiara e scura
CSS gli sprite sono una tecnica utilizzata nello sviluppo web per ridurre il numero di HTTP richieste fatte da una pagina web. Implicano la combinazione di più piccole immagini in un unico file di immagine più grande e quindi l'utilizzo di CSS per visualizzare sezioni specifiche di quell'immagine come singoli elementi sulla pagina web.
Il vantaggio principale dell'utilizzo degli sprite CSS è che possono aiutare a migliorare il tempo di caricamento della pagina per un sito web. Ogni volta che un'immagine viene caricata su una pagina web, richiede una richiesta HTTP separata, che può rallentare il processo di caricamento. Combinando più immagini in un'unica immagine sprite, possiamo ridurre il numero di richieste HTTP necessarie per caricare la pagina. Ciò può comportare un sito Web più veloce e più reattivo, in particolare per i siti con molte piccole immagini come icone e pulsanti.
L'uso degli sprite CSS ci consente anche di sfruttare la memorizzazione nella cache del browser. Quando un utente visita un sito Web, il browser memorizzerà nella cache l'immagine sprite dopo la prima richiesta. Ciò significa che le successive richieste di singoli elementi sulla pagina Web che utilizzano l'immagine sprite saranno molto più veloci poiché il browser avrà già l'immagine nella sua cache.
Gli sprite CSS non sono così popolari come una volta
Gli sprite CSS sono ancora comunemente usati per migliorare la velocità del sito, anche se potrebbero non essere così popolari come una volta. A causa dell'elevata larghezza di banda, WebP formati, compressione dell'immagine, reti di distribuzione di contenuti (CDN), caricamento lentoe forte memorizzazione nella cache tecnologie, non vediamo così tanti sprite CSS come una volta sul web... anche se è ancora un'ottima strategia. È particolarmente utile se hai una pagina che fa riferimento a una moltitudine di piccole immagini.
Esempio di Sprite CSS
Per usare gli sprite CSS, dobbiamo definire la posizione di ogni singola immagine all'interno del file immagine sprite usando i CSS. Questo è in genere fatto impostando il background-image
ed background-position
proprietà per ogni elemento della pagina Web che utilizza l'immagine sprite. Specificando le coordinate x e y dell'immagine all'interno dello sprite, possiamo visualizzare le singole immagini come elementi separati sulla pagina. Ecco un esempio... abbiamo due pulsanti in un singolo file immagine:
Se vogliamo che venga visualizzata l'immagine a sinistra, possiamo fornire al div arrow-left
come la classe in modo che le coordinate mostrino solo quel lato:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
E se desideriamo visualizzare la freccia destra, imposteremo la classe per il nostro div a arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Sprite CSS per la modalità chiara e oscura
Un uso interessante di questo è con le modalità chiare e scure. Forse hai un logo o un'immagine con testo scuro che non è visibile su uno sfondo scuro. Ho fatto questo esempio di un pulsante che ha un centro bianco per la modalità luce e un centro scuro per la modalità oscura.
Utilizzando i CSS, posso visualizzare lo sfondo dell'immagine appropriato in base al fatto che l'utente stia utilizzando la modalità chiara o la modalità oscura:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Eccezione: i client di posta elettronica potrebbero non supportarlo
Alcuni client di posta elettronica, come Gmail, non supportano le variabili CSS, utilizzate nell'esempio che ho fornito per passare dalla modalità chiara a quella scura. Ciò significa che potrebbe essere necessario utilizzare tecniche alternative per passare da una versione all'altra dell'immagine sprite per diversi schemi di colore.
Un'altra limitazione è che alcuni client di posta elettronica non supportano determinate proprietà CSS comunemente utilizzate negli sprite CSS, come ad esempio background-position
. Ciò può rendere difficile il posizionamento di singole immagini all'interno del file immagine sprite.