Marketing Content

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:

Esempio di Sprite CSS

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.

css sprite chiaro scuro

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.

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.