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:
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.
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.