maʻiʻo ke kūʻai akuʻana

Pehea e hoʻohana ai i nā Sprite CSS me ke ʻano māmā a me ka ʻeleʻele

CSS ʻO nā sprites kahi ʻenehana i hoʻohana ʻia i ka hoʻomohala pūnaewele e hōʻemi i ka helu o HTTP nā noi i hana ʻia e kahi ʻaoʻao pūnaewele. Hoʻopili lākou i ka hoʻohui ʻana i nā kiʻi liʻiliʻi he nui i hoʻokahi faila kiʻi nui a hoʻohana i ka CSS e hōʻike i nā ʻāpana kikoʻī o kēlā kiʻi ma ke ʻano he mau mea ponoʻī ma ka ʻaoʻao pūnaewele.

ʻO ka pōmaikaʻi nui o ka hoʻohana ʻana i nā sprites CSS hiki iā lākou ke kōkua i ka hoʻomaikaʻi ʻana i ka manawa hoʻouka ʻaoʻao no kahi pūnaewele. I kēlā me kēia manawa e hoʻouka ʻia kahi kiʻi ma kahi ʻaoʻao pūnaewele, pono ia i kahi noi HTTP kaʻawale, hiki ke hoʻolōʻihi i ke kaʻina hoʻouka. Ma ka hoʻohui ʻana i nā kiʻi he nui i hoʻokahi kiʻi sprite, hiki iā mākou ke hōʻemi i ka nui o nā noi HTTP e pono ai e hoʻouka i ka ʻaoʻao. Hiki i kēia ke hopena i kahi pūnaewele wikiwiki a pane aku, ʻoi aku hoʻi no nā pūnaewele me nā kiʻi liʻiliʻi he nui e like me nā kiʻi a me nā pihi.

ʻO ka hoʻohana ʻana i nā sprites CSS hiki iā mākou ke hoʻohana pono i ka cache browser. Ke kipa ka mea hoʻohana i kahi pūnaewele, e hūnā kā lākou polokalamu kele i ke kiʻi sprite ma hope o ka noi mua. ʻO ia hoʻi, ʻoi aku ka wikiwiki o nā noi ma hope no nā mea ponoʻī ma ka ʻaoʻao pūnaewele e hoʻohana ana i ke kiʻi sprite no ka mea ua loaʻa i ka polokalamu ke kiʻi i loko o kona huna huna.

ʻAʻole kaulana nā CSS Sprites e like me ka wā ma mua

Hoʻohana mau ʻia nā sprites CSS e hoʻomaikaʻi i ka wikiwiki o ka pūnaewele, ʻoiai ʻaʻole paha lākou i kaulana e like me ka wā ma mua. Ma muli o ka bandwidth kiʻekiʻe, webp nā palapala, hoʻoliʻiliʻi kiʻi, nā pūnaewele hoʻolaha maʻiʻo (CDN), kalapu ʻia, a ka hoʻopaʻa ʻana ikaika ʻenehana, ʻaʻole mākou ʻike i ka nui o nā sprite CSS e like me kā mākou ma mua ma ka pūnaewele… ʻoiai he hoʻolālā maikaʻi loa ia. ʻOi aku ka maikaʻi inā loaʻa iā ʻoe kahi ʻaoʻao e kuhikuhi ana i ka lehulehu o nā kiʻi liʻiliʻi.

CSS Sprite Laʻana

No ka hoʻohana ʻana i nā sprites CSS, pono mākou e wehewehe i ke kūlana o kēlā me kēia kiʻi i loko o ka faila kiʻi sprite me ka hoʻohana ʻana i CSS. Hana ʻia kēia ma ka hoʻonohonoho ʻana i ka background-image a background-position nā waiwai no kēlā me kēia mea ma ka ʻaoʻao pūnaewele e hoʻohana ana i ke kiʻi sprite. Ma ke kuhikuhi ʻana i nā hoʻonohonoho x a me y o ke kiʻi i loko o ka sprite, hiki iā mākou ke hōʻike i nā kiʻi pākahi ma ke ʻano he mea ʻokoʻa ma ka ʻaoʻao. Eia kekahi laʻana… loaʻa iā mākou ʻelua pihi ma kahi faila kiʻi hoʻokahi:

CSS Sprite Laʻana

Inā makemake mākou e hōʻike ʻia ke kiʻi ma ka hema, hiki iā mākou ke hāʻawi i ka div me arrow-left e like me ka papa no laila e hōʻike wale nā ​​koordinat i kēlā ʻaoʻao:

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

A inā makemake mākou e hōʻike i ka pua ʻākau, e hoʻonoho mākou i ka papa no kā mākou div i arrow-right.

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

CSS Sprites No ka Malamalama a me ka Pouli

ʻO kahi hoʻohana hoihoi o kēia me nā ʻano māmā a me nā ʻano ʻeleʻele. Loaʻa paha iā ʻoe kahi hōʻailona a i ʻole kiʻi i loaʻa i kahi kikokikona ʻeleʻele i ʻike ʻole ʻia ma kahi ʻeleʻele. Ua hana wau i kēia hiʻohiʻona o kahi pihi i loaʻa kahi kikowaena keʻokeʻo no ke ʻano māmā a me kahi kikowaena pouli no ke ʻano ʻeleʻele.

css sprite malamalama pouli

Ke hoʻohana nei i ka CSS, hiki iaʻu ke hōʻike i ke kāʻei kiʻi kūpono e pili ana i ka hoʻohana ʻana o ka mea hoʻohana i ke ʻano māmā a i ʻole ke ʻano ʻeleʻele:

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

Hoʻokoe: ʻAʻole hiki i nā mea kūʻai leka uila ke kākoʻo i kēia

ʻAʻole kākoʻo kekahi mau mea leka uila, e like me Gmail, i nā ʻano CSS, i hoʻohana ʻia i ka laʻana aʻu i hāʻawi ai e hoʻololi i waena o nā ʻano māmā a me nā ʻano pōʻeleʻele. ʻO ke ʻano kēia, pono paha ʻoe e hoʻohana i nā ʻenehana ʻē aʻe e hoʻololi i waena o nā mana like ʻole o ke kiʻi sprite no nā ʻano kala like ʻole.

ʻO kekahi palena ʻē aʻe, ʻaʻole kākoʻo kekahi mau mea leka uila i kekahi mau waiwai CSS i hoʻohana mau ʻia i nā sprites CSS, e like me background-position. He mea paʻakikī kēia i ka hoʻonoho ʻana i nā kiʻi pākahi i loko o ka faila kiʻi sprite.

Douglas Karr

Douglas Karr he CMO o OpenINSIGHTS a me ka mea nana i hookumu i ka Martech Zone. Ua kōkua ʻo Douglas i ka nui o nā hoʻomaka ʻana o MarTech, ua kōkua i ka hoʻomaʻamaʻa pono ʻana ma luna o $ 5 bil i nā loaʻa a me nā hoʻopukapuka kālā ʻo Martech, a hoʻomau i ke kōkua ʻana i nā hui i ka hoʻokō ʻana a me ka hoʻomaʻamaʻa ʻana i kā lākou kūʻai aku a me nā hoʻolālā kūʻai. ʻO Douglas kahi hoʻololi kikohoʻe i ʻike ʻia ma ka honua a me ka loea a me ka ʻōlelo a MarTech. He mea kākau ʻo Douglas i kahi alakaʻi a Dummie a me kahi puke alakaʻi ʻoihana.

nā Articles

E hoʻi i ke pihiʻaoʻao
kokoke

ʻIke ʻia ʻo Adblock

Martech Zone hiki iā ia ke hāʻawi iā ʻoe i kēia ʻike me ka uku ʻole no ka mea ke hoʻolilo nei mākou i kā mākou pūnaewele ma o ka loaʻa kālā hoʻolaha, nā loulou pili, a me nā kākoʻo. Mahalo mākou inā e wehe ʻoe i kāu mea hoʻolaha hoʻolaha i kou nānā ʻana i kā mākou pūnaewele.