Meriv çawa CSS Sprites Bi Moda Ronahî û Tarî bikar tîne

CSS sprites teknîkek in ku di pêşkeftina malperê de tê bikar anîn da ku hejmar kêm bikin HTTP daxwazên ku ji hêla rûpelek malperê ve têne kirin. Ew tevlîhevkirina gelek wêneyên piçûk di nav pelek wêneyek mezin de û dûv re CSS bikar tînin da ku beşên taybetî yên wê wêneyê wekî hêmanên kesane li ser rûpelê malperê nîşan bidin.

Feydeya bingehîn a karanîna CSS sprites ev e ku ew dikarin alîkariya baştirkirina dema barkirina rûpelê ji bo malperek bikin. Her gava ku wêneyek li ser rûpelek malperê tê barkirin, ew daxwazek HTTP-ya cihê hewce dike, ku dikare pêvajoya barkirinê hêdî bike. Bi berhevkirina gelek wêneyan di yek wêneyek sprite de, em dikarin jimara daxwazên HTTP yên ku ji bo barkirina rûpelê hewce ne kêm bikin. Ev dikare bibe malperek zûtir û bersivdartir, nemaze ji bo malperên bi gelek wêneyên piçûk ên mîna îkon û bişkokan.

Bikaranîna CSS sprites jî dihêle ku em ji cachkirina gerokê sûd werbigirin. Dema ku bikarhênerek serdanek malperek dike, geroka wan dê piştî daxwaza yekem wêneya sprite cache bike. Ev tê vê wateyê ku daxwazên paşîn ên ji bo hêmanên kesane yên li ser rûpela malperê ku wêneya sprite bikar tînin dê pir zûtir bin ji ber ku gerok dê berê wêneyê di cacheya xwe de hebe.

CSS Sprites ne ew qas populer in ku berê bûn

CSS sprites hîn jî bi gelemperî têne bikar anîn da ku leza malperê baştir bikin, her çend dibe ku ew wekî berê ne populer bin. Ji ber bandfirehiya bilind, tevn formatên, tepisandina wêneyê, torên radestkirina naverokê (CDN), barkirina lazy, û caching xurt teknolojiyên, em bi qasî ku me berê li ser tevneyê didan CSS-ê nabînin… her çend ew hîn jî stratejiyek mezin e. Ew bi taybetî bikêr e heke we rûpelek heye ku gelek wêneyên piçûk referans dike.

Mînaka CSS Sprite

Ji bo ku em spritên CSS bikar bînin, pêdivî ye ku em cîhê her wêneyek kesane di nav pelê wêneya sprite de bi karanîna CSS-ê diyar bikin. Ev bi gelemperî bi sazkirinê tê kirin background-image û background-position taybetmendiyên ji bo her hêmanek li ser rûpelê malperê ku wêneya sprite bikar tîne. Bi destnîşankirina hevrêzên x û y yên wêneyê di hundurê sprite de, em dikarin wêneyên kesane wekî hêmanên cihêreng li ser rûpelê nîşan bidin. Li vir mînakek e… di pelek wêneyek yekane de du bişkok hene:

Ger em dixwazin wêneya li milê çepê were xuyang kirin, em dikarin div-ê peyda bikin arrow-left wekî çîn lewra koordînat tenê wî alî nîşan didin:

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

Û heke em bixwazin tîra rast nîşan bidin, em ê ji bo div-ya xwe pola destnîşan bikin arrow-right.

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

CSS Sprites Ji bo Moda Ronahî Û Tarî

Yek karanîna balkêş a vê yekê bi modên sivik û tarî ye. Dibe ku we logoyek an wêneyek heye ku li ser wê nivîsek tarî heye ku li ser paşxaneyek tarî nayê dîtin. Min ev mînaka bişkokek kir ku navendek spî ji bo moda ronahiyê û navendek tarî ji bo moda tarî heye.

Bi karanîna CSS-ê, ez dikarim paşxaneya wêneya guncan nîşan bidim li gorî ka bikarhêner moda sivik an moda tarî bikar tîne:

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

Îstîsna: Xerîdarên E-nameyê Dibe ku Vê piştgirî nedin

Hin xerîdarên e-nameyê, wekî Gmail, guhêrbarên CSS-ê piştgirî nakin, ku di mînaka ku min pêşkêşî de ji bo veguheztina modên ronahî û tarî têne bikar anîn. Ev tê vê wateyê ku dibe ku hûn hewce ne ku teknîkên alternatîf bikar bînin da ku di navbera guhertoyên cihêreng ên wêneya sprite de ji bo nexşeyên rengîn ên cihê biguhezînin.

Sînorek din jî ev e ku hin xerîdarên e-nameyê piştgirî nadin hin taybetmendiyên CSS yên ku bi gelemperî di spritesên CSS de têne bikar anîn, wek mînak background-position. Ev dikare pozîsyona wêneyên kesane di nav pelê wêneya sprite de dijwar bike.