Content Màrqueting

Com utilitzar sprites CSS amb el mode clar i fosc

CSS Els sprites són una tècnica utilitzada en el desenvolupament web per reduir el nombre de HTTP sol·licituds fetes per una pàgina web. Implica combinar diverses imatges petites en un únic fitxer d'imatge més gran i després utilitzar CSS per mostrar seccions específiques d'aquesta imatge com a elements individuals a la pàgina web.

El principal avantatge d'utilitzar sprites CSS és que poden ajudar a millorar el temps de càrrega de la pàgina d'un lloc web. Cada vegada que es carrega una imatge en una pàgina web, requereix una sol·licitud HTTP separada, que pot alentir el procés de càrrega. Combinant diverses imatges en una única imatge de sprite, podem reduir el nombre de sol·licituds HTTP necessàries per carregar la pàgina. Això pot donar lloc a un lloc web més ràpid i responsiu, especialment per a llocs amb moltes imatges petites, com ara icones i botons.

L'ús de sprites CSS també ens permet aprofitar la memòria cau del navegador. Quan un usuari visita un lloc web, el seu navegador emmagatzemarà a la memòria cau la imatge del sprite després de la primera sol·licitud. Això vol dir que les sol·licituds posteriors d'elements individuals de la pàgina web que utilitzen la imatge sprite seran molt més ràpides, ja que el navegador ja tindrà la imatge a la memòria cau.

Els sprites CSS no són tan populars com abans

Els sprites CSS encara s'utilitzen habitualment per millorar la velocitat del lloc, tot i que potser no són tan populars com abans. A causa de l'ample de banda elevat, webp formats, compressió d'imatges, xarxes de lliurament de contingut (CDN), carregada mandrosai memòria cau forta tecnologies, no veiem tants sprites CSS com abans a la web... tot i que segueix sent una gran estratègia. És especialment útil si teniu una pàgina que fa referència a multitud d'imatges petites.

Exemple de sprite CSS

Per utilitzar sprites CSS, hem de definir la posició de cada imatge individual dins del fitxer d'imatge sprite mitjançant CSS. Això es fa normalment configurant el background-image i background-position propietats de cada element de la pàgina web que utilitza la imatge sprite. En especificar les coordenades x i y de la imatge dins de l'esprite, podem mostrar imatges individuals com a elements separats a la pàgina. Aquí teniu un exemple... tenim dos botons en un sol fitxer d'imatge:

Exemple de sprite CSS

Si volem que es mostri la imatge de l'esquerra, podem proporcionar el div arrow-left com la classe, les coordenades només mostren aquest costat:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

I si volem mostrar la fletxa dreta, establiríem la classe per al nostre div arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

Sprites CSS per al mode clar i fosc

Un ús interessant d'això és amb els modes clar i fosc. Potser teniu un logotip o una imatge amb text fosc que no és visible sobre un fons fosc. Vaig fer aquest exemple d'un botó que té un centre blanc per al mode clar i un centre fosc per al mode fosc.

css sprite clar fosc

Amb CSS, puc mostrar el fons de la imatge adequat segons si l'usuari està utilitzant el mode clar o el mode fosc:

: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);
}

Excepció: els clients de correu electrònic poden no admetre això

Alguns clients de correu electrònic, com ara Gmail, no admeten variables CSS, que s'utilitzen a l'exemple que he proporcionat per canviar entre els modes clar i fosc. Això vol dir que és possible que hàgiu d'utilitzar tècniques alternatives per canviar entre diferents versions de la imatge de sprite per a diferents esquemes de colors.

Una altra limitació és que alguns clients de correu electrònic no admeten determinades propietats CSS que s'utilitzen habitualment en sprites CSS, com ara background-position. Això pot dificultar la posició d'imatges individuals dins del fitxer d'imatge sprite.

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.