Otu esi eji CSS Sprite na ọkụ na ọnọdụ gbara ọchịchịrị
CSS sprites bụ usoro eji na mmepe weebụ iji belata ọnụ ọgụgụ Http arịrịọ nke ibe weebụ mere. Ha na-agụnye ijikọta ọtụtụ obere onyonyo n'ime otu faịlụ onyonyo buru ibu wee jiri CSS gosipụta akụkụ ụfọdụ nke onyonyo ahụ dị ka ihe dị iche iche na ibe weebụ.
Uru bụ isi nke iji CSS sprite bụ na ha nwere ike inye aka melite oge ibu ibe maka weebụsaịtị. Oge ọ bụla agbakwunyere onyonyo na ibe weebụ, ọ na-achọ arịrịọ HTTP dị iche, nke nwere ike belata usoro nbudata ahụ. Site na ijikọta otutu onyonyo n'ime otu onyonyo sprite, anyị nwere ike ibelata ọnụọgụ arịrịọ HTTP achọrọ iji buo ibe ahụ. Nke a nwere ike ime ka webụsaịtị dị ngwa ma na-anabata ngwa ngwa, ọkachasị maka saịtị nwere ọtụtụ obere onyonyo dị ka akara ngosi na bọtịnụ.
Iji CSS sprites na-enyekwara anyị ohere iji ohere nke caching nchọgharị. Mgbe onye ọrụ gara na webụsaịtị, ihe nchọgharị ha ga-echekwa onyonyo sprite mgbe arịrịọ mbụ ahụ gasịrị. Nke a pụtara na arịrịọ ndị na-esote maka ihe ndị dị n'otu n'otu na ibe weebụ na-eji onyonyo sprite ga-adị ngwa ngwa ebe ọ bụ na ihe nchọgharị ahụ enwelarị onyonyo na cache ya.
CSS Sprites adịghị ewu ewu ka ọ dịbu
A ka na-ejikarị sprites CSS iji kwalite ọsọ saịtị, n'agbanyeghị na ha nwere ike ọ gaghị ewu ewu dị ka ọ dịbu. N'ihi oke bandwidth, webp ụdị, image mkpakọ, netwọk nnyefe ọdịnaya (CDN), umengwụ loading, na ike caching teknụzụ, anyị anaghị ahụ ọtụtụ sprite CSS dị ka anyị na-emebu na webụ… n'agbanyeghị na ọ ka bụ nnukwu atụmatụ. Ọ bara uru karịsịa ma ọ bụrụ na ị nwere ibe na-ezo aka n'ọtụtụ obere onyonyo.
Ọmụmaatụ CSS Sprite
Iji jiri CSS sprite, anyị kwesịrị ịkọwa ọnọdụ nke onyonyo ọ bụla n'ime faịlụ onyonyo sprite site na iji CSS. A na-emekarị nke a site na ịtọ ntọala background-image
na background-position
Njirimara maka ihe ọ bụla na ibe weebụ nke na-eji ihe oyiyi sprite. Site n'ịkọwa nhazi x na y nke onyonyo a n'ime sprite, anyị nwere ike igosipụta onyonyo nke ọ bụla dịka ihe dị iche iche na ibe. Nke a bụ ọmụmaatụ… anyị nwere bọtịnụ abụọ na otu faịlụ onyonyo:
Ọ bụrụ na anyị chọrọ ka ihe oyiyi dị n'aka ekpe gosi, anyị nwere ike inye div na arrow-left
dị ka klaasị ya mere nhazi ahụ na-egosipụta naanị akụkụ ahụ:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ma ọ bụrụ na anyị chọrọ igosi akụ ziri ezi, anyị ga-edobe klas maka div anyị arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Maka ọkụ na ọnọdụ gbara ọchịchịrị
Otu ihe na-adọrọ mmasị na nke a bụ na ìhè na ọchịchịrị ụdịdị. Ikekwe ị nwere akara ngosi ma ọ bụ onyonyo nwere ederede gbara ọchịchịrị na ya nke anaghị ahụ n'okirikiri gbara ọchịchịrị. Emere m ihe atụ a nke bọtịnụ nwere etiti ọcha maka ọnọdụ ọkụ yana ebe gbara ọchịchịrị maka ọnọdụ gbara ọchịchịrị.
Iji CSS, enwere m ike igosipụta ndabere onyonyo dabara adaba dabere ma onye ọrụ na-eji ọnọdụ ọkụ ma ọ bụ ọnọdụ gbara ọchịchịrị:
: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);
}
Ewezuga: Ndị ahịa email enweghị ike ịkwado nke a
Ụfọdụ ndị ahịa email, dị ka Gmail, anaghị akwado mgbanwe CSS, nke a na-eji na ihe atụ m nyere iji gbanwee n'etiti ụdị ọkụ na ọchịchịrị. Nke a pụtara na ị nwere ike iji usoro ọzọ iji gbanwee n'etiti ụdị sprite dị iche iche maka atụmatụ agba dị iche iche.
Mmachi ọzọ bụ na ụfọdụ ndị ahịa email anaghị akwado ụfọdụ akụrụngwa CSS nke a na-ejikarị na sprites CSS, dị ka. background-position
. Nke a nwere ike ime ka o sie ike idobe onyonyo nke ọ bụla n'ime faịlụ onyonyo sprite.